0

I need to include multiple css files in one HTML Page Layout - a webfont, bootstrap, and my own custom styles. The only thing that loads is my custom styles -- I can tell from checking the sources in Chrome Dev Tools. The url pathways are correct. Additionally, I have the corresponding script files loaded underneath it [jquery, popper, and bootstrap] in simple <script> tags. All three of those files load fine.

I have placed my css links after 'AdditionalPageHead' in the html page layout. Has anyone else ever encountered this? I do not understand why it loads my custom styles, and bypasses everything else. I'm using 2013 OnPrem.

My css-links look like this:

<link href="\path\bootstrap.min.css" type="text/css" rel="stylesheet" />

<link href="\path\fontawesome.min.css" type="text/css" rel="stylesheet" />

<link href="\path\style.css" type="text/css" rel="stylesheet" />

1

Try below solutions:

Solution 1:

If your page layout is an HTML file, try this:

<!--SPM:<SharePoint:CssRegistration name="&#60;% $SPUrl:~sitecollection/Style Library/Test/Custom.css %&#62;" runat="server" after="corev15.css"/>-->

If it'is an .aspx file, try this:

<SharePoint:CssRegistration name="&#60;% $SPUrl:~sitecollection/Style Library/Test/Custom.css %&#62;" runat="server" after="corev15.css"/>

Solution 2:

First, you need to find the following lines of code in the head of the Page Layout's HTML page:

<!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
<!--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"%>-->

After those three lines you are free to add <link> tags, with the following caveat: use the ms-design-css-conversion="no" attribute within the <link> tag to "exclude the style sheet from theming".

In the end, you should have a <link> tag that looks as follows:

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

Where to add styles in page layouts

  • Thanks for this, but I researched before posting and was aware of all of those things. Placing ms-design-conversion gives me an error message that says my css file cannot be read. – user2004758 Dec 31 '18 at 2:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.