SharePoint Design Tip: Condense those My Site Styles

Everyone talks about OWS.css and SPS.css, but there are more style sheets in SharePoint, one of which is the tip topic for today. OWSPERS.css is the style sheet for personal sites (a.k.a. My Site).   This is important because changes to OWS.css or SPS.css will not affect personal sites.  The OWSPERS.css has all of the style sheet code from OWS.css, SPS.css and MENU.css copied in one, very long file.  So if you make a change to OWS.css or SPS.css and want the same change applied to personal sites, you have to make the change to the OWSPERS.css file, which is redundant and not time effective.

So instead, utilize some CSS code to take this step out.  Replace all of the code in OWSPERS.css with three Import tags:

@import url(ows.css);
@import url(sps.css);
@import url(menu.css);

 

 

This will import in all of the code from those three files, freeing you of multiple location updates and of one very, very long css file.  From here you can add on any custom styles or changes for personal sites and manage it much easier.

The order of the @import tags is important, you want to keep SPS pulling after OWS. OWS is for portals and WSS sites, while SPS is only for portals and has some overriding attributes.

7 thoughts on “SharePoint Design Tip: Condense those My Site Styles”

  1. Thank you heather!
    Could you provide a code exmaple, please?

    If I understand correctly, this:
    .ms-toolbar {
    font-family: verdana;
    font-size: .68em;
    text-decoration: none;
    color: #003399;
    }

    Should be:

    .ms-toolbar {
    @import url(ows.css);
    @import url(sps.css);
    @import url(menu.css);
    }

    Or, are you talking about wiping everything out and inserting

    @import url(ows.css);
    @import url(sps.css);
    @import url(menu.css);

  2. Victor-
    The latter! Just as you said, wipe out everything and insert those three lines.

    You can then append on custom styles or style modifications. Due to the way CSS works, anything added at the bottom will override what was imported in through the import tags.

  3. Hi Heather,I cannot even find the OWSPERS.css file. Is it a different file in MOSS 2007? I have a custom masterpage that Imade default for the entire site but the clients want to be able to put themes over the “my sites” which now are pulling attributes of the default.master. How do I go about fixing this?Thanks,Melissa

  4. Hi!Greeting!I am Mr. Kim living on Kunsan Republic of Korea.I am end user of SPS 2003 and administartor of my base.I’d like to know about CSS and Theme.I am anxious to know how I update image site image and title below of top bar.I saw this page we are able to with CSS and I ‘d like to know how I update.this page saying “@import css-name” something like this.Where do I put it?Would you please help me?Thanks for reading me.Mr. KimV/R

Comments are closed.