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

Question

I would like to tweak the default layout in SharePoint, e.g. add...

.ms-number {
    white-space: nowrap;
}

... to all pages.

I know it is possible to modify a master page directly, but is it the best approach? What about themes?

Answer 1

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

Answer 2

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" />

Answer 3

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

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

Answer 4

I usually save the Style files to a document library, and add a content editor web part to the pages I try to edit and pass the url to my stylesheet. This way I don't mess around with the Master page, and if anything goes wrong I can just delete my CEWP.

Answer 5

Register a "CustomAction" for JS. Works great in the cloud. Keeps branding isolated. Easy to manage without any server side access or admin install.

• Check out John Liu's blog post at http://johnliu.net/blog/2015/12/the-safest-future-proof-way-to-brand-your-sharepoint-and-sharepoint-online

• Source code at https://github.com/johnnliu/UserCustomActionsConfigPage/tree/master/dist

Here's a screenshot of the configure page where you can register/de-register "CustomAction" pointers to JS files.

Answer 6

It depends on your need

If you want it across all pages in site collection, then upload the css file to style library, add that css file reference in master page

<SharePoint:CssRegistration  Name="/sites/sitename/Style Library/styles/sample.css" runat="server" After="corev15.css" />

If you want your style to apply only on a few pages. Add a script editor to the pages where you want this css file to work and add a simple <link> tag like

<link href="/sites/sitename/style library/css/filename.css

If you want to add css to only one page, in the same script editor use the style tag

<style>
/*your css codes go here*/
</style>

On adding the script part, If you want to add to masterpage use the below line in the .master file

<SharePoint:ScriptLink language="javascript" name="~sitecollection/style library/script/custom.js" runat="server" Localizable="false" />

For other pages you can use

<script src='/sites/sitename/script/custom.js'></script>