Video

Joomla 1.5 / 1.6 / 1.7: andere kleur voor de link behorende bij de actieve pagina

Wanneer men kijkt naar de layout van de navigatie links zijn er heel wat mogelijkheden, o.a.

kleur
lettertype
bullets
link als afbeelding

Hier kijken wij naar een andere kleur voor de link behorende bij de zichtbare (actieve) pagina. Bekend in CSS zijn de mogelijkheden voor de link a, nl.

a:link
a:visited
a:hover
a:active

Men kan van een bestaande Joomla 1.5 pagina de bron code oproepen om de menu structuur te zien:

<div class="moduletable_menu">
<ul class="menu_link">
<li class="item1"><a href="http://www.mictra.com/"><span>Home</span></a></li>
<li class="item6"><a href="/links.html"><span>Links</span></a></li>
<li id="current" class="active item7"><a href="/blog.html"><span>Blog</span></a></li>
<li class="item8"><a href="/video.html"><span>Video</span></a></li>
</ul>
</div>

Voor Joomla 1.6 / 1.7 ziet de bron code van een menu er als volgt uit:

<div class="moduletable_menu">
<ul class="menu_link">
<li class="item-101"><a href="/" >Home</a></li>
<li class="item-106 current active"><a href="/blog.html" >Blog</a></li>
<li class="item-107"><a href="/video.html" >Video</a></li>
</ul>
</div>

In deze site zien we dat de layout van de lijst (ul) wordt aangestuurd door de CSS code (classes) moduletable_menu en menu_link, maar ook de id (current) en class (active item7) voor de zichtbare (actieve) pagina is te zien. In Joomla 1.6 / 1.7 zien we voor het actieve item (106) de class current active.

Nu we dit weten kan de CSS code voor het template.css in Joomla worden aangepast. Bijvoorbeeld (Joomla 1.5):

.moduletable_menu .menu_link li#current a { color: #009900; }

Hier staat dat we aan de link a een kleur toekennen voor het li (list) item current binnen de classes (_menu en _link) van dit menu in Joomla.

En voor Joomla 1.6 / 1.7:

.moduletable_menu .menu_link li.active a { color: white; }

Hier staat dat we aan de link a een kleur toekennen voor het li (list) item active binnen de classes (_menu en _link) van het menu.

Tenslotte (dit kan natuurlijk ook voordat men de css code in het template aanpast) moeten we aan Joomla vertellen dat het gebruikte menu aangepaste CSS code gebruikt.

Klik op Extensies
Dan naar Modulebeheer
Klik op het menu (Hoofdmenu)
Dan naar Geavanceerde parameters
Bij Module Class achtervoegsel, _menu
En bij Menu class achtervoegsel, _link
Opslaan