Aanpassen layout Joomla module

Het aanpassen van de layout van een Joomla module lijkt een eenvoudige zaak met Firebug. Maar bij aanpassen van de css file behorende bij de module, is de kans groot dat ook de layout van andere modules aangepast worden terwijl dat mogelijk niet te bedoeling is. Dat is zeker het geval als de css verwijzingen verstopt zitten in bijvoorbeeld een style.css file of template.css file. Als de module een eigen css file heeft, dan is het inderdaad niet moeilijk om de layout aan te passen.

De makkelijkste manier
Het makkelijkste lijkt mij op dit moment om in "advanced options" binnen modulebeheer (binnen Joomla administrator) de "Module Class Suffix" aan te passen.
Dat gaat als volgt:
Ga naar modulebeheer in Joomla en open de module waarvoor de layout aangepast moet worden.
Open de stylesheet waarnaar deze module verwijst (via Filezilla en Notepad+)
Kijk via Firebug welke layout verwijzing aangepast moet worden
Ga terug naar de geopende stylesheet (css file) en zoek via "search" naar de verwijzing
Kopieer de div class en plaats die daar direct onder; Bijvoorbeeld:

#footer .moduletable h3.mod-title {
color: #800040;}

#footer .moduletable h3.mod-title {
color: #800040;}

Nu passen we de tweede verwijzing aan en maken een nieuwe div class. Bijvoorbeeld:

#footer .moduletable h3.mod-title {
color: #800040;}

#footer .moduletable2 h3.mod-title {
color: #FFFFFF;}

We schakelen weer terug naar de geopende module in modulebeheer en plaatsen aan de rechterkant onder "advanced options" in de "Module Class Suffix" de div class: moduletable2 en slaan de module op. Zie afbeelding:


Resultaat is dat de header van de bewuste module een h3 grootte hebben (dat hadden ze al) en dat de kleur is veranderd naar wit. Nu is het makkelijk om voor elke module de header aan te passen in wit.
Tot zover. Wilt u ook de layout van uw Joomla website laten aanpassen? Vraag info@dewebmeester.nl naar mogelijkheden.
Groeten!