Wednesday, November 27, 2013

Adding media="print" in CSS References in SharePoint 2013 Master Pages

In SharePoint 2013 with Design Manager, we can convert an .html file into a SharePoint 2013 master page. After the conversion, the HTML file and the master page are associated, so that when we edit and save the HTML file, the changes are synced to the associated master page.

Advantage of this approach is that we can focus on designing our site in HTML, CSS, and JavaScript, without having to know much about ASP.NET or the SharePoint specific markup. By using Design Manager to convert an HTML file into a SharePoint master page, it will add required elements, such as controls and content placeholders that are specific to SharePoint, which must be present on the page for SharePoint to correctly render that master page.

Even though it sounds easy, there will be some issues coming in the process. One of such issues I got is adding media="print" property to the CSS references.

In the HTML version of the master page we usually add CSS references as:

<link rel="stylesheet" href="styles/Pages.css" type="text/css" />
<link rel="stylesheet" href="styles/PageLayouts.css" type="text/css" />
<link rel="stylesheet" href="styles/Theme_1.css" type="text/css" id="CssRegistrationTheme" />
<link rel="stylesheet" href="styles/Print.css" type="text/css" media="print" />

In here I have added an id in the third link and media="print" property in the fourth link.

But in the conversion, CSS references will be generated as below in the .master version of the master page.

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/Pages.css %&gt;" runat="server" after="SharepointCssFile"/>
<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/PageLayouts.css %&gt;" runat="server" after="SharepointCssFile"/>
<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/Theme_1.css %&gt;" runat="server" after="SharepointCssFile"/>
<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/Print.css %&gt;" runat="server" after="SharepointCssFile"/>

We can see that <link> tag is now converted to CssRegistration control. Also, all 4 links are generated in the same way and ID or the media property I added are not there anymore.

How to fix:
We can add the ms-design-css-conversion="no" property in CSS link references in which we don’t need Design Manager to do alterations.

So in my case, CSS references in .html file need to be:

<link rel="stylesheet" href="styles/Pages.css" type="text/css" />
<link rel="stylesheet" href="styles/PageLayouts.css" type="text/css" />
<link rel="stylesheet" href="styles/Theme_1.css" type="text/css" id="CssRegistrationTheme" ms-design-css-conversion="no" />
<link rel="stylesheet" href="styles/Print.css" type="text/css" media="print" ms-design-css-conversion="no" />

Then the generated CSS references in the .master page will be:

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/Pages.css %&gt;" runat="server" after="SharepointCssFile" />
<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/PRASAD/styles/PageLayouts.css %&gt;" runat="server" after="SharepointCssFile" />
<link rel="stylesheet" href="/_catalogs/masterpage/PRASAD/styles/Theme_1.css" type="text/css" id="CssRegistrationTheme" />
<link rel="stylesheet" href="/_catalogs/masterpage/PRASAD/styles/Print.css" type="text/css" media="print" />

Now the 3rd and 4th references are remain as <link> tags and only the href property value has been changed. The ID and media properties are there as well.

2 comments:

Anonymous said...

Thank you so so much for this.

truongmuunghenhan said...

Thanks for sharing, nice post! Post really provice useful information!

Giaonhan247 chuyên dịch vụ vận chuyển hàng đi mỹ cũng như dịch vụ ship hàng mỹ từ dịch vụ nhận mua hộ hàng mỹ từ trang ebay vn cùng với dịch vụ mua hàng amazon về VN uy tín, giá rẻ.