How can I target CSS to a particular sharepoint Page Layout file?

Asked 13/5, 2009 at 16:32 Answered 19/6, 2009 at 0:18

Is it possible to create a .CSS file for each SharePoint Page Layout I develop, or does the CSS for each possible layout in a master page need to be referenced in the master page?

IE is it possible to affect the <head> of the page a page layout is used in?

Nodal answered 13/5, 2009 at 16:32 Comment(0)

Michal's solution can be further enhanced by including any links etc in the PlaceHolderAdditionalPageHead content placeholder tag on your layout page. This way it will be included properly in the head of the generated page.

e.g.

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
   <link id="Link1" href="<% $SPUrl:~SiteCollection/Style Library/mystyle.css%>" runat="server" type="text/css" rel="stylesheet" />
   <SharePoint:ScriptLink id="jQueryCore" language="javascript" name="ui.core.js" runat="server"/>
</asp:Content>

Cento answered 19/6, 2009 at 0:18 Comment(0)

You can embed the CSS that you want to use in a Page Layout by putting in a tag in the page layout. For example:

<style type="text/css">
    .ms-pagetitle, .ms-titlearea
    {
        margin-bottom: 5px;
    }

</style>

Or in the page layout you can also create a relative link to the CSS file that you would like to use as well:

<link rel="stylesheet" type="text/css" href="/_layouts/styles/mystyle.css"/>

In this way you can have different css styles overridden in the page layouts that you use. Hope that helps!

Linnette answered 13/5, 2009 at 18:52 Comment(2)

I did not think that <link /> would work so I never even tried it! – Nodal 14/5, 2009 at 16:25

I would strongly recommend using mrtrombone's solution (using the "PlaceHolderAdditionalPageHead" Content Placeholder) so as to ensure that the CSS is rendered at the top of the page. – Strangulation 23/11, 2009 at 20:0

Recommended topics

Hot tags