SharePoint Silly Questions: Referencing Site Relative Stylesheet and JavaScript

One of the most common things which happen when you customise SharePoint site look is that you reference your custom CSS or JavaScript file and when you migrate the solution to production – things break and your CSS file doesn’t load. That’s probably because you worked on a dev site collection where the site is actually at the root level. To avoid things like this to happen, reference your Stylesheet and JavaScript files using a relative link.

Here is how:

CSS

<SharePoint:CssRegistration ID=”CssRegistration1″ name=”<% $SPUrl:~SiteCollection/Style Library/MyProject/CSS/MyStyle.css%>” runat=”server”/>

JavaScript:

<SharePoint:Scriptlink ID=”Scriptlink1″ runat=”server” Name=”~SiteCollection/Style Library/MyProject/Scripts/MyJS.js” Language=”javascript” />

This will make sure that no matter where your site runs it will grab it’s styles and scripts from the root of that site collection; this works great in Office 365!

Update: As @StfBauer pointed out to me the other day, this works for SP Server edition and Office 365 equivalent; folks using foundation are out of luck

Enjoy!

If you have any questions or feedback on Yaroslav’s article please leave a comment below. We would love to hear from you.

Check out Yaroslav Pentsarskyy blog ShareMuch for more insightfull content.

For more expert information why not check out Yaroslav’s free eBook ‘Rapid SharePoint 2013 Collaboration Solution Development and Deployment Ch. 3 Applying Branding to the Collaboration Components‘. Download Now>>

Share this on...

Rate this Post:

Share:

Topics:

General