SharePoint 2013: Inline Styles in Design Manager Page Layout

When you begin working with Page Layouts in SharePoint 2013 Design Manager available in Publishing site, you may want to start adding inline styles like you used to do in SharePoint 2010 to hide the left quick launch among many other reasons. Easy enough, you create a custom Page Layout in Design Manager, say named “Inline Page Layout”, and SharePoint creates two files for you, inline-page-layout.html and inline-page-layout.aspx. As we know, we are not supposed to touch the aspx file, only the html file. No problem.
Open the html file and in thesection we find a content placeholder,

1
 <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->

Within this content placeholder, we wish to add our inline style to hide the quicklaunch menu.

1
2
3
4
5
<style type="text/css">
#sideNavBox {<br />
display: none;<br />
}<br />
</style>


But when you save the page layout, then load a page that uses this page layout in a browser you find that the left quick launch is still visible. Why?
Well, if you open the aspx file, in our case inline-page-layout.aspx in SPD (or Dreamweaver) you will see that within the PlaceHolderAdditionalPageHead Content Place Holder our inline style was converted to valid XML by SharePoint Design Manager and changed to:

1
2
3
<style type="text/css">
//<![CDATA[ #sideNavBox { display: none; } //]]><br />
</style>


Wow, that won’t work. Most browsers will see the CDATA block and ignore what is there, meaning that browsers will not process the included css. Well this one stumped me for a while, but I found a solution I like. Replace the entire original <style> tag in the HTML file with the following:

1
2
3
4
<!--MS:
<style type="text/css">--><br />
<!-- #sideNavBox { display: none; --><br />
<!--ME: </style>-->


Save the HTML page layout and open the associated .aspx page. You should see:

1
2
3
<style type="text/css">
<!-- #sideNavBox { display: none; } --><br />
</style>


Perfect, that browsers can interpret. Nifty huh?
Explanation:
What we are doing is replacing the simple <style> tag with the new Design Manager Markup comment tagging. These Markup Start (MS) and Markup End (ME) tags allow us to pass any HTML/asp.net tag directly to Design Manager without being converted to XML first. This allows us to send the inline styles to the associated .aspx untouched. I add the <!—and –> tags before and after the actual style properties only because in a HTML editor such as Dreamweaver, they will not see the <style> tag because it is in a Design Manager comment tag, so I want the editor to also ignore my inline style content. You actually do not need the <!—and –> if you plan to only work in a code view environment.
Have you found another solution to this problem? Please tell me.
See of all of my SharePoint 2013 Branding Tricks and Discoveries.

4 thoughts on “SharePoint 2013: Inline Styles in Design Manager Page Layout

  1. Panoone June 17, 2014

    Thank you! Lifesaving little tip.
    Knew there had to be a way to achieve such a stupidly simple need. 🙂

  2. Mike Rooker January 22, 2015

    You Sir are a scholar and gentleman.
    Thank you.
    NO one else seems to have had this gem/
    Cheers!

  3. Patti December 14, 2015

    Great thanks!

  4. Jason May 16, 2017

    Every other post I can find wants you to do this through convoluted and complicated hacks, this is clean and simple!

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Get excited for SQL Saturday 2022! Join our Microsoft MVP speakers Rez and Eric to learn how you can use the Power Platform in conjunction with Dataverse for Teams to create apps and solve your business automation challenges. Register now: https://hubs.ly/Q01nc9dm0

2

During the next episode of the #PixelMillWebinars, our #UI/UX experts break down:

- #PowerApp UI/UX best practices & common pitfalls
- #Figma best practices for PowerApps
- Converting from Figma to PowerApps
- See a PowerApp design in action!
https://hubs.ly/Q01n4gDJ0

In the next episode of the #PixelMillWebinars, our #UI / #UX experts break down:

- #PowerApp #UI / #UX best practices & common pitfalls
- #Figma best practices for #PowerApps
- Converting from #Figma to #PowerApps
- See a #PowerApp design in action!

http://ow.ly/nf9250KKYNM

In the next episode of the #PixelMillWebinars, our branding and #UI/#UX experts will show you how to elevate your #PowerApp experience without #coding.

Join us on 9/29 at 11am PST to see how you can apply custom #UI to #PowerApps designed in #Figma.

http://ow.ly/oWpI50KKCr0

Working in a hybrid environment allows us to collaborate with people from all over the world. Check out this quick video and learn how to navigate language barriers when using Teams! #workthewayyouwant

https://hubs.ly/Q01lbPZG0

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch