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:
_catalogs/masterpage
folder. This allows for the files to be included when exporting a design package._layouts
folder on the filesystems of the SharePoint servers. This is primarily accomplished with custom SharePoint solutions created with Visual Studio.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.
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:
seattle.master
(for our example, we have renamed it Seattle_AddJavaScriptAndCSS.master
).Seattle_AddJavaScriptAndCSS.master
master page using the Check Out feature.Seattle_AddJavaScriptAndCSS.master
master page.<head>
element. The following screenshot shows the <head>
element highlighted in the code:<SharePoint:ScriptLink ID="customJavaScript" Name="<% $SPUrl:~Site/_catalogs/masterpage/resources/SampleJavaScript.js %>" runat="server"></SharePoint:ScriptLink>
<SharePoint:CssRegistration ID="customCssRegistration" Name="<% $SPUrl:~Site/_catalogs/masterpage/resources/SampleStyleSheet.css %>" runat="server"></SharePoint:CssRegistration>
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.
3.133.122.68