13

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?

6 Answers 6

6

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

9

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" />
3
  • So you just change the v4.master file directly? Commented Aug 22, 2013 at 13:00
  • thank you Alvmad. Where do we go in the share point 2013 system to implement this solution you have?
    – klewis
    Commented Jun 4, 2014 at 20:34
  • This should be in the master page or page layout you desire Commented Jun 4, 2014 at 23:25
9

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 )

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

3
  • Definitely the best solution. No code, just OOB functionality, easy to configure via UI, PowerShell and code (SPWeb.AlternateCssUrl). Commented Feb 18, 2016 at 15:01
  • sadly, http://...:3000/_layouts/15/ChangeSiteMasterPage.aspx is not accessible/available for me.
    – kttii
    Commented Dec 12, 2019 at 15:32
  • @kttii , replace 3000 with your Central Administration Web App port.
    – Iman
    Commented Dec 16, 2019 at 0:49
2

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.

1
  • 1
    Simple and clean solution if you want to add it to couple specific pages. Not very useful when you need to add it globally. Commented Feb 18, 2016 at 14:57
2

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

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

enter image description here

1
0

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>
1
  • Thanks. Tats detailed. How to apply CSS for all the site collections under a web application ? Commented Oct 11, 2019 at 2:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.