Sharepoint Css Registration – What You Need To Know

Registering Custom CSS in SharePoint

Registering custom Cascading Style Sheets (CSS) allows SharePoint users to customize the look and feel of their SharePoint sites beyond what is available out-of-the-box. By registering custom CSS, users can alter fonts, colors, layouts and more to tailor SharePoint to their specific branding needs.

What is Custom CSS Registration

Custom CSS registration refers to the process of adding custom CSS rules and selectors to SharePoint master pages and page layouts. This allows the custom CSS to be loaded and applied automatically whenever associated pages are rendered in SharePoint.

Registration adds references to the custom CSS files in the master pages gallery or SharePoint content database. Once registered, the custom CSS can cascade through and style all pages derived from the associated master pages as intended without needing to be added manually in each page.

Why Register Custom CSS

There are several key reasons why registering custom CSS is beneficial in SharePoint:

• Automatic styling application – By registering CSS, the styles will load and apply to all associated pages automatically whenever they are rendered without needing to be re-added every time.
• Ease of management – Registered CSS is centrally referenced. It can easily be changed, updated or removed from one location to apply site-wide.
• Branding consistency – Registering master page CSS allows corporate branding and style customizations to cascade consistently through all site pages derived from the branded master page.
• Control look and feel – Custom CSS gives site owners full control to determine a site’s fonts, colors, layouts and other style attributes.

How to Register Custom CSS

There are several methods that can be used to register custom CSS in SharePoint. The most common ways are using SharePoint Designer and PowerShell.

Using SharePoint Designer

SharePoint Designer provides a simple interface to add references to custom CSS files in master pages and page layouts. To register CSS using SharePoint Designer:

1. Open the site in SharePoint Designer and navigate to Master Pages.
2. Edit the desired master page and add a reference to the custom CSS file in the PlaceHolderAdditionalPageHead section:

<SharePoint:CssRegistration name="NameOfCSSFile" After="corev15.css" runat="server" />

3. Save the changes to the master page.
4. Publish the updated master page.

This will register the CSS to be included on all site pages using that master page. The CSS registration can be added directly in page layouts as well for CSS rules intended for specific page layouts only.

Using PowerShell

SharePoint PowerShell cmdlets can also register custom CSS globally. To register CSS using PowerShell:

1. Upload the custom CSS file(s) to Style Library in the SharePoint root site.
2. Reference the uploaded CSS file location in the Add-SPUserCustomAction cmdlet:

Add-SPUserCustomAction -Name "Register Custom Stylesheet" -Location "ScriptLink" -Sequence 1001 -Url "~SiteCollection/Style Library/NameOfCSSFile.css"

Run this to register the custom CSS globally. The CSS can then be managed centrally from the style library.

Example Code

Here is an example reference implementing custom CSS registration in the master page using SharePoint Designer:

<SharePoint:CssRegistration name="custom.css" After="corev15.css" runat="server" />

This will register the CSS file called custom.css stored in the Style Library after the core SharePoint CSS file. The custom CSS will then apply automatically across sites.

Troubleshooting CSS Registration Issues

Some common issues faced when registering custom CSS and troubleshooting steps include:

• CSS not applying – Verify file path and name accuracy. Check for typos and uppercase vs lowercase letters. Confirm CSS placement location is published.
• CSS conflicts – Use developer tools to inspect element styles and find conflicting selectors. Override conflicting rules with custom CSS specificity.
• CSS applies intermittently – Check server load. CSS may fail to load during periods of high site activity and demand. Upgrade server resources if needed.
• Outdated CSS – Check timestamps if CSS applies only partially. References may be outdated after edits. Republish master pages to update.

Additional troubleshooting can involve temporarily renaming custom CSS files to identify problematic files causing issues. Also confirm intended inheritance by checking applied CSS on specific site pages to isolate the root cause.

Frequently Asked Questions

Some common questions related to custom CSS registration include:

Where should custom CSS files be stored in SharePoint?

The best practice is to store custom CSS files in the Style Library in Site Settings. These can then be referenced using relative paths from Master Pages and Page Layouts site-wide.

What is the difference between reference types like ~site and ~sitecollection?

~site points to root site CSS while ~sitecollection references CSS globally from root site for the site collection. ~sitecollection ensures all subsites inherit the CSS.

Can I register multiple custom CSS files?

Yes, multiple custom style sheets can be registered using unique names and file paths. They will be loaded sequentially based on the order configured.

What are some CSS best practices for SharePoint sites?

Best practices include using relative paths, validating CSS code, preferring ID over element selectors, and using specificity minimally only to override SharePoint default styling.