Add element ID to body tag based on page name

ZLA · Post by **ZLA** » Thu May 14, 2009 2:49 pm

I can't use a global mainPanel css style because I need to override it on the home page alone. See this post: viewtopic.php?f=44&t=10899.

This would be trivial to do if each page had a unique <body> id that could be used as an id selector in the stylesheet. For example, it default.aspx rendered as

Code: Select all

<body id="acBody_Default onload="initAjaxProgress();">

then you could easily add the following to your stylesheet:

Code: Select all

#mainPanel {background-color: blue;} /* default background color */
#acBody_Default #mainPanel {background-color: red;} /* for home page only */
#acBody_ContactUs #mainPanel {background-color: yellow;} /* for another special page */

I think this could be very useful.

Post by **mazhar** » Tue May 19, 2009 5:39 am

You can put following javascript into your header scriptlet and it will adjust the body id depending upon page name.

Code: Select all

<script type="text/javascript">
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
sPage = sPage.replace(".","-");
document.body.id = sPage;
</script>

For example if you visited Default.aspx then body id will be Default-aspx

ZLA · Post by **ZLA** » Tue May 19, 2009 7:14 am

Thanks Mazhar. At this point, I've figured out how to use the layouts better for what I want to do. But if I did change the body id, I'd probably just modify the master pages to do this using the same logic as your javascript.

gdelorey@mitcs.com · Post by **gdelorey@mitcs.com** » Thu Jul 02, 2009 4:07 pm

Hi Mazhar -

I've tried entering this into my standard header scriplet, as well as the ThreeColumn.master page however the body id never seems to update. Do you happen to know what I'm doing wrong?

Thanks,

: Greg

AbleCommerce Shopping Cart Software

Add element ID to body tag based on page name

How important is this enhancement to you?

Add element ID to body tag based on page name

Re: Add element ID to body tag based on page name

Re: Add element ID to body tag based on page name

Re: Add element ID to body tag based on page name