Movable Type Community Forum > How To Style The "current" Category In A Navigation List?

Full Version: How To Style The "current" Category In A Navigation List?

Movable Type Community Forum > Using Movable Type > Categories and Entry Tags

merrek

Sep 12 2008, 11:29 AM

I have a simple category navigation list for an artist portfolio site:

CODE

<MTTopLevelCategories>
<ul><li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a></li></ul>
</MTTopLevelCategories>

You can see the website here.

There are three different categories: Abstract, Figurative, and Landscape.
Is there a way to style the "current" category in the navigation list with different css?
So, for example, when the user clicks "Abstract" in the navigation (and goes to the Abstract category page), i want "Abstract" to become highlighted in the navigation list...
so the user knows which portfolio they are looking at.

Do i need to set a variable and pass it to the categories tag?

Thanks in advance.

Su-

Sep 12 2008, 11:48 AM

This may not be perfect(working from memory), but you should get the idea:

CODE

<MTTopLevelCategories>
<$mt:CategoryLabel setvar="currentcategory"$>
<ul>
<li<mt:if tag="ArchiveCategory" eq="$currentcategory">class="active"</mt:if>><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a></li>
</ul>
</MTTopLevelCategories>

Then add an extra rule to your CSS making .active bold or whatever.

merrek

Sep 12 2008, 01:25 PM

Thanks for the quick reply.
I tried this:

CODE

<MTTopLevelCategories>
<$mt:CategoryLabel setvar="currentcategory"$>
<ul>
<li <mt:if tag="CategoryLabel"eq="$currentcategory">class="active_category"</mt:if>><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a></li>
</ul>
</MTTopLevelCategories>

... instead of targeting just the current category, however, MT wraps each category with the "active_category" class.

CODE

.active_category { border: solid 1px #CCC; }

Sorry for needing some hand holding... but any more insight would be great.
Thanks.

merrek

Sep 15 2008, 08:20 AM

CODE

... instead of targeting just the current category, however, MT wraps each category with the "active_category" class.

CODE

.active_category { border: solid 1px #CCC; }

I worked on this more over the weekend, tried different iterations, etc... but could not get it to work.
In all cases, the CSS targets all of the categories (instead of the active category).

Frustrating.

I know there's a way to do this... the solution will need more research and testing

Good news is that I like MT and enjoy learning about it.
But in the meantime, as a practical work around, I'll manually insert the navigation lists for each category (custom index pages).

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.