Protiviti / SharePoint Blog

SharePoint Blog

July 06
Adding Custom Styles to a SharePoint Page

The best practice for styling a SharePoint site collection is to centralize all CSS in a style sheet (or set of style sheets) that are referenced on the master page or page layouts. This approach ensures a coherent and consistent design and provides the necessary control for long-term management and updates of the site design.

There are times, however, when adding new styles rules to the site design is not practical. When you need to style a unique block of content, rather than site-wide SharePoint components, adding custom styles to a single web page can be the better solution.

This HTML-based graphic is an example of unique content that only need to be styled locally:

Example graphic 

Any user with Contributor permissions can edit these page-based styles, which can be a double-edged sword. The ease of access to styling can also result in easy page wrecking, but the damage can be remedied by deleting the styles from the page.

There are several different methods for applying a set of style rules to an individual page. Understanding the advantages and disadvantages of each will help you select the most appropriate one for your content.

Script Editor Web Part

The most simple and direct way to style unique content is with a Script Editor web part.

First, add your text block with HTML markup to the page contents. You will need to work in Edit Source mode to ensure the markup is kept intact.

HTML Source panel 

Next, select a Script Editor web part from the Media & Content category and add it to any web zone on the page. Modify the web part title to clearly identify its purpose (i.e., “Cornerstone Design Styles"), then click the Edit Snippet link and paste your CSS styles code into the Embed pane. The HTML text block should appear styled as soon as you click Insert.

Embed panel 

The only disadvantage to this method is that the HTML markup and CSS can be easily overwritten. If the page is edited often by numerous people, you may want to try another less exposed method.

Style Sheet Reference LinkM

Large blocks of CSS are more easily and safely stored in a traditional style sheet saved as a .css file. This file can be uploaded to the SharePoint Style Library or to the Documents library of the site that contains the page where your graphic is being displayed.

To reference the style sheet, add a Script Editor to the page and paste the style sheet link into the Embed panel:

Embed panel 

Editing the style rules is a more cumbersome process, but if the link is accidentally deleted from the page, the styles are easily restored. This approach can also be used to apply the same styles to more than one page, but multiple references are usually a sign that these styles should be integrated into the main design rather than applied manually to individual pages.

Content Editor Content Link

If you’re concerned that complex HTML markup will be inadvertently overwritten if exposed on the page, you can save both the HTML and the CSS style rules in a single .txt file. This file can only be displayed in a web zone, so you may need to rearrange other text on your page to accommodate this new positioning.

First, upload this .txt file to any document library where it is easily referenced.

Text file 

To import this graphic back into the page, add a Content Editor web part to a web zone and enter the URL to the file in the Content Link field. Edit the Appearance attributes, such as Chrome, and then click OK or Apply to see the embedded graphic on the page.

Content Editor Content Link 

If you would like to display this combo package of text markup and styles in multiple site locations, the Content Editor web part can be Exported and then uploaded to the Web Part Gallery.

Deleting Page-based Styles

As mentioned above, any design issues or conflicts created by the custom styles can be easily resolved by deleting the web part displaying or linking to styles. This can usually be done just by editing the web page directly, but if the styles inadvertently make the page inaccessible, they can also be deleted through the Web Part Page Maintenance view.

Quick Launch

© Protiviti 2021. All rights reserved.   |   Privacy Policy