Friday, April 12, 2013

Design Manager deployed Page Layout not displaying custom css file

I recently ran into an issue in which I was attempting to reference a custom css page within a Design Manager deployed page layout; however, I couldn't get the custom css page to load on web pages despite the fact that I was prominently referencing the css file in the proper location of the page layout's HTML file.  After doing a bit of research, I finally discovered that you also need to add a special attribute to the <link> element called "ms-design-css-conversion" and set the value to "no".  Here is an example of what your <link> element will look like in order for the custom css file to load properly:
<link href="MyCustomPageLayoutStyle.css" type="text/css" rel="stylesheet" ms-design-css-conversion="no" />
Also, here is a complete example that also shows you the proper location for referencing you custom css file within your custom page layout's HTML file:

<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<!--CS: Start Edit Mode Panel Snippet-->
    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
        <!--MS:<Publishing:EditModePanel runat="server" id="editmodestyles">-->
        <!--MS:<SharePoint:CssRegistration name="&#60;% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/editmode15.css %&#62;" After="&#60;% $SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/pagelayouts15.css %&#62;" runat="server">-->
        <!--ME:</SharePoint:CssRegistration>-->
    <!--ME:</Publishing:EditModePanel>-->
    <!--CE: End Edit Mode Panel Snippet-->

    <link href="MyCustomPageLayoutStyle.css" type="text/css" rel="stylesheet" ms-design-css-conversion="no" /> 

<!--ME:</asp:ContentPlaceHolder>-->