Protiviti / SharePoint Blog

SharePoint Blog

November 21
Part II: Adding CSS to Multiple SharePoint Web Pages

In Part I: Adding CSS to Single SharePoint Web Page​, I showed how to add CSS style rules directly to a web page using a web part. For repeated use, however, there’s a better, more manageable way to configure your web part.

Let’s take a simple example of wanting to hide the Current Navigation that usually displays in the left-hand column of a page layout. Creating alternate versions (with and without the navigation) for every page layout in the site collection can result in an overwhelming number of options.

A better solution would be to maintain one set of page layouts and add a styling web part when you want to suppress the navigation display.

To set up a styling web part for use on multiple pages, follow these four steps:

Step 1: Create a Style Rules Document

Write your styles rules in Notepad (or paste from an HTML editor) and remember to nest them inside <style> tags. Save as a text file with a descriptive name, such as “NoLeftNav.txt”.

<style type="text/css">

#sideNavBox { display: none; }

#contentBox { margin-left: 20px; }

</style>

Step 2: Upload the Document to SharePoint

Upload your text file to a document library and make note of the file path to the document. For example:  /documents/NoLeftNav.txt

Step 3: Add a CEWP

Next, edit your web page and add a Content Editor Web Part to any web zone on the page layout.

Step 4: Configure the CEWP

Finally, edit the web part with the following configurations:

  • Content Link: Add the file path to your document
  • Appearance: Change the title to “Page Styles” to identify the web part’s purpose
  • Layout: check Hidden so the web part does not display to users
Carmen 1121141.PNG

Click OK and the changes should take immediate effect on the page. You can now Save/Check In and Publish your web page.

Exporting Your Web Part

You can repeat these same steps on other pages or you can Export the web part and add it to your Web Parts Gallery. Styling new pages becomes as simple as dropping that web part in a web zone.

Revising the Style Rules

If the style rules need to be revised, change them directly in the text file. You can either edit the original notepad file on your hard drive or download the text file from the library to your hard drive to revise it. When you’re done, upload the file to the Documents library and over-write the existing file.

All web parts will be updated at once, rather than having to edit each one separately.

Deleting the Style Rules

If you want to remove the style rules from a specific page, just edit the web page and delete the web part.

If you want to disable the styling for all web parts throughout the site collection without having to delete them from every page, you can revise the style file to delete the unwanted style rules.

<style type="text/css">

</style>

All the page layouts in the site collection will be restored to their default styling. 


Quick Launch


© Protiviti 2019. All rights reserved.   |   Privacy Policy