Sign In
Register
Help
File Submitter: d3signr
File Submitted: 11 Feb 2009
File Category: Miscellaneous
Sometimes i use the <body> tag for CSS styling purposes when creating list menus and want to dynamically apply certain style rules to list elements. Assigning a class id to the body tag opens up some powerful solutions when dealing with static pages that need the navigation to reflect the current location. This helps in that regard. It is also useful when using dynamic content to utilise a similar mechanism.
Download or Copy the code below and create a new snippet, give it the title of PageTitle and a useful description.
// Get Current Page Title
// Useful for when needing to set a body id for CSS styling purposes.
//
// Usage: <body class="[[PageTitle]]">
$pagetitle = $etomite->documentObject['pagetitle'];
$pagetitle = trim(strtolower(str_replace (" ", "", $pagetitle)));
return $pagetitle;
In your site template edit the body tag to include:
<body class="[[PageTitle]]">
The snippet trims the pagetitle, converts the string to lowercase and strips any spaces within it.
As an example of how this can be utilised can be described in situations when you have let's say, a top navigation structure using a tab based menu, horizontally aligned. And you also have a vertical sidebar menu using unordered lists.
Through CSS we can ensure that when a user clicks on any particular tab that the vertical menu will also update and highlight accordingly to reflect location. It can also be used to ensure that the top tabs remain in context to items selected in the vertical menu, especially when directly related or when you have several pages under a single heading such as Services.
To clairfy my otherwise confusing description here is some CSS that does precisely this. I set up a simple menu and assigned the pagetitle class names so that style rules can be applied on a page title basis.
(page titles in the example have been truncated deliberately for easy reading. Obviously they would hold more meaning in a live environment).
/* Menu */
#menu {
width: 930px;
height: 45px;
margin: 0 auto;
padding: 10px;
background: #333;
}
#menu ul {
margin: 0;
padding: 5px 0 0 15px;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
height: 35px;
width: 85px;
padding: 10px 5px 0 5px;
margin: 0 5px 0 0;
}
#menu ul li a:hover {
height: 35px;
padding: 10px 5px 0 5px;
}
.home #menu ul li a,
.services #menu ul li a,
.portfolio #menu ul li a,
.aboutus #menu ul li a,
.contact #menu ul li a,
.gdesign #menu ul li a,
.wdesign #menu ul li a,
.ibrands #menu ul li a,
.printsv #menu ul li a,
.photogr #menu ul li a,
.buscorp #menu ul li a,
.enterta #menu ul li a,
.cuslogo #menu ul li a,
.idbrand #menu ul li a,
.webshow #menu ul li a {
text-decoration: none;
font-weight: bold;
color: #fff;
background: #666;
text-align: center;
}
#menu ul li a:active,
.home #menu #home a,
.services #menu #services a,
.portfolio #menu #portfolio a,
.aboutus #menu #aboutus a,
.contact #menu #contact a,
.gdesign #menu #gdesign a,
.wdesign #menu #wdesign a,
.ibrands #menu #ibrands a,
.printsv #menu #printsv a,
.photogr #menu #photogr a
.buscorp #menu #buscorp a,
.enterta #menu #enterta a,
.cuslogo #menu #cuslogo a,
.idbrand #menu #idbrand a,
.webshow #menu #webshow a {
background: #fff;
color: #c40d52;
}
#menu ul li a:hover,
.home #menu ul li a:hover,
.services #menu ul li a:hover,
.portfolio #menu ul li a:hover,
.aboutus #menu ul li a:hover,
.contact #menu ul li a:hover,
.gdesign #menu ul li a:hover,
.wdesign #menu ul li a:hover,
.ibrands #menu ul li a:hover,
.printsv #menu ul li a:hover,
.photogr #menu ul li a:hover,
.buscorp #menu ul li a:hover,
.enterta #menu ul li a:hover,
.cuslogo #menu ul li a:hover,
.idbrand #menu ul li a:hover,
.webshow #menu ul li a:hover {
text-decoration: underline;
color: #c40d52;
background: #fff;
}
As you can see each page title has a class attribute. For this to work you have to name the <li> for each menu item so it can have style rules applied.
So for the top tabs we have:
<div id="menu">
<ul>
<li id="home"><a href="index.php">Homepage</a></li>
<li id="services"><a href="services.php">Services</a></li>
<li id="portfolio"><a href="portfolio.php">Portfolio</a></li>
<li id="aboutus"><a href="aboutus.php">About Us</a></li>
<li id="contact"><a href="contact.php">Contact Us</a></li>
</ul>
</div>
And for the sidebar menu list we have something like this:
<div id="sidebar">
<ul>
<li>
<h2>Quick Menu</h2>
<ul>
<li id="home"><a href="index.php">Homepage</a></li>
<li id="services"><a href="services.php">Services</a></li>
<li id="portfolio"><a href="portfolio.php">Portfolio</a></li>
<li id="aboutus"><a href="aboutus.php">About Us</a></li>
<li id="contact"><a href="contact.php">Contact us</a></li>
</ul>
</li>
<li>
<h2>Services Outline</h2>
<ul>
<li id="gdesign"><a href="graphicdesign.php">Graphic Design</a></li>
<li id="wdesign"><a href="webdesign.php">Website Design</a></li>
<li id="ibrands"><a href="identitybranding.php">Identity Branding</a></li>
<li id="printsv"><a href="printservices.php">Print Services</a></li>
<li id="photogr"><a href="photography.php">Photography</a></li>
</ul>
</li>
<li>
<h2>Portfolio of Work</h2>
<ul>
<li id="buscorp"><a href="businesscorp.php">Business & Corporate</a></li>
<li id="enterta"><a href="enterleisure.php">Entertainment & Leisure</a></li>
<li id="cuslogo"><a href="customlogods.php">Custom Logo Design</a></li>
<li id="idbrand"><a href="identitybrand.php">Identity Branding</a></li>
<li id="webshow"><a href="webshowcase.php">Website Showcase</a></li>
</ul>
</li>
</ul>
</div>
The sidebar menu list would also have it's own style sheet to reflect the same behaviour as the tabs.
To keep it brief I'lll only include one rule set so you can see how it would work:
#sidebar li li a {
display: block;
text-decoration: none;
}
#sidebar ul li a, #sidebar span.LSM_currentPage,
.home #sidebar ul li a,
.services #sidebar ul li a,
.portfolio #sidebar ul li a,
.aboutus #sidebar ul li a,
.contact #sidebar ul li a,
.gdesign #sidebar ul li a,
.wdesign #sidebar ul li a,
.ibrands #sidebar ul li a,
.printsv #sidebar ul li a,
.photogr #sidebar ul li a,
.buscorp #sidebar ul li a,
.enterta #sidebar ul li a,
.cuslogo #sidebar ul li a,
.idbrand #sidebar ul li a,
.webshow #sidebar ul li a {
padding: 5px 0 5px 35px;
display: block;
text-decoration: none;
}
You'll notice that in this case it also caters for the ListSiteMap snippet which I am testing it with using it as a menu system. So far it works great and appears to function normally across several browsers with minor tweaks for one or two.
I know this has been a bit long-winded but i thought a visual representation would help clarify the point.
Whilst not the most efficient or necessarily semantically correct CSS, it does work and I'm sure there is a way of producing the css dynamically but have yet to gain the skills necessary to perform such a task.
Anyway, i just thought it might be useful to others as i have found the technique to be.
Click here to download this file
This post has been edited by d3signr: 11 February 2009 - 09:53 PM
MultiQuote