Preaching SharePoint

Overriding Default CSS with yopur Own in Layout & Master Pages in SharePoint 2013

a Css reference added in thetag of the Master Page is responsible for applying all the styles on a Master Page.For Layout Pages, the styles can be added to either the default Css of Master page or into a separate CSS which will be added exclusively for Layout Pages.

Adding Style Sheet\CSS for Master Page -

In SharePoint 2013, by default, Style sheets such as corev15.css is added in the <head> tag. This default Style Sheet contains Styles that apply to various Components such as Navigation, Search etc in the Master Page. To Override these styles you can either make Changes to the default Css or add a reference to your Custom Css that will Override Styles defined in the default Css file of the Master Page. Overriding Styles with Custom Css is easy but a simple rule here to remember is that you should place the link to your Custom .css file just before the closing </head> tag, so that it overrides the default SharePoint style sheets such as corev15.css.

Adding Styles for Layout Pages –

While Creating Custom Layout pages, you might want to add exclusive CSS styles that should render just for the Pages with the Layout that you Created.In this case, the CSS reference should be added in such as way, that when the page loads, the Layout page styles are applied after styles for the master page. A simple way to do this is by adding a reference to your .css file in PlaceHolderAdditionalPageHead Content placeholder Instead of the <head> tag of the master page.

After adding a reference in PlaceHolderAdditionalPageHead Content placeholder, when a site visitor browses a page that uses this page layout, this additional page head gets merged into the end of the head of the master page—so, styles for the page layout are applied after styles for the master page.

In addition to adding the .css in the Place holder there are two more things that you need to Consider

1. An attribute ms-design-css-conversion=”no”  should also be added to the .Css reference for excluding the style sheet from theming.

2. The link to the style sheet should appear after the lines commented <!–SPM.

If you have different device channels, you likely want your page layouts to render differently for different channels. In that scenario, you include one or more device channel panels inside PlaceHolderAdditionalPageHead, and then include a link to channel-specific CSS files inside each channel panel.


1 Respones to "Overriding Default CSS with yopur Own in Layout & Master Pages in SharePoint 2013"

Joao Ferreira said...

Nice article, let me introduce you other method to change the css and the master pages pages. Bind Tuning have a powerfull tool where you can fully customize a theme for sharepoint, your customizations will generate new css files and masterpage files that you can use to change the default layout of the SharePoint 2013.

28 May 2013 at 14:53

Post a Comment


Do you want SharePoint 2013 to inherit Metro Style design?

Search This Blog

Return to top of page Copyright © 2010 | Platinum Theme Converted into Blogger Template by HackTutors