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.