Auf dem letzten Treffen im November 2013 regte Kai an, ob ich nicht Lust hätte, für die JUG Fulda Website ein neues Joomla! 3 template zu gestalten. Gerne griff ich die Idee auf und schlug vor, eine Version auf der Basis des jflex templates zu erstellen, mit dem ich kürzlich meinen eigenen Webauftritt ausstattete. Mit diesem template hatte ich meine Ideen und Vorstellungen zur Typografie im responsive web design umgesetzt, über die ich auf dem Treffen berichtete. Nun ein kleiner Blick unter die Motorhaube von jflex:


An die url wird einfach ?tp=1 bzw. index.php?tp=1 angehängt und schon werden die Ausgabe-Postionen der Module im Template sichtbar.

Beispiel: http://www.jugfulda.de/?tp=1

Joomla! Template Positionen anzeigen

Abhängig vom Tempalte lassen sich die Modulpositionen mehr oder weniger gut lesen. An der Position "user3" sitzt die Top-Navigation bzw. das "Menü oben". An der Position "top" werden die News ausgegeben. An der Position "breadcrumb" wird die "Brotkrumennavigation" ausgegeben, usw. usw.


Unter Joomla! 1.0 und 1.5 war es bereits Möglich jedem Menüpunkt ein Template zuzuordnen. Unter der Version 1.6 ist das natürlich weiterhin machbar. Neu hinzugekommen sind in diesem Zusammenhang die Styles.

Der Beitrag zeigt, was ein Style ist und wie man einem Menüpunkt einen Style zuweisen kann.  Informationen zum Erstellen von Templates findet Ihr im Web.

Manche Templates kommen mit verschiedenen Farbvarianten, die man in den Parametern umstellen kann. Die Parameter stellt man in der 1.6 nicht mehr im Template selbst um, sondern nutzt ein Style. Zu einem Template kann man dutzende Styles erstellen.

Joomla! 1.6 Template ManagerIn der Abbildung seht ihr, dass das "beez_20" Template einmal als im Style "Beez2 - Parks Site" und dann noch im Style "Beez2 - Default" genutzt wurde.


Wer die Positionen eines Templates unter Joomla! herausfinden will, setzt hinter die Adresse einfach ein "?tp=1" (http://www.domain.de/index.php?tp=1 bzw. http://www.domain.de/?tp=1). Gerade wenn man ein neues Template übernimmt ist es wichtig zu wissen, welches Modul man wo Platzieren sollte.

Templates - Vorschau auf die Modulpositionen

In Produktivumgebungen ist dieses Verhalten unter Joomla! 1.5 mit Hilfe der .htaccess ausgeschaltet worden. Dies ist unter Joomla! 1.6 gleich in die Systemeinstellungen übernommen worden. Wechselt über Extensions zum Template Manager.


Die Seite ist fertig, das Template ist, ok. Doch das ein oder andere hättet ihr gern noch ein wenig größer, kleiner, bunter oder auch einfach anders. Nichts leichter als das. Ab in die CSS-Dateien und die Einstellungen suchen, anpassen, das war es. Doch wo findet man die richtige CSS-Eigenschaft?

Ich nutze als erstes mal den Internt Explorer 9. Nach laden der Seite drücke ich die Taste F12 um die Entwicklertools einzublenden. Dann wähle ich mit dem weißen Pfeil aus dem HTML-Register die Schaltfläche (hier die "Senden" Schaltfläche" und schaue mir an, welche Größe dahinter steht.

css finden 01

Offensichtlich wird die Höhe von 15px aus der templates.css geholt. Ich änderer die Höhe mal auf 25px und schon ist die Senden Schaltfläche gut sichtbar. Wo ist aber die template.css? Hierzu klicke ich auf den Link "template.css" (in der Abbildung oben mit dem blau-gestrichelten Pfeil gekennzeichnet). Der IE öffnet die Datei und ...

css finden 02

... zeigt den Pfad zur Datei an (hier im Beispiel .../templates/as002022/css/tempalte.css).

Bitte beachtet, dass ich den Beitrag hier nur schnell als Erläuterung auf eine Frage aus den Kommentaren geschrieben habe. Ich versuche natürlich das hier mal ein wenig "schöner" zu beschreiben.

ENDE