|
Im zweiten Teil des Joomla Template Tutorials haben wir das vom
Grafiker stammende Screendesign analysiert und ein Konstrukt
aufgesetzt, auf dessen Basis alle weiteren Arbeiten rund um das
Template stattfinden können. Am Ende hatten wir ein Webdesign, weches
das Screendesign für das Flows Template in Grundzügen enthielt.
Teil 4 des Joomla! 1.5 Template Tutorials ist fertig!
Zu
Beginn des dritten Teils des Tutorials wollen wir mit etwas Einfachem
einsteigen. Ich nehme mir dafür die Top Navigation vor.
In unserer
index.php haben wir dafür ein DIV mit der ID #navi reserviert. Hier
werden Joomla Module der Position navi reingeladen.
<div id="headwrapper">
<div id="navi"><jdoc:include type="modules" name="navi" /></div>
<div id="header"><jdoc:include type="modules" name="header" /></div>
<div id="search"><jdoc:include type="modules" name="search" /></div>
</div>
Natürlich macht es Sinn, hier nur ein Modul, und zwar das bei Joomla
enthaltene mainmenu Modul, reinzuladen. Das Modul kümmert sich um die
Darstellung von Navigationen. Das haben wir bereits im vorigen Teil des
Tutorials integriert. Aber die Ausgabe des Moduls, also das HTML der
Navigationselemente, ist bis zu diesem Punkt noch völlig ungestyled.
Das standard Joomla mainmenu Modul gibt die Menüstruktur mit ungeordneten Listenelementen wie folgt aus:
<ul class="menu">
<li class="item1">
<a href="http://localhost/meineseite/"><span>Home</span></a>
</li>
<li class="item2">
<a href="http://localhost/meineseite/"><span>Link 1</span></a>
</li>
<li class="item3">
<a href="http://localhost/meineseite/"><span>Link 2</span></a>
</li>
</ul>
Hier ist also alles enthalten, um die Navigation mit passendem CSS entsprechend unserem Screendesign zu stylen.
Wie
so häufig beim Webdesign erkennt man erst später, dass bestimmte,
vorher festgelegte Styles, später überarbeitet werden müssen. Man
könnte auch sagen, ich habe Mist gebaut.
Im letzten Schritt des
zweiten Tutorials habe ich das #headwrapper DIV auf 18px Höhe gestellt und mit
der blauen Hintergrundfarbe hinterlegt, um oben einen blauen Rand zu
erhalten. Das Problem dabei ist, dass das #headwrapper DIV, wie Sie im
Code oben sehen können, alle drei darin enthaltenen Modulpositionen
enthalten soll. Also auch die Positionen navi, header und search. Mit
einem 18px hohen DIV wird das nichts. Den blauen Rand müssen wir anders
hinbekommen.
Eigentlich gar kein Problem. Wir setzen den
#headwrapper auf 300px Höhe und hinterlegen ihn mit einer Farbe, um ihn
besser zu erkennen. Den blauen Rand oben realisieren wir mit der CSS
Eigenschaft border. Um den 1px schmalen Streifen über dem blauen Rand
zu realisieren, verlagern wir die border Eigenschaft einfach auf das
höher liegende DIV, und das ist #middle. Nach diesem Zwischenschritt
sieht der Headerbereich schon besser aus.
Damit haben wir wieder Platz geschaffen, uns mit dem Styling der Navigation zu beschäftigen. Dieses bekommt ein Standard Styling für ungeordnete Listen, welches an unser Screendesign angepasst wird.
#navi ul {
list-style: none;
padding: 0;
margin: 0;
}
#navi li {
float: left;
margin: 0 0;
border-left:1px solid #CCCCCC;
}
#navi li.item1 {
border-left:none;
}
#navi li a {
height: 40px;
line-height: 40px;
float: left;
display: block;
border: none;
color: #0d2474;
text-decoration: none;
text-align: center;
padding:0 25px;
color:#5F6B7C;
}
#navi li a:hover, #navi li a:active {
color:#fff;
background-color:#5FC2ED;
}
#navi {
width:100%;
float:left;
background-color:#fff;
}
Den Rand eines jeden Menüpunktes realisieren wir erstmal mit einer
border Eigenschaft. Später können wir eine passende Grafik hinzufügen.
Damit der Rand, auf der linken Seite jedes Elements (border-left:1px
solid #CCCCCC;) nicht auch beim ersten Element sichtbar ist, können wir
die von Joomla generierten CSS-Klassen nutzen, um diesen beim ersten
Element zu verstecken:
#navi li.item1 {
border-left:none;
}
Damit hätten wir
das grobe Styling für die Navigation geschaffen. Wir werden zwar später
nochmals daran arbeiten müssen, da die Navigation, wie im zweiten Teil
des Tutorials festgestellt, absolut positioniert werden muss. Das
machen wir aber erst wenn es nötig wird.
Flows-Template mit Navigation CSS:
Ansehen: Flows Template Step 4
Download: Flows Template Step 4
Template Parameter
Jetzt legen wir richtig los und wollen unser
Template noch in der Entstehungsphase mit der Möglichkeit ausrüsten,
eine benutzerdefinierte Breite festlegen zu lassen. Momentan hat das
Template eine feste Breite von 950px. Das ist für die meisten Fälle
sicher in Ordnung. Wir haben uns im zweiten Teil des Tutorials
allerdings die Arbeit gemacht, alle grafischen Elemente auf eine
flexible Breite einzuschwören und wollen davon nun auch profitieren.
Um
benutzerdefinierte Parameter in die Darstellung des Templates
einfließen zu lassen, stellt Joomla sogenannte Template Parameter zur
Verfügung. Diese können in der bereits bekannten templateDetails.xml
Datei definiert werden und tauchen danach im Backend in der Template
Verwaltung auf. Um also einen Parameter für eine benutzerdefinierte
Breite zur Verfügung zu stellen, fügen wir in die XML-Datei folgenden
Code ein:
<params>
<param name="width" type="text" default="950" label="Template Breite" description="Template Breite in Pixel" />
</params>
Innerhalb des params Blocks können beliebig viele Parameter aufgeführt
werden. Hier haben wir einen einfachen Text-Parameter definiert,
welcher die Breite des Templates in Pixeln enthalten wird. Es gibt noch
andere Parameter Typen, wie z. B. radio, list, folderlist usw. Man
kann sein Template also recht exzessiv parametrisierbar machen. Wer
schon mal ein Clubtemplate eingesetzt hat, kennt die Unmengen an
möglichen Parametern, welche dort zum Einsatz kommen.
Wir begnügen uns mit einem Parameter und gehen ins Backend, um diesen
gleich mal zu begutachten. Dazu klicken Sie auf
Erweiterungen->Templates und dann auf unser Flows Template. Auf der
rechten Seite sehen Sie nun den Parameter "Template Breite".
 Dummerweise steht bei Ihnen wahrscheinlich:
"Die Parameterdatei „\templates\flows\params.ini“ ist schreibgeschützt!".
Das liegt daran, dass Joomla die eingegebenen Parameter irgendwo
speichern muss. Wir haben aber noch nicht dafür gesorgt, dass dies
möglich ist.
Die Meldung ist in diesem Fall falsch, da die Datei
params.ini nicht schreibgeschützt ist, sondern gar nicht existiert.
Legen Sie also eine leere Datei namens params.ini in das Verzeichnis.
Haben Sie das getan, laden Sie die Backendseite neu und Joomla meckert
nicht mehr.
Hier können Sie nun gleich eine Breite in Pixeln
angeben, sagen wir 900. Speichern Sie danach die Backend Ansicht, indem
sie auf Anwenden oder Speichern klicken. In der params.ini Datei steht
nun width=950. Juhu, unser Parameter ist schon mal da. Jetzt müssen wir
ihn nur noch im Template nutzen.
Machen wir erst einen Test,
indem wir in die index.php unseres Flows Templates gehen und an einer
beliebigen Stelle folgenden Code eingeben:
<?php echo $this->params->get('width'); ?>;.
Wenn Sie das Fronend nun neu laden, sollte irgendwo die Zahl 950
erscheinen. Supi, wir können also über die Methode
$this->params->get auf alle vorhandenen Template Parameter
zugreifen.
Wie nutzen wir diese Größe also nun, um unser
Template entsprechend darzustellen? Grundsätzlich gibt es hier drei
grobe Richtungen, von denen ich zwei in einem kleinen Exkurs kurz
umschreiben will. Die dritte folgt weiter unten.
 Die
eine Möglichkeit besteht darin, mit Hilfe der Parameter Angaben einen
CSS-Override einzubauen. Mehr dazu gleich. Der andere Weg wäre die
Vorgabe einer Auswahl an Parametern, anstatt dem Nutzer eine freie
Eingabe zu erlauben. Diese Vorgaben könnten wir dann als CSS-Klasse an
unsere DIVs dranhängen, um im template.css die nötigen Stylings zu
formulieren. Das bei Joomla enthaltene rhuk_milkyway Template geht
diesen Weg.
Was mir daran nicht gefällt ist, dass man sich auf fixe
Parameter festlegen muss. Als Parameter kommt also nicht eine
Pixelbreite zum Einsatz, sondern eine Auswahlliste, in der
beispielsweise "schmal", "mittel" und "breit" steht. Diese Worte können
in der index.php, sagen wir das BODY Tag als CSS-Klasse, wie folgt
eingefügt werden:
<body class="width_<?php echo $this->params->get('width'); ?>">
Man bekommt also ein BODY-Tag mit der Klasse "width_mittel" und kann in
seiner template.css einen passenden Style realisieren. Das ist an sich
sehr sauber und funktioniert prima. Blöd wird es nur, wenn man eine
Breite zwischen mittel und breit haben möchte. Deswegen bevorzuge ich
die erste Methode des CSS-Overrides. Das hört sich komplizierter an als
es ist, da in einem Stylesheet im Prinzip ständig Klassen überschrieben
(override) werden.
Wir bauen also in unsere index.php folgenden Code direkt überhalb des schließenden HEAD-Tags ein:
...
<style type="text/css">
.wrapper {width: <?php echo $this->params->get('width'); ?>px;}
#main {width:<?php echo $this->params->get('width')-292; ?>px;}
</style>
</head>
...
 Das template.css wird in der index.php als Erstes geladen und damit
überschreiben unsere zwei inline-CSS Anweisungen die Definitionen
daraus. Jetzt können wir sogar eine Template Breite von 500px angeben.
Das sieht zwar schräg aus, aber es funktioniert.
Flows-Template mit Template Parameter Breite:
Download: Flows Template Step 5
Farbvariationen
Wenn wir schon bei Template Parametern sind, wollen wir auch gleich mal schauen, welche Parameter noch Sinn machen würden. Unser Flows Template soll, wie im zweiten Teil des Tutorials angekündigt, auch verschiedenen Farbpaletten unterstützen. Die ganze Zeit dieses Bau wäre ziemlich öde und so wollen wir Usern die Möglichkeit geben, über einen Template Parameter ein Farbschema auszuwählen.
Wir fügen also in der templateDetails.xml einen weiteren Parameter ein:
<param name="color" type="list" default="blue" label="Template Farbe" description="Template Farbe">
<option value="blue">Blau</option>
<option value="red">Rot</option>
</param>
 Dieses Mal ist es eine Liste, welche wir mit den beiden Vorgabe Blau
und Rot bestücken. Sie fragen sich, warum ich bei den Farben eine Liste
vorgebe und bei der Breite eine Nutzereingabe in Pixeln erlaube?
Nun,
bei den Farben handelt es sich ja nicht nur um einen simplen Wechsel
von Blau auf Rot. Das Template beinhaltet viele weitere Elemente,
welche in Blau Variationen und Komplementärfarben dargestellt werden
oder auch grafische Elemente, wie die Bordüre, welche speziell erstellt
werden müssen. Eine Benutzereingabe einer Farbe als Hex-Wert wäre an
dieser Stelle also relativ unsinnig. Mit vorgegebenen Farbschemata
können wir, wie Sie gleich sehen werden, wunderbar vorgefertigte
Farbvariationen für alle Elemente liefern.
Wie also realisieren
wir Parameter basierte Farbschemata im Template? Zu den zwei oben
genannten Möglichkeiten das Template über Parameter zu beeinflussen,
gesellt sich nun die Dritte. Wir laden einfach eine parameterabhängige
zusätzliche CSS-Datei nach! Das ist super einfach und erleichtert die
Anpassung der verschiedenen Farbschemata erheblich.
Im Headerbereich unserer index.php fügen wir folgendes ein:
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/flows/css/variation/<?php echo $this->params->get('color'); ?>.css" type="text/css" />
Diese Zeile muss direkt hinter dem Einbinden des eigentlichen
template.css stehen, da sie dieses, wenn nötig, überschreiben soll. Was
passiert in dieser Zeile genau? Nun, wir sehen, dass es ein neues
Verzeichnis names "variation" gibt. In diesem sollte sich eine CSS-Datei
mit dem Namen unserer Farbschemata befinden: Also blue.css und red.css.
Folgendes
müssen Sie bedenken. Wir haben in unserer Haupt Stylesheet Datei
template.css bereits alle nötigen Styles für die blaue Farbvariation
definiert. Wichtig: Das Blau ist also die "Stammvariation" des
Templates. Somit brauchen wir eigentlich keine blue.css Datei. Wir
legen trotzdem eine leere blue.css Datei in das variation Verzeichnis.
Interessant wird die red.css Datei. In dieser können wir nun alle
nötigen Styles definieren, um aus dem blauen Layout ein rotes zu
machen. Aus Demonstrationsgründen fügen wir einfacher Weise erstmal
folgendes Styling in die red.css Datei:
body {
background:#FEFBF9 url(../../images/red/borduere.gif) repeat-x scroll 0 top;
}
#headwrapper {
background-color:#E2671D;
border-top:25px solid #E2671D;
}
.wrap1 {
background:#F3C2A5 none repeat scroll 0 0;
}
 Wenn Sie nun im Backend das Template auf die Variation Rot stellen und
die Seite im Frontend neu aufrufen, werden Sie sehen, dass ein
beruhigendes Rot oder Orange Einzug gehalten hat. Im images Verzeichnis
des Templates haben wir ein Verzeichnis names red erstellt. Darin
werden sich alle Bilder befinden, für die wir Rotvariationen brauchen.
Momentan liegt nur die rote Bordüre darin.
Damit soll es mit dem Template Variationen erstmal gut sein. Sie haben nun sicher genug Inspiration, um Ihre Ideen mit eigenen Parametern umzusetzen. Wir werden im weiteren Verlauf des Tutorials ausschließlich mit der blauen Variante arbeiten. Erst zum Schluss, wenn das XHTML/CSS fertig ist, passen wir alle nötigen Styles für andere Farbvariationen an.
Flows-Template mit Farbvariation:
Ansehen: Flows Template Step 6
Download: Flows Template Step 6
Modul Styling mit Modul Chrome
Damit es mit unserem Flows
Template auch strukturell vorwärts geht, wollen wir uns der Ausgabe von
Modulen widmen. Module werden in unserem Template, wir wir wissen, wie
folgt eingebunden:
<jdoc:include type="modules" name="right" />
Man
sollte eigentlich nicht sagen, dass Module, sondern Modul Positionen
eingebunden werden. Alle Module, welche sich in der Position right
befinden, werden hier eingebunden. Die Frage ist, wie werden sie
eingebunden? Was genau kommt dabei raus?
Bei der Anweisung s. o. wird ein Modul ausgegeben ("gerendert"), welches so aussieht:
<div class="moduletable">
<h3>Modul Titel</h3>
...modulinhalt...
</div>
Der Inhalt des Moduls wird in ein DIV mit der Klasse moduletable eingebettet
und, wenn im Backend angegeben, ein Modultitel als H3 ausgegeben. Na
das ist doch schon mal was. Mit dem umgebenden DIV können wir das Modul
stylen und ihm z. B., eine Hintergrundfarbe geben.
Wenn ich mir unser Screendesign so anschaue, ist diese, doch etwas magere Struktur, zu wenig für unser Styling.
Glücklicherweise
bietet Joomla die Möglichkeit, die Art zu beeinflussen, wie eine
Modulposition gerendert wird. Hier kommt das sogenannte Module Chrome
zum Einsatz. Damit kann man beeinflussen, in was für eine HTML-Struktur
das zu rendernde Modul einfließen soll.
Im Prinzip können wir mit
einem simplen Attribut Joomla anweisen, ein Modul etwas anders
auszugeben. In der Praxis sieht das dann so aus:
<jdoc:include type="modules" name="right" style="rounded" />
Hier haben wir dem Attribut style das Chrome rounded gegeben. Schauen wir uns nun die Modulausgabe an und wir sehen:
<div class="module">
<div>
<div>
<div>
<h3>Modul Titel</h3>
...modulinhalt...
</div>
</div>
</div>
</div>
Olala! Da haben wir doch ein paar mehr DIVs, mit denen wir arbeiten können. Das Chrome rounded
wurde eingeführt, um leicht runde Ecken bei Modulen zu realisieren. Wie
Sie wissen, gibt es für runde Ecken immer noch keinen W3C Standard und
jeder Browser Hersteller hat entweder eigene CSS Attribute eigeführt
oder unterstützt runde Ecken gar nicht. So muss man sich mit solchen
Konstrukten behelfen.
Natürlich gibt es noch andere eingebaute Chromes, welche Sie sich auf der Joomla Module Chromes Seite anschauen können.
http://docs.joomla.org/What_is_module_chrome%3F
Ein eigenes Modul Chrome
 Nachdem
ich mir das Screendesign nochmal zu Gemüte geführt habe (Bild links),
bin ich zu einem unerfreulichen Schluss gekommen. Keines der sechs
Chromes reicht aus, um die Module wie vorgegeben zu stylen. Wie Sie in
dem Bild sehen können, sind unsere Module zum einen, von runden Ecken
umgeben und zusätzlich hat der Modultitel noch einen grafischen
Hintergrund.
Um den nötigen HTML-Code zu Stande zu bringen, mit dem
wir das nötige Styling realisieren können, gibt es nur einen Ausweg:
Ein eigenes Chrome! Ja, das geht! Sie können als Style-Attribut nicht
nur eine der sechs standard Vorgaben (rounded, none, table, horz,
xhtml, outline) verwenden, sondern auch eigene.
Achtung:
Die folgenden Abschnitte setzen höhere Kentnisse im Bereich HTML/CSS voraus.
Wie
das geht, wollen wir uns nun anschauen. Um ein eigenes Chrome zu
definieren, muss Joomla wissen wo sich dieses befindet und wie es
heisst. Bei Modul Chromes handelt es sich um eine, bei Joomla verbreitete Technik der "Output overrides". Wer mehr darüber erfahren möchte, kann unseren Artikel über Template Overrides lesen.
Wir definieren also schon mal die Moduleinbettung in der
index.php mit eigenem Chrome:
<jdoc:include type="modules" name="right" style="flowsrounded" />
Flowsrounded wird
unser eigenes Chrome also heißen. Damit Joomla es auch findet, legen
wir in unserem Template Verzeichnis ein neues Verzeichnis names html an. Darin platzieren wir eine leere Datei names modules.php. Genau hier wird Joomla nach unserem eigenen Modul Chrome suchen.
Bevor
wir uns jetzt darauf stürzen, das Chrome zu definieren, sollten wir
erstmal probieren, die nötige HMTL/CSS Struktur einfach als
Trockenübung umzusetzen. Wenn diese im Browser funktioniert, ist es
leicht, sie als Chrome umzusetzen. Wir werfen nochmal einen
ambitionierten Blick auf das Screendesign und erstellen folgende
HTML-Struktur:
<div class="flowsrounded">
<h3><span>Modul Titel</span></h3>
<div class="box-t1">
<div class="box-t2">
<div class="box-t3"></div>
</div>
</div>
<div class="box-1">
<div class="box-2">
<div class="box-3 with-header">
<p>...Content...</p>
</div>
</div>
</div>
<div class="box-b1">
<div class="box-b2">
<div class="box-b3"></div>
</div>
</div>
</div>
Ein
Haufen verrückter Codes für nur ein Modul-Skelett, was? Nun, dies ist
genau die Struktur, welche wir brauchen, um unser Screendesign
umzusetzen. Die leeren DIV Blöcke dienen, genau wie im Content Bereich
unseres Templates, dem Styling der runden Ecken. Natürlich habe ich den
Code nicht einfach mal so runtergeschrieben, sondern Stück für Stück
zusammengesetzt, bis das gewünschte Ergebniss zu sehen war.
Noch lustiger wird es mit dem dazugehörigem CSS:
div.flowsrounded {
position: relative;
margin-bottom:5px;
}
div.flowsrounded div.box-t1 {
background: transparent url(../images/mod_flowsrounded_corners.png) no-repeat scroll 0 0;
}
div.flowsrounded div.box-t2 {
background:transparent url(../images/mod_flowsrounded_corners.png) no-repeat scroll 100% -15px;
padding:0 10px;
}
div.flowsrounded div.box-t3 {
background:transparent url(../images/mod_flowsrounded_corners.png) repeat-x scroll 0 -30px;
height:10px;
}
div.flowsrounded div.box-1 {
background:transparent url(../images/mod_flowsrounded_edges.png) repeat-y scroll 0 0;
}
div.flowsrounded div.box-2 {
background:transparent url(../images/mod_flowsrounded_edges.png) repeat-y scroll 100% 0;
padding:0 10px;
}
div.flowsrounded div.box-3 {
background:#F5F5F5 none repeat scroll 0 0;
overflow:hidden;
}
div.flowsrounded div.box-b1 {
background:transparent url(../images/mod_flowsrounded_corners.png) no-repeat scroll 0 -45px;
}
div.flowsrounded div.box-b2 {
background:transparent url(../images/mod_flowsrounded_corners.png) no-repeat scroll 100% -60px;
padding:0 10px;
}
div.flowsrounded div.box-b3 {
background:transparent url(../images/mod_flowsrounded_corners.png) repeat-x scroll 0 -75px;
height:10px;
}
div.flowsrounded h3 {
font-size:15px;
font-weight:bold;
height:30px;
left:9px;
overflow:hidden;
position:absolute;
right:7px;
top:0;
z-index:1;
line-height:30px;
margin:8px 2px 0 0;
padding-right:4px;
background:transparent url(../images/mod-header-r.png) no-repeat scroll right top;
}
div.flowsrounded h3 span {
background:transparent url(../images/mod-header-l.png) no-repeat scroll 0 0;
display:block;
padding:0px 0 5px 18px;
}
Hier
steckt schon eine ordentliche Portion CSS drin. Besonders im Bereich
des Modul Titels kommen ein paar verwegene Styles zum Einsatz. Aber
genau dieses Konstrukt ermöglicht uns, die Module entsprechend dem
Screendesign umzusetzen.
Nun schauen wir mal, wie wir den Spaß
als eigenes Modul Chrome umsetzen können. Wir gehen daher in die oben
genannte (noch leere) modules.php Datei. Hier schreiben wir erstmal folgendes rein:
<?php
defined('_JEXEC') or die('Restricted access');
function modChrome_flowsrounded($module, &$params, &$attribs) {
echo $module->content;
}
?>
Das
ist das Skelett unseres eigenen Module Chromes. Im Funktionsnamen sehen
Sie den Namen unseres Chrome Styles. Joomla ruft diese Funktion also
auf, wenn es darum geht, unser Chrome auszugeben. Momentan wird mit echo $module->content; ohne weiteres Styling einfach der Inhalt der Modulposition ausgegeben.
Alles
was wir jetzt machen müssen, ist unser Chrome HTML Konstrukt von oben,
hier reinzupflanzen. Bevor wir das tun, finden Sie hier noch ein
Hinweise zu den Parametern der Chrome-Funktion.
Die Funktion erhält die drei Parameter $module, $params und $attribs. Dahinter verstecken sich allerhand spannende Informationen, welche wir bei der Ausgabe gut gebrauchen können.
 Das Objekt $module beinhaltet natürlich den Inhalt des Moduls, aber auch andere Infos, wie z. B. den Parameter showtitle,
welcher angibt, ob der Titel des Moduls ausgegeben werden soll. Sie
merken, das hier Parameter liegen, welche im Backend in der
Modulverwaltung zum Einsatz kommen.
 Im Objekt $params liegen interessante Informationen, welche sich auf ein spezifisches Modul beziehen, z. B., das Modul Klassen Suffix. Diese Parameter werden im Backend auf der rechten Seite verwaltet.
Das beste aber ist der dritte Paramerer $attribs. Dieses Objekt
beinhaltet Chrome Attribute. Hä? Was?! Ja, richtig...Chrome Attribute!
Sie können bei der Einbettung eines Moduls dem Chrome Aufruf, Parameter
mit auf den Weg geben. Wir wollen das gleich mal demonstrieren, indem
wir die Moduleinbettung wie folgt verändern:
<jdoc:include type="modules" name="right" style="flowsrounded" headerlvl="2" />
Das Attribut headerlvl (Headerlevel)
ist neu dazugekommen. Damit wollen wir unserem Chrome sagen, welche
Überschriftgröße beim Modultitel zum Einsatz kommen soll. In der Regel
nutzt Joomla immer H3 als Modultitel. Wir wollen das aber frei
handhaben können.
Das Chrome ändern wir also wie folgt:
<?php
defined('_JEXEC') or die('Restricted access');
function modChrome_flowsrounded($module, &$params, &$attribs) {
$headerlvl = isset($attribs['headerlvl']) ? (int) $attribs['headerlvl'] : 3;
<?php if ($module->showtitle) : ?>
<h<?php echo $headerlvl; ?>><span><?php echo $module->title; ?></span></h<?php echo $headerlvl; ?>>
<?php endif; ?>
<?php echo $module->content; ?>
}
?>
Coolio! Jetzt wird die Überschrift so ausgegeben, wie es im headerlvl Attribut vorgegeben wird. Falls das Attribut nicht vorhanden ist, wird ein H3 genutzt.
Weiterhin haben wir mit <?php if ($module->showtitle) : ?> auf ein Attribut des $module
Objekts zugegriffen, um herauszufinden, ob der Modultitel überhaupt
ausgegeben werden soll. Dies kann man bekannterweise im Backend
festlegen. Falls der Titel deaktiviert wurde (showtitle=0), können wir
uns den ganzen Header Kram ersparen.
Gehen wir noch einen Schritt weiter und binden endlich das komplette Chrome-Konstrukt ein:
<?php
defined('_JEXEC') or die('Restricted access');
function modChrome_flowsrounded($module, &$params, &$attribs) {
$headerlvl = isset($attribs['headerlvl']) ? (int) $attribs['headerlvl'] : 3;
if (!empty ($module->content)) : ?>
<div class="flowsrounded<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle) : ?>
<h<?php echo $headerlvl; ?>><span><?php echo $module->title; ?></span></h<?php echo $headerlvl; ?>>
<?php endif; ?>
<div class="box-t1">
<div class="box-t2">
<div class="box-t3"></div>
</div>
</div>
<div class="box-1">
<div class="box-2">
<div class="box-3">
<?php echo $module->content; ?>
</div>
</div>
</div>
<div class="box-b1">
<div class="box-b2">
<div class="box-b3"></div>
</div>
</div>
</div>
<?php endif;
}
?>
Jetzt haben wir es fast. Wir schauen mit if (!empty ($module->content)) : ?> nach, ob das auszugebende Modul überhaupt Inhalt produziert (ja sowas pasiert auch). Falls nein, geben wir nichts aus. Mit <div class="flowsrounded<?php echo $params->get('moduleclass_sfx'); ?>"> berücksichten wir den Modul Klassen Suffix, welcher im Backend definierbar ist.
Sie haben an dieser Stelle noch nicht die nötigen
CSS-Hintergrundgrafiken, um das Ergebnis begutachten zu können. Bevor
Sie darauf zugreifen, müssen wir nämlich noch ein Problemchen beheben.
Wenn
wir alles korrekt einbinden, bekommen wir die Module auf der rechten
Seite, wie im Bild links dargestelllt. Sieht super aus, oder? Wenn wir
im Backend die Darstellung des Modultitels bei einem Modul
deaktivieren, passiert folgendes:
Richtig! Der Abstand bleibt bestehen, obwohl wir kein Modultitel brauchen. Wir ändern deswegen unser Chrome folgendermaßen:
<div class="box-3 <?php if ($module->showtitle) echo "with-header" ?>">
In das CSS fügen wir ein:
div.flowsrounded div.with-header {
padding-top:35px;
}
Jippie! Jetzt kümmert sich die Klasse "with-header" darum, einen Abstand zu setzen, sobald ein Modul ein Titel hat.
Fügen Sie nun alle Teile zusammen oder laden Sie sich das Template mit dem vorerst fertigem Modul Chrome herunter.
Flows-Template mit Module Chrome:
Ansehen: Flows Template Step 7
Download: Flows Template Step 7
Kosmetik
Verdammt. Jetzt sind wir schon kurz vorm Ende des
dritten Teils des Tutorials und ich wollte eigentlich noch einen
Mechanismus einbauen, mit dem wir die rechte Modul Spalte auf die linke
Seite verlagern können. Das Template soll ja grundsätzlich nur aus dem
Content Bereich und einer Modulspalte bestehen. Die Möglichkeit über
einen Template Parameter anzugeben, ob links oder rechts, fände ich
jedoch ganz praktisch. Was soll's, das müssen wir dann wohl im vierten
Teil machen.
Damit nicht genug, habe ich am Ende des zweiten
Teils des Tutorials festgestellt, dass ich vergessen hatte, den
Kringelkram einzubauen. Damit meine ich die grafischen Ornamente oben,
links und rechts des Content Randes. Nun gut, das sollten wir jetzt
noch schaffen.
 Links
sehen Sie ein Bild, welches den Ansatz illustrieren soll, den ich
gewählt habe. Natürlich handelt es sich hierbei um klassisches
Webdesign, und hat nichts mit Joomla zu tun. Deswegen werde ich mich
möglichst kurz fassen.
Die einfachste Methode wäre, die
Grafiken, welche wir bis jetzt für den Rand links und rechts genutzt
haben (Gelb in der Grafik), einfach etwas breiter zu machen, die
nötigen grafischen Elemente unterzubringen und das CSS entsprechend
anzupassen.
Was mir an dieser Lösung nicht gefällt? Wir müssten das padding der wrapper-2
klasse um die neue Breite erhöhen, was ergeben würde, dass wir effektiv
weniger Raum für den Content hätten. Das wäre kein Problem, denn wir
können ja über unser Template Parameter eine beliebige Breite angeben.
Die erhöhen wir dann halt auf 1000px und schon haben wir wieder ca.
800px für den Content.
Das Unangenehme dabei ist, dass damit
die Ränder mit den grafischen Elementen (Pink) zum Content zählen. Wer
also die Seite im Browser horizontal skaliert, bekommt einen
horizontalen Scrollbalken, sobald die Grafiken berührt werden.
Eigentlich möchten wir ja erst einen Scrollbalken sehen, wenn der
tatsächliche Content von der Breite des Browserfensters beschnitten
wird. Was machen wir also?
Mit der Anforderung an unser
Template, eine flexible Breite und darüber hinaus immer gleich
aussehende (nicht verdeckte) grafische Elemente links und rechts zu
haben, habe ich mir wohl ein ziemliches Ei ins Nest gelegt. Nun nicht
wirklich. Es kommt eine neue Idee und etwas hardcore CSS ins Spiel.
Die
Idee besteht darin, nicht mehr länger zwei riesen lange
Hintergrundgrafiken für die Ränder links und rechts zu haben, sondern
nur den Teil, welcher individuell ist (Pink) und den Rest mit einer
sich wiederholenden Hintergrundkachel zu versehen (Gelb).
Wir passen unsere index.php wie folgt an:
...
<div class="wrapper-body">
<div class="b-left"></div>
<div class="b-right"></div>
<div class="wrapper-t1">
...
Diese beiden DIVs (Pink) positionieren wir absolut und verschieben Sie negativ zum jeweiligem Rand. Hier das CSS:
.b-left {
background:transparent url(../images/wrapper-1-left.png) no-repeat scroll 0 0;
position:absolute;
top:25px;
left:-110px;
width:120px;
height:500px;
}
.b-right {
background:transparent url(../images/wrapper-2-right.png) no-repeat scroll 0 0;
position:absolute;
top:15px;
right:-110px;
width:120px;
height:500px;
}
Jetzt
bekommen wir zwar immer noch einen Scrollbalken, aber wenn wir auf das
oberste DIV, dem wir die Klasse Page verpassen, folgendem CSS-Code
zuweisen, erhalten wir das gewünschte Ergebnis.
.page {
overflow:hidden;
min-width:850px;
position:relative;
width:100%;
}
Jetzt
haben wir unser Ziel erreicht! Eine von der Breite des Templates
unabhängige Hintergrundgrafik, welche immer gleich ausschaut und nicht
angeschnitten wird.
Dadurch, dass wir mit dem min-width der page Klasse eine neue absolute Größe eingeführt haben, müssen wir unser inline-CSS in der index.php wie folgt anpassen:
<style type="text/css">
.wrapper {width: <?php echo $this->params->get('width'); ?>px;}
#main {width:<?php echo $this->params->get('width')-270; ?>px;}
.page {min-width:<?php echo $this->params->get('width'); ?>px;}
</style>
Das
Beste dabei ist, dass wir jetzt mit einem Template Parameter diese zwei
Elemente auch ausblenden lassen können, wenn wir das wünschen. Die
Hintergrundkacheln bleiben davon unberührt und geben unserem Template
weiter einen schönen sauberen Rand. Nur eben ohne Schnick-Schnack.
Dafür legen wir folgenden Parameter in die templateDetails.xml:
<param name="ornaments" type="list" default="1" label="Grafischer Rand" description="Grafischer Rand">
<option value="1">Ja</option>
<option value="0">Nein</option>
</param>
Die index.php passen wir auf die bekannte Weise an:
<?php if($this->params->get('ornaments')) : ?>
<div class="b-left"></div>
<div class="b-right"></div>
<?php endif ?>
Jetzt
sind wir fast fertig. Es gibt nur eine Kleinigkeit, welche mir im
Internet Explorer aufgefallen ist. Versuchen Sie im Backend das
Navigationsmodul, welches sich in der Position navi befindet,
kurz zu deaktivieren. Im Firefox verschwindet im Frontend die
Navigation einfach und die darunter liegende Farbe erscheint. Der
Explorer allerdings zeigt einen hässlichen weißen Balken.
Das liegt
daran, dass das DIV, ausgegeben wird,welches das Navigationsmodul
beinhaltet, unabhängig davon, ob auch ein Modul geladen wird.
Dem können wir zuvorkommen, indem wir eine weitere schicke Funktion von Joomla nutzen.
Wir passen den Bereich in unserer index.php, der sich um das Laden der navi Position kümmert wie folgt an:
<?php if($this->countModules('navi')) : ?>
<div id="navi"><jdoc:include type="modules" name="navi" /></div>
<?php endif ?>
Mit dem Befehl $this->countModules('navi') können
wir feststellen, wie viele Module in dieser Position geladen werden.
Falls die Position also leer ist, geben wir erst gar kein DIV aus. Nun
werden wir auch von dem weißen Balken im IE verschont.
Hier also
nun der letzte Schritt dieses Tutorialteils zum Ansehen und
Runterladen. Bedenken Sie, dass es sich nicht um ein installierfähiges
Template handelt. Sie müssen den Inhalt des Archivs einfach in ein
Template Verzeichnis Ihrer Joomla Installation kopieren und es dann
aktivieren. Aber das sollten Sie inzwischen ja wissen.
Flows-Template mit skalierbarem Hintergund:
Ansehen: Flows Template Step 8
Download: Flows Template Step 8
Im nächsten Teil des Tutorials wollen wir uns dem Content (endlich)
zuwenden. Wir werden ein paar Template Overrides für die wichtigsten
Komponenten erstellen. Natürlich in erster Linie für die Content
Komponente. Die Flexibilisierung der Spalten wird auch thematisiert
werden.
Teil 4 des Joomla! 1.5 Template Tutorials ist fertig!
Weiterhin viel Spaß beim Nachbau des Flows Templates!
 |
Zeige/Verstecke Kommentareingabe
