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 the
section 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.
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:
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:
Save the HTML page layout and open the associated .aspx page. You should see:
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.
[…] suggestion is that we use a trick similar to my first SharePoint 2013 Branding trick and use a snippet like block. See the following code block for the replacement code to link to a […]