Sharepoint - What is the proper way to add custom CSS/JavaScript SharePoint 2013 site?

There are some ways to achive this but I always use the style library to store my customized css files and reference them from the master page in the head section. Just add these lines if procceed.

 <SharePoint:CssRegistration ID="CssRegistration1" Name="Themable/corev15.css" runat="server" />
 <SharePoint:CssRegistration ID="CssRegistration2" Name="/Style Library/css/customized.css" runat="server" After="corev15.css" />

easiest and best way for adding custom CSS is to add Alternate CSS URL from following web url in Central Administration Web App (port 3000 )

  • http://portal:3000/_layouts/15/ChangeSiteMasterPage.aspx enter image description here

Notes:

  1. first upload your css to below default and recommended location. you should already know that you can add this location to your windows mapped network drive and work with the files easily from your my computer like it is your local files.

    (http://portal/_catalogs/masterpage)

  2. sadly even for SP1 version of SharePoint(15.0.4569.1000) this link is not visible in site setting but after upgrading (for tested version of 15.0.4745.1000 - ​Aug 2015) ,this useful link is accessible under Master page link under Look and Feel


If it's SharePoint on-premises then the best way is to create a Solution with a Feature with a <Control> element targeting the AdditionalPageHead delegate control. Then you can easily turn it on/off and it works regardless of which master page you choose.

For guidance see Adding jQuery to Every Page in SharePoint with Delegate Controls

Tags:

Javascript

Css