i’ve been trying to figure out a decent way to highlight the current section in micro, and it seems that mephisto has a built in method, but it doesn’t work right out of the box. no worries – with a bit of css and built in liquid, we can achieve:

the code

list out your sections in layout.tmpl
{% if site.sections.size > 1 %}
  <div id="sections" class="tabs">
   {% for section in site.sections %} 
       {% unless section.is_home  %}
       <a href="{{section.url}}" title="{{section.name}}" {% if section.current %}class="selected"{% endif %}>{{section.name || downcase}}</a>
       {% endunless %}
   {% endfor %}
  </div>
{% endif %}
then, override the default link style in your stylesheet:
.tabs .selected {
  font-weight:bold;
}

download the tabbed micro theme

bug fixes are in, and it works wonderfully in ie, safari and mozilla. should i test on opera? you decide and post a comment.

svn export http://svn.seaofclouds.com/micro/branches/micro_tabbed@

Sorry, comments are closed for this article.

back to top

micro theme by seaofclouds, and powered with Mephisto