Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
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 Jan 26 '13 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 Jan 27 '13 at 13:47
    
copy the content of your css registration / page layout in your question, we'll better help you –  Francois Verbeeck Jan 27 '13 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 Jan 28 '13 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 Jan 28 '13 at 14:31
show 1 more comment

4 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
    
Hi, the problem is that my css link reference is does not appear when I check the source code with F12. –  user14444 Jan 27 '13 at 13:49
add comment

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" />
share|improve this answer
add comment

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

share|improve this answer
    
The answer by DrFeelGood is the most practical. Upload the css through the UI and its effects are local to the site. –  user21084 Nov 27 '13 at 19:57
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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