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

StackOverflow https://stackoverflow.com/questions/858990

  •  21-08-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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>

OTHER TIPS

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!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top