SharePoint CSS Reference Guide

MSDN has a set of three articles to help with the customization of SharePoint Sites and Portals. Developers can learn ways you can customize a SharePoint site and an area; manage users, sites, and templates; change the structure of pages in a site; manage user access; and optimize style sheets.

Customizing SharePoint Sites and Portals: Using Templates and Site Definitions, Part 2 outlines how to create and edit a site using templates and site definitions.

Article three, Customizing SharePoint Sites and Portals: Style Sheet Class Reference Tables, Part 3 provides a Web Part compatibility and style sheet class reference tables.

Comments (0)

CSS dotted borders in SharePoint

One obstacle to over come in Internet Explorer is that it incorrectly shows dashed borders instead of dotted borders. To hack around this issue, create an image 2px by 2px with a single dot in the lower left corner.

Add the following rule to your stylesheet:

 

  .className {
                  margin: 0;
                  padding: 0;
                  border-bottom: 1px dotted #HexValueOfDot;
                }

Browsers, like Mozilla that are capable of implementing a dotted line will adhere to the above CSS rule. To apply the dotted line in Internet Explorer, add the following rule below it.

 

  * html .className {
                  background: url(/image/css-dotted-line.gif) repeat-x bottom;
                  padding: 1px;
                  border-bottom: none;
                  }

Internet Explorer requires a height value to apply the background image, however when you add height: 1px; Internet Explorer ignored the specified 1px. To work around this issue, the padding contains the height value therefore not allowing Internet Explorer to change the size.

Comments (0)

SharePoint CSS

One of the frustrating issues when customizing a SharePoint Portal is that not all classes called within the templates are located on one stylesheet. Although, logically you would think that one stylesheet would contain pertinent styles but it is not the case. One must flip back and forth between OWS.CSS and SPS.CSS and the OWSMAC.css file if you are attempting to make SharePoint cross-browser compliant.

Out of the box the OWS.CSS and SPS.CSS stylesheets are more then 25K each. They share a large number of styles. That’s is a lot of classes as well as file size for the user to download.

Sometimes it is suggested to use a custom stylesheet – potentially just a copy of SPS.CSS/OWS.CSS.  This will then always override the default SharePoint styles and additionally will be impervious to being overwritten by an update patch. This method concerns me, due to possible large file sizes. Do users really want to load potentially 100kb of CSS?

Comments (0)