It’s time to take a deep dive into the SharePoint 2013 branding. My research on the internet stopped very quickly on the blog from Eric Overfield. After reading his blog I noticed some important branding tips:
- s4-notdlg from SharePoint 2010 changed to ms-dialogHidden in SharePoint 2013:
In a custom branding project you add a new container element, such as a new header, navigation block or footer to your System (default) Master Page. This element then appears in dialogs even through we do not want it to.
Solution:
In SharePoint 2010 we would add the following class to an HTML block we want hidden in dialogs. Such as
<div id="custom-header" class="s4-notdlg">
<!—the rest of the header-->
</div>In SharePoint 2013 we use the same method, just a different class, ms-dialogHidden.
<div id="custom-header" class="ms-dialogHidden">
<!—the rest of the header-->
</div>
- HTML5 doctype
To make your branding XML Compliant. The “doctype” for HTML5 must include DOCTYPE in all capitals, “DOCTYPE”, which is the HTML5 standard, yet many web developers get lazy and it is easy for us to overlook. Even though most browsers and validators appear to accept non-all-caps “DOCTYPE”, SharePoint 2013 will keep us true.
Thus be diligent, make sure your DOCTYPE for HTML5 is exactly:
<!DOCTYPE html>
- Inline Styles in Design Manager Page Layout
We want to hide the left quicklaunch. you may want to start adding inline styles like you used to do in SharePoint 2010. Open the html file and in the section we find a content placeholder,
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->Within this content placeholder, we wish to add our inline style to hide the quicklaunch menu.
<style type="text/css">
#sideNavBox {
display: none;
}
</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:
<style type="text/css">
//<![CDATA[
#sideNavBox {
display: none;
}
//]]>
</style>Solution to fix this problem:<!--MS:<style type="text/css">-->
<!--
#sideNavBox {
display: none;
-->
<!--ME: </style>-->
Pretty article! I found some useful information in your blog, it was awesome to read about microsoft sharepoint tutorial, thanks for sharing this great content to my vision, keep sharing.
BeantwoordenVerwijderen