Using the Code Snippets on this Site

The code snippets on this site are CSS code blocks that either set or override SharePoint’s built in Cascading Style Sheets (.CSS files).  In order to use the codes here you’ll have to use one of the following methods.  There are other ways of doing this, including modifying the master page file in SharePoint, or the Master CSS file, but I do not advise going down that path unless you’re comfortable– in which case you probably won’t be referencing this article anyway.

Either method you choose will require a content editor to be placed on the page you want to modify.

How to Add a Content Editor to a SharePoint Page:

Edit your page through the tabular menu

When the edit menu appears:

  • Click the “Insert” tab
  • Click “Web Part” in the insert tab
  • Under “Categories”, click “Media and Content”
  • In “Parts” to the right, click “Content Editor” and add it to the page.

Once the editor is displayed, you’ll need to click on the Web Parts context menu.  It appears as a down-pointing arrow in the top-right corner of the Web Part.

  • Click “Edit Web Part” in the drop down menu that appears.
  • Set the title of the content editor under the “Appearance” section to “CSS Edits”
    This ensures that you can easily identify what is in the editor, either in the page edit view, or on the web part maintenance page.
  • *Optionally* I’ll typically set the “Chrome Type” setting to “None” under the appearance section of the Web Part menu so that the content editor will not appear in a normal page view. This just makes for a better user experience.

Now, you’ll choose which method you’ll be using to add CSS snips into the editor.  There are two main options; I typically use option 1.


Option 1: Create a CSS file and Link to it in the Content Editor Web Part

This options is more versatile; it allows you to create a single CSS file that you can edit in the browser and associate many content editors to a single file.  If you have multiple pages with common elements you’d like to change or modify, this is easier.

  • Open a text editor on your computer (Notepad, or NotePad ++).
  • Leave the file blank and save it as [Filename].css — the name of the file doesn’t matter, but you may choose to make it meaningful like “SalesPage.css” or “SiteMods.css”.
  • On your SharePoint site, go to the gear menu, select “Site Contents”
  • Click the title of the library “Site Assets”
  • Upload your .CSS file into the Site Assets Library.
  • On the page where you’ve inserted the content editor, paste the URL of the .css file saved in site assets.  (Typically you’ll use “/siteassets/[Filename].css”)
  • Now that you’ve linked the Content Editor to the CSS file, you’ll return to the “Site Assets” library, and edit the CSS file– dropping in the code from these articles.

 


Option 2: Insert Embed Codes into Content Editor

This options is fairly basic; this is more suited to only modifying element(s) on a single page.  It is also a little more conveluded as you must edit the content editor web part each time you want to update the code.  — If you do not edit the webpart, and only click on “edit snippet”, the page will appear to update and use your CSS, but your changes will not be saved.  

Once you’ve added the Content Editor Web Part to the page, clicked the context menu link, and selected “edit web part” in the dropdown menu:

  • Click the insert tab in the tabular menu at the top of the page and click “Embed Code”
  • Paste the code snippet into the window

 

*** Note: When using this option, you’ll need to go into the Edit Web Part menu each time before you can edit the snippet, or your changes will not be saved.  For this reason, unless the code you’re dropping in is only for one element on a single page, Option 1 is recommended.

Leave a Reply

Your email address will not be published. Required fields are marked *