Alternate classes for the body tag with different page layouts in sharepoint 2010


One challenge we’ve had lately is trying to brand the header and navigation in different pages using different body tag classes. Obviously you could go and create new master pages for this but it really isn’t the best idea or best practice. You could add inline styles to the page layout or link to alternate css. We wanted an easier and cleaner way to do this, Then I stumbled on this idea.

You basically add a Placeholder like <asp:<ContentPlaceHolder ID=’PlaceHolderAdditionalBodyClass’ runat=’server’ /> within your body tag<body  <asp:ContentPlaceHolder ID=’PlaceHolderAdditionalBodyClass1′ runat=’server’ />> ) and declare it in your page layout like this <asp:Content ContentPlaceholderID=”PlaceHolderAdditionalBodyClass” runat=”server”>class=”Customclass”</asp:Content> then when you look at the mark up you’ll have your custom class in it when it uses the page.

If you’re using conditional comments you’ll need to slightly modify the code to work with both id and class.

<!–[if lt IE 7 ]> <body id=”ie6″ <asp:ContentPlaceHolder ID=’PlaceHolderAdditionalBodyClass1′ runat=’server’ />> <![endif]–>
<!–[if IE 7 ]>    <body id=”ie7″ <asp:ContentPlaceHolder ID=’PlaceHolderAdditionalBodyClass2′ runat=’server’ />> <![endif]–>
<!–[if IE 8 ]>    <body id=”ie8″ <asp:ContentPlaceHolder ID=’PlaceHolderAdditionalBodyClass3′ runat=’server’ />> <![endif]–>
<!–[if IE 9 ]>    <body id=”ie9″  <asp:ContentPlaceHolder ID=’PlaceHolderAdditionalBodyClass4′ runat=’server’ />> <![endif]–>
<!–[if !IE]><!–> <body> <!–<![endif]–>

Notice at the end of each ContentPlaceHolder ID there is a number added this has to be done as you’ll get the duplicated content place holder error when viewing in the browser.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s