Applying Custom Styles to Page Layouts in SharePoint 2013

When working with SharePoint, there may always be an occasion where you want to apply some specific styles to appear only when a page uses a specific Page Layout. For example, your Master Page may contain a Left Navigation that is needed throughout the site, but you may want to hide it just on your Landing Page Layout.

There are basically 3 ways in which this can be achieved:

01. Custom Style sheet

In your custom Page Layout, search for id=”PlaceHolderAdditionalPageHead“. You’ll find it in an opening tag that looks like this:

<!–MS:<asp:ContentPlaceHolder id=”PlaceHolderAdditionalPageHead” runat=”server”>–>

Underneath this tag, you may insert the usual reference to your custom style sheet using the <link> tag, with the addition of the attribute ms-design-css-conversion=”no”.

Example:

<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<link href="indigo_layout.css" rel="stylesheet" type="text/css" ms-design-css-conversion="no" />

Important: Remember to place the link reference right underneath the start of PlaceHolderAdditionalPageHead, as to add the attribute ms-design-css-conversion=”no”. Without them, this will not work.

02. Using <style> tags

Alternatively you may want to enclose your custom styles within <style></style> tags and place them inside the Page Layout itself.

In order to make this work, you’ll have to enclose the <style> tags within  <!–MS:–>  <!–ME:–>  tags, and once again you have to place these styles underneath PlaceHolderAdditionalPageHead

Example:

<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
     <!--MS:<style type="text/css">--> 
          #wr_leftNav { display: none !important; } 
     <!--ME: </style>-->

Important: Remember to include the <!–MS–>  <!–ME:–> tags, and place the style block underneath the start of PlaceHolderAdditionalPageHead.

03. Inline Styles

If you have some custom html markup in your page layout that you want to style, you can simply target the markup tags with inline styles.

Example:

<div id="contentBox" style="width: 400px; background: red;">

…I’m sure you get the drift

Advertisement