Most of our customizations to the master pages require some CSS or JavaScript (JS) references. CSS and JS files should be located in one of the following places:
- In the SharePoint site inside the
_catalogs/masterpagefolder. This allows for the files to be included when exporting a design package. - In the
_layoutsfolder on the filesystems of the SharePoint servers. This is primarily accomplished with custom SharePoint solutions created with Visual Studio. - On an external content source, such as a content delivery network.
When referencing files in the SharePoint site or in the _layouts folder, relative URLs should be used to allow alternate access maps to work. When referencing files on an external site, the exact, complete URL should be used.
Note
Alternate access mapping in SharePoint allows access to SharePoint web applications using multiple URLs. For instance, http://sharepoint/ and http://sharepoint.local/ could be the same SharePoint web application. A relative URL does not specify the protocol or domain in the URL. For instance, /_layouts/mystyles.css is a relative URL, while http://sharepoint/_layouts/mystyles.css is an absolute URL.
Follow these steps to add JavaScript and CSS references to a master page:
- Open SharePoint Designer.
- Select Open Site. Enter the complete URL to the SharePoint site and select Open.
- From the Navigation pane, select Master Pages.
- In the list of files in the Master Pages library, make a copy of
seattle.master(for our example, we have renamed itSeattle_AddJavaScriptAndCSS.master). - Check out the new
Seattle_AddJavaScriptAndCSS.mastermaster page using the Check Out feature. - Open the
Seattle_AddJavaScriptAndCSS.mastermaster page. - Locate the
<head>element. The following screenshot shows the<head>element highlighted in the code:
- Add the following JavaScript reference:
<SharePoint:ScriptLink ID="customJavaScript" Name="<% $SPUrl:~Site/_catalogs/masterpage/resources/SampleJavaScript.js %>" runat="server"></SharePoint:ScriptLink>
- Add the following CSS reference:
<SharePoint:CssRegistration ID="customCssRegistration" Name="<% $SPUrl:~Site/_catalogs/masterpage/resources/SampleStyleSheet.css %>" runat="server"></SharePoint:CssRegistration>
- Save the master page.
- Check in and publish the master page using the Check In and Publish options.
- Set the master page as the Site Master Page.
For traditional websites, the <link> and <script> tags are used to reference CSS and JavaScript files on a web page. While we can still use those in our SharePoint master pages, SharePoint provides server controls to reference CSS and JavaScript files. Using the ScriptLink and CssRegistration server controls will ultimately result in the <link> and <script> tags being added to the page when rendered. However, these server controls provide additional management by SharePoint to prevent duplication and allow for scripts to be loaded on demand rather than on every page load. In addition, these server controls allow variables, such as the site or site collection URLs, to be used in the path to the resource.
- The ScriptLink class topic on MSDN at http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.scriptlink.aspx
- The CssRegistration class topic on MSDN at http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.cssregistration.aspx