11

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

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

8

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

  • Definitely the best solution. No code, just OOB functionality, easy to configure via UI, PowerShell and code (SPWeb.AlternateCssUrl). – dstarkowski Feb 18 '16 at 15:01
7

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" />
  • So you just change the v4.master file directly? – Egil Hansen Aug 22 '13 at 13:00
  • thank you Alvmad. Where do we go in the share point 2013 system to implement this solution you have? – klewis Jun 4 '14 at 20:34
  • This should be in the master page or page layout you desire – Alvmad Jun 4 '14 at 23:25
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
    Simple and clean solution if you want to add it to couple specific pages. Not very useful when you need to add it globally. – dstarkowski Feb 18 '16 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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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