22

I'm trying to add my custom CSS file in my sharepoint 2013 page layout. I add it with the link tag or with CSSRegistration and when the page is rendered, the css does not appear in the source.

Also I don't know where I have to add my css in my html page layout. I try in the AdditionnalPageHead and other place and that's not work.

In my master page, adding a CSS file works fine.

Thanks for your help.

Improve this question
9
  • make sure that you're using the updated page layout (eg: it's not unghosted / customized), add other content in your page layout to ensure you're using the latest one. You can even include your style definitions in the middle of the content (thus not within head). Dirty and not final but most browsers will consume it straight away.
    – Francois Verbeeck
    Commented Jan 26, 2013 at 20:10
  • Hi, I put other content in my page layout and I see it when the page is rendered. I don't know why my css link don't appear when I see the source code with F12. Something missin but I don't know what.
    – user14444
    Commented Jan 27, 2013 at 13:47
  • copy the content of your css registration / page layout in your question, we'll better help you
    – Francois Verbeeck
    Commented Jan 27, 2013 at 15:59
  • @Francois Verbeek : I try these two methods for including css with no success. Sharepoint 2013 page layout doesn't seem to like custom css file '...</xml><![endif]--> <title>PageAccueil</title> <link rel="stylesheet" type="text/css" href="Styles/Accueil.css"> <SharePoint:CssRegistration Name="Styles/Accueil.css" runat="server"> </SharePoint:CssRegistration> </head>'
    – user14444
    Commented Jan 28, 2013 at 14:09
  • Your css link is wrong. The browser will not be able to find the accueil.css stylesheet. You need to provide a SPSite relative path (eg: /_layouts/YourSolution/_css/accueil.css if you deploy them to 14\Layouts or point to the Style Library if they are deployed at that location. Courage :)
    – Francois Verbeeck
    Commented Jan 28, 2013 at 14:31

6 Answers 6

Reset to default
24

I know exactly what you're looking for. While a debate about proper link tag usage and CSS storage folders is always a fun topic, realize none of that is your issue here.

There are two components that allows you to add <link> tags to Page Layouts.

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". Sounds counter-intuitive, but those are Microsoft's words, not mine.

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" />

More Information

Improve this answer
2
  • The answer by DrFeelGood is the most practical. Upload the css through the UI and its effects are local to the site.
    – user21084
    Commented Nov 27, 2013 at 19:57
  • +1 this is very useful answer....
    – khurram
    Commented Apr 17, 2015 at 11:11
2

I have a lot of success adding CSS to a page by using the Script Editor web part (Found in Media and Content). Place the web part, edit it and copy your CSS link or the CSS itself and save the page. I have been using it to style some in-page controls for Excel Services Web Parts.

Improve this answer
2

If you only wanted to add a couple of style overrides you can also embed your styles directly within the PlaceHolderAdditionalPageHead placeholder using the following syntax.

<!--MS:<style type="text/css" >-->

.mystyle1 {}

<!--ME:</style>-->
Improve this answer
1

Place your CSS file under the master page gallery with the SharePoint designer (_catalogs/masterpage)

On your master page file on the header zone call the CSS like the example bellow 

<SharePoint:CssRegistration name="<%$SPUrl:~sitecollection/_catalogs/masterpage/bindtuning.css%>" runat="server" after="SharepointCssFile" />
Improve this answer
1

Possibly you set incorrect URL to your css file. You can try to see url using debug mode of a browser (usually you can press F12 for that) and then you could try to open this link directly in a browser window to see if it is accesible.

Also you can take a look at a conversation about different places to keep CSS files. Maybe you find it useful.

Improve this answer
1
  • Hi, the problem is that my css link reference is does not appear when I check the source code with F12.
    – user14444
    Commented Jan 27, 2013 at 13:49
0

You can put any inline CSS style and inline javascript code to a Page layout as you can do it for regular HTML page.

For example inline style is

<style>
...
</style>

and inline javascript is

<script>
...
</script>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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