Nachdem wir nun die ersten Module in unsere index.php eingesetzt haben, möchten wir mehr über die Möglichkeiten der Module erfahren.

Wir haben gelernt wie wir Module einsetzen. Doch darüber hinaus gibt es weitere Möglichkeiten Module in das Joomla Template, oder genauer gesagt in die index.php einzusetzen. Mit so genannten Module chromes haben Designer seit Joomla 1.5 die Möglichkeit mehr Kontrolle über die Ausgabe des Codes zu haben. Joomla Module können so genauer definiert und entsprechend mit Hilfe von CSS aufgewertet werden.

Module chromes zum Einsatz bringen

Standardmässig unterstützt Joomla hier sechs verschiedene Module chromes.

style="none" Wenn man möchte ist dies die schmalste Ausgabe. Sie wird auch genutzt wenn man gar keine Styleangaben macht.

<jdoc:include type="modules" name="meine-topposition" style="none" />

<ul class="nav menu">
    <li><!--Inhalt--></li>
</ul>

style=”xhtml” Auch eine schlanke Lösung. Mit unterschied der Ausgabe des Titels und einen umrahmten div.

<jdoc:include type="modules" name="meine-topposition" style="xhtml" />

<div class="moduletable_menu">
    <h3>Menu</h3>
    <ul class="nav menu">
        <li><!--Inhalt--></li>
    </ul>
</div>

style=”rounded” Ähnlich wie in der xhtml Lösung, jedoch mit drei weiteren div-Elementen. Die Idee war mit entsprechender CSS Runde Ecken zu Designen. In der Zeit von CSS3 ist dies eigentlich nicht mehr nötig.

<jdoc:include type="modules" name="meine-topposition" style="rounded" />

<div class="module_menu">
    <div>
        <div>
            <div>
                <h3>Menu</h3>
                <ul class="nav menu">
                    <li><!--Inhalt--></li>
                </ul>
            </div>
        </div>
    </div>
</div>

style=”table” Das Modul wird innerhalb einer Tabelle ausgeben.

<jdoc:include type="modules" name="meine-topposition" style="table" />

<table cellspacing="0" cellpadding="0" class="moduletable_menu">
    <tbody>
        <tr>
            <th>Menu</th>
	</tr>
        <tr>
            <td>
                <ul class="nav menu">
                    <li><!--Inhalt--></li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

style=”horz” Das Modul wird innerhalb zweier Tabellen ausgeben.

<jdoc:include type="modules" name="meine-topposition" style="horz" />

<table width="100%" cellspacing="1" cellpadding="0">
    <tbody>
        <tr>
            <td>
                <table cellspacing="0" cellpadding="0" class="moduletable_menu">
                    <tbody>
                        <tr>
                        	<th>Menu</th>
                        </tr>
                        <tr>
                            <td>
                                <ul class="nav menu">
                                	<li><!--Inhalt--></li>
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

style=”outline” Dies ist sozusagen der Debugmodus für die Module. Im Frontend erscheint das Modul mit einem Rahmen und wird namentlich dargestellt. Kann für die Entwicklung gerade bei vielen Modulen sehr hilfreich sein.

<jdoc:include type="modules" name="meine-topposition" style="outline" />

<div class="mod-preview">
    <div class="mod-preview-info">Position: meine-topposition [ Style: outline]</div>
        <div class="mod-preview-wrapper">
            <ul class="nav menu">
                <li><!--Inhalt--></li>
            </ul>
        </div>
</div>

Wie man gut erkennen kann, lassen sich die Module schon sehr speziell implementieren. Ob alle Module chromes für deine Website nützlich sind, lässt sich nicht sagen. In den meisten Fällen reicht die Styleangabe "none" oder "xhtml" absolut aus.

Tipp: Versuche deine Website so schlank wie möglich zu halten. Nicht nur der Übersichtshalber, sondern auch der Pagespeed wird es dir danken!