When working with SharePoint, there may always be an
occasion where you want to apply some specific styles to appear only when a
page uses a specific Page Layout. For example, your Master Page may contain a
Left Navigation that is needed throughout the site, but you may want to hide it
just on your Landing Page Layout.
There are basically 3 ways in which this can be achieved:
1.
Custom
Style sheet:
In your custom Page Layout, search
for id=”PlaceHolderAdditionalPageHead“. You’ll find it in an opening tag
that looks like this:
<!–MS:<asp:ContentPlaceHolder
id=”PlaceHolderAdditionalPageHead” runat=”server”>–>
|
Underneath this tag, you may
insert the usual reference to your custom style sheet using the <link>
tag, with the addition of the attribute ms-design-css-conversion=”no”.
Example:
<!--MS:<asp:ContentPlaceHolder
id="PlaceHolderAdditionalPageHead"
runat="server">-->
<link
href="indigo_layout.css" rel="stylesheet"
type="text/css" ms-design-css-conversion="no" />
|
Important: Remember to
place the link reference right underneath the start
of PlaceHolderAdditionalPageHead, as to add the
attribute ms-design-css-conversion=”no”. Without them, this will not work.
2. Using <style> tags
Alternatively you may want to enclose your
custom styles within <style></style> tags and place them
inside the Page Layout itself. In order to make this work, you’ll have to
enclose the <style> tags within <!–MS:–>
<!–ME:–> tags, and once again you have to place these styles
underneath PlaceHolderAdditionalPageHead
Example:
<!--MS:<asp:ContentPlaceHolder
id="PlaceHolderAdditionalPageHead"
runat="server">-->
<!--MS:<style
type="text/css">-->
#wr_leftNav { display: none
!important; }
<!--ME: </style>-->
|
Important: Remember to
include the <!–MS–> <!–ME:–> tags, and place the
style block underneath the start of PlaceHolderAdditionalPageHead.
3.
Inline
Styles
If you have some custom html markup in your
page layout that you want to style, you can simply target the markup tags with
inline styles.
Example:
<div
id="contentBox" style="width: 400px; background:
red;">
|
No comments:
Post a Comment