14.5 Beez CSS 
Das gesamte Layout von Beez wird über CSS gesteuert. Dabei werden die folgenden Dateien eingebunden:
| Name | Funktion |
|
general.css |
Hier werden Elemente definiert, die überall auftauchen können, beispielsweise Buttons und Tooltips. |
|
layout.css |
Definiert das Aussehen innerhalb der verschiedenen Positionen und Bereiche. Hier werden Schriftgrößen, Farben und Hintergründe festgelegt. |
|
position.css |
Legt, wie der Name schon sagt, die Position der einzelnen <div>-Bereiche auf dem Bildschirm fest. |
|
ieonly.css |
Spezifische Anpassungen für Internet Explorer bis Version 6. |
|
ie7only.css |
Spezifische Anpassungen für Internet Explorer 7. |
|
print.css |
Wird beim Druck der Seite zugrunde gelegt. |
|
template.css |
Bezieht sich auf zusätzliche Fenster, beispielsweise beim Versenden einer Seite als E–Mail. |
|
template_rtl.css |
Wird das Template in einer Sprache ausgegeben, deren Schriftrichtung von rechts nach links verläuft, ist diese CSS-Datei maßgeblich. |
Um Beez an die eigenen Bedürfnisse anzupassen, wird in erster Linie die Datei layout.css von Interesse sein. Hier wird auf eine sehr ausgefeilte Art mit Klassen, IDs und Tag-Definitionen umgegangen. So wird der Mouseover-Effekt im Menü zweiter Ebene beispielsweise nicht über eine eigene CSS-Klasse erzeugt, sondern mit folgender Hierarchie angesprochen:
#left ul li ul li a:hover {
background:#93246F;
}Listing 14.2 Auszug aus »layout.css«
Also: Im Bereich (div) mit der ID left sollen alle Links (a), die in einer doppelt verschachtelten Liste stehen (ul li ul li), mit einer Hintergrundfarbe versehen werden, wenn die Maus darüber liegt (hover). Das CSS hier komplett zu besprechen würde ein eigenes Buch füllen. Um Änderungen nach Ihren Wünschen vorzunehmen, haben wir aber noch ein paar kleine Tipps:
- Bearbeiten Sie das CSS in einem Editor und nicht über das Joomla!-Backend. Damit haben Sie einfache Suchen/Ersetzen-Funktionen verfügbar. Die CSS-Dateien liegen im Verzeichnis templates/beez/css.
- Nutzen Sie die Suchen/Ersetzen-Funktion, wenn Sie Farben durchgehend ändern wollen.
- Für eine Analyse des CSS sei Ihnen wärmstens die Firebug-Erweiterung für den Firefox-Browser ans Herz gelegt. Mit der Inspect-Funktion können Sie einfach das CSS und die zugehörige Datei ausfindig machen, die zu einem HTML-Element gehört, indem Sie mit der Maus darauf zeigen.
