Highlight current page in Movable Type using CSS 
2
I wanted to be able to tell a user which page they were reading (just incase the title didn’t give it away … ) and, of course, I wanted to do it using CSS.
A previous incarnation of this site - long before I switched to Movable Type - had this but required something like id="books" in the <body> element along with a list of links looking like:
<ul>
<li id="books"><a href="/books/">Books</a></li>
<li id="films"><a href="/films/">Films</a></li>
<li id="games"><a href="/games/">Games</a></li>
</ul>
And some CSS like:
body#books li#books,
body#films li#films,
body#games li#games { font-weight:bold; }
This worked but I had to alter the link list and CSS each time I added a new category.
So, how can it be done easier using Movable Type? Well, we still have the list of links, as above, but we use Movable Type template tags to produce it:
<ul>
<MTCategories>
<li id="<$MTCategoryLabel dirify="1"$>"><a href="<$MTArchiveLink$>"><$MTCategoryLabel$></a></li>
</MTCategories>
</ul>
And in the <head> we add something like:
<style type="text/css">
li#<$MTArchiveTitle dirify="1"$> { font-weight:bold; }
</style>
I’ve used <$MTArchiveTitle dirify="1"$> as the id for each list item so the category title is converted to lowercase and has any illegal characters removed.
This method adds the list of links as before:
<ul>
<li id="books"><a href="/books/">Books</a></li>
<li id="films"><a href="/films/">Films</a></li>
<li id="games"><a href="/games/">Games</a></li>
</ul>
While at the same time adding the CSS to the <head> so that only the link in the list that corresponds to the current page is styled, for example the ‘Games’ page:
<style type="text/css">
li#games { font-weight:bold; }
</style>
Unfortunately, this only works for category and month archives or whichever of those you wish to include as a link on your page.
If you wanna stop guestbook spammers just confirm url of this page to [address removed] with subject:ANTISPAM. Thx. - Nilson
anti spam police…?? at gmail..??
yeah right! - tugger
Comments