We have been working on creating some custom style sheets and page layouts from an existing public facing web site. We brought in our existing CSS style sheets, and all of a sudden, our existing SharePoint user interface looked corrupted!

The edit page is even worse:

After several hours of CSS debugging, the cause is conflicts between SharePoint’s existing styles and custom CSS styles being imposed over top.

SharePoint DIV Structure

When SharePoint populates content into a page, it’s composing it out of several distinct elements that include:

• Master Page
• Page Layout
• Populated Field Controls and Web Part Zones

The existing SharePoint user interface (e.g. the top Office 365 bar, the page editing controls, navigation, etc.) are in DIV tags.

• suiteBarTop: the Office 365 suite bar
• s4-ribbonrow: the top ribbon div (e.g. where it says Browse, Page and Publish)
• s4-workspace: the rest of the page without the ribbon
  • s4-bodyContainer: entire page except for the Office 365 suite bar
  • s4-titlerow: the title area with the logo, the top navigation and the title of the page
  • contentRow: the populated content from the site template

Each of these DIV’s are identified by an ID value – this is key to scoping your CSS styles.

Scoping your Styles to Avoid Clobbering the SharePoint UI

In debugging the custom style sheet we had, there were a few key styles that were being applied as general style sheet instructions that were impacting the existing SharePoint UI:

• Body: in general, anything you put in the body selector is going to apply to everything on the page. For example, in our existing CSS we had body setting the line height and this was impacting the existing SharePoint navigation.
• Img: we had a CSS definition for all images to be width: 100%. This kills the icons in all the buttons.
• H1: H1 is used by the title of the page. In our CSS we had some changes to line height, margins, etc. which impacted the page title.
• *: applies styles to everything. Be careful with this selector as it will impact all sorts of existing elements.

Fixing the problem involves finding these global style selectors and scoping them to the contentRow DIV.

For example, our style for H1 becomes: #contentRow h1 {.

For any styles in the selector Body, you can use #contentRow as the outside selector instead:

contentRow {

How SharePoint Manages Icons

SharePoint uses a single Icon master PNG file to store all its icons:

To display the icons, the CSS creates a 32×32 box on the page and then moves the icon image inside it, positioning it so the appropriate icon shows up.

This is why you have to be careful with declaring rules on images such as setting the width or height as this will impact this particular image and your icons won’t show up properly.

The Fixed Version

Here is the version with the CSS adjustments fixed up and working in concert with the existing SharePoint UI.