Bloggerschmidt


Hier schreibt Alexander Schmidt, Webentwickler und CSS Guru



JD15DE_banner_88x31.png

Joomla: Modul-Klassen-Suffix und Menü-Klassen-Suffix

Jeder, der sich näher mit Joomla! befasst, stolpert irgendwann über die zwei Suffixe Modul-Klassen-Suffix und Menü-Klassen-Suffix. Doch was ist überhaupt ein Suffix und wie kann ich die beiden anwenden? Ein kurzer Einblick in die Tiefen der Template-Gestaltung in Joomla!.

Modul-Klassen-Suffix

Der Modul-Klassen-Suffix wird an die CSS-Klasse des Moduls angehängt.

begriffserklaerung.png

Heißt die Modulklasse z. B. .module und der Modul-Klassen-Suffix _menu, kann im Cascading Stylesheet mit der Klasse .module_menu das Modul gestaltet werden.

Menü-Klassen-Suffix

Der Menü-Klassen-Suffix wird an die CSS-Klasse des Menüs angehängt.

begriffserklaerung2.png

Heißt die Menüklasse z. B. .menu und der Modul-Klassen-Suffix _main, kann im Cascading Stylesheet mit der Klasse .menu_main das Modul gestaltet werden.

Suffixe vergeben

Die Suffixe werden in den Modulen vergeben. Öffnet man im Joomla-Backend unter Erweiterungen > Module ein Modul, kann man unter Erweiterte Parameter den Modul-Klassen-Suffix vergeben. Gehört das Modul zu einem Menü, ist zusätzlich ein Menü-Klassen-Suffix vergebbar.

erweiterte parameter.png

Beispiel Hauptmenü

Als Beispiel öffnen wir das Hauptmenü unter Erweiterungen > Module und vergeben den Menü-Klassen-Suffix _main und den Modul-Klassen-Suffix _menu. Speichern wir das Modul ab, sieht unser Quelltext im Frontend z. B. so aus:

quelltext.png

Die Suffixe sind rot dargestellt. Im Cascading Stylesheet haben wir jetzt die Möglichkeit anhand der neuen Klassen .module_menu und .menu_main das Hauptmenü zu gestalten.

div.module_menu {
	background: blue;
	...
}
ul.menu_main {
	list-style: none;
	...
}

Zusätzliche Klassen

Die Eingabefelder für die Suffixe eignen sich auch um zusätzliche Klassen zu definieren. Schreibt man einen Suffix mit einem führenden Leerzeichen, wird es als zusätzliche Klasse betrachtet. So kann man z. B. die zwei Klassen module menu erzeugen anstatt nur eine module_menu. CSS-Definitionen für .module bleiben damit erhalten und weitere können mit der neuen Klasse hinzugefügt werden.

Mit dieser Methode kann man beliebig viele Klassen definieren. Wichtig ist dabei das Leerzeichen zwischen den Klassen.

Fazit

Durch die Suffixe kann der Webdesigner eigene CSS-Klassen definieren und ist damit freier in seiner Gestaltung. Gerade wenn mehrere Module und/oder Menüs zum Einsatz kommen, sind Modul-Klassen-Suffix und Menü-Klassen-Suffix ein gutes Werkzeug schnell eigene Styles zu definieren.