Protiviti / SharePoint Blog

SharePoint Blog

June 08
Managing the SharePoint Style Sheet Cascade

SharePoint default styling allows for the quick creation of sites and pages that are ready to publish and show to users without worrying about design work beforehand. A custom master page, on the other hand, can create a unique look-and-feel to your site, but this redesign requires a substantial effort to implement and advanced SharePoint/designer skills.

In between those two extremes, there are ways to add small custom CSS touches to a sub site or a specific web page using out-of-the-box methods. Keep in mind, however, that these techniques are best suited for limited scopes, not for in-depth site-wide design implementations.

Cascading Style Sheets (CSS)

To understand how new CSS rules affect the SharePoint design, you should understand the "cascade" principle of CSS. Both the way in which style rules are referenced and the order in which they are applied, determines which rules have the greatest weight or priority over others. When style rules conflict, the rule with the highest priority wins.

Master Page Style Sheets

The OOTB style sheet links coded in the <head> of the master page are at the top of the CSS cascade. Each successive file has more priority than the one above it, so the style rules in the very last file (SuiteNav.css) will overwrite any similar rules in the style sheets stacked above it.

SharePoint 2016 master page cascade (Seattle):

<head>
<link rel="stylesheet" type="text/css" href="/sites/(site name)/Style%20Library/en-US/Themable/Core%20Styles/pagelayouts15.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/Themable/corev15.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/Themable/corev15.css"/>
<link rel="stylesheet" type="text/css" href="/sites/(site name)/Style%20Library/en-US/Themable/Core%20Styles/controls15.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/Themable/searchv15.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/QCB.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/SuiteNav.css"/>
</head>

Alternate CSS URL

An additional style sheet link can be added into the <head> area, right below the original master page style sheets, with a simple site configuration change.

Upload a style sheet (.css file) to the site collection Style Library or to any SharePoint document library. Then browse to the Master page settings (Site Settings > Look and feel > Master page) and fill in the Alternate CSS URL field to point to that new file.

This method can work across the site collection if it is added at the root and all other sub sites inherit from the top level Master page settings. It can, however, be added through the Site Settings of a specific sub site instead. This would provide quick customization of a single site without needing a new/custom master page or page layout.

 

The link to this alternate style sheet will be injected into the <head> area of every web page in the configured sub site. Rules in this alternate CSS file should overwrite rules in the files above it, as long as each custom style rule mirrors the exact same selectors and syntax as the rule it replaces. (Selectors also influence the priority assigned to a style rule.)

<head>
<link rel="stylesheet" type="text/css" href="/sites/(site name)/Style%20Library/en-US/Themable/Core%20Styles/pagelayouts15.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/Themable/corev15.css"/>
<link rel="stylesheet" type="text/css" href="/sites/(site name)/Style%20Library/en-US/Themable/Core%20Styles/controls15.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/Themable/searchv15.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/QCB.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/SuiteNav.css"/>
<link rel="stylesheet" type="text/css" href="/sites/(site name)/Style%20Library/CSS/custom-styles.css"/>
</head>

The obvious limitation to using the Alternate CSS URL field is that you must have the appropriate user permissions to access the Master page settings.

Custom Page Styling

There are times when you need custom styles applied only to a single page or a small set of pages. There are several ways to do this, and these methods can be used by anyone with content-authoring permissions that include editing web parts.

External File References

Upload your custom style sheet (.css file) to the Style Library or to any document library. Then, using a Script Editor web part, you can add a link to that file directly on your web page.

 

Unlike the Alternate CSS URL, this link will be inserted in the <body> of the page, where the Script Editor web part is located on the page layout, not in the <head> area. This link reference will have greater priority than the style sheet links referenced above it.

Source code in the <body> of the page:

<DIV class="ms-rte-embedcode ms-rte-embedwp">
<link rel="stylesheet" type="text/css" src="/sites/(site name)/Style%20Library/CSS/custom-styles.css" />
</DIV>

Embedded Styles

Style rules that are embedded on a page using an HTML <style> tag have even greater weight than rules added through an external file link . The easiest method to add a <style> code block to a web page is to paste it into a Script Editor web part.

 

If you’re concerned these styles will be accidentally deleted or overwritten, you can save the entire <style> block in a .txt file, upload it to a document library, then embed it using a Content Editor web part Content Link field. To prevent the styles from displaying on the page, set the web part to Hidden (Edit Web Part > Layout > Hidden checkbox).

Either approach will embed the styles directly into the page layout HTML, at the location of the web part:

<div class="ms-rtestate-field">
<style type="text/css">
body { background: #fff; color: black }
p em { background: yellow; color: black }
.note { margin-left: 5em; margin-right: 5em }
</style>
</div>

Best Practices

As useful as these techniques may be, they are also easily abused and can result in a loss of control over the designated site design. Long-term site maintenance can become burdensome with too much reliance on these locally applied styles.

A future article will provide use cases, guidelines and best practices for using embedded styles on SharePoint web pages.

Quick Launch


© Protiviti 2018. All rights reserved.   |   Privacy Policy