Joomla! Template Tutorial Teil 3 - Modul Chromes und Template Parameter

Geschrieben von Tom   
Sonntag, 31. Januar 2010

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;    
}

 

Joomla CSS Navigation 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".

Joomla Template ParameterDummerweise 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.

Joomla Template Parameter VariantenDie 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>
...

template-500.pngDas 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>

template-colors-params.pngDieses 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;
}

rot-variation.pngWenn 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

Flows Modul ChromeNachdem 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.

Showtitle Parameter im Joomla BackendDas 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.

suffix-parameter.pngIm 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.

Flows Template HintergrundLinks 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!  

feed12 Kommentare
ws
April 07, 2010
Stimmen: +7

Hallo, habe mal versucht das Tutorial durchzuspielen. Habe dazu die Downloads jeweils entpackt und die Ansichten angeschaut, allerdings fehlt bei Step 4 die Navigationsleiste!
vg

report abuse
vote down
vote up
ws
April 07, 2010
Stimmen: +5

Auch bei den weiteren Steps 5 bis 9 ist keine Navigation aus den Downloadfiles sichtbar. Nur beim anklicken des direkten Links wird alles korrekt wie in der Doku angezeigt.

report abuse
vote down
vote up
Tom
April 07, 2010
Stimmen: +4

Kann es sein, dass Ihr mainmenu Modul (Navigation) nicht in der richtigen Modulposition ("navi") liegt?

report abuse
vote down
vote up
ws
April 13, 2010
Stimmen: +7

Danke für die Info - habe verstanden, neben den Anpassungen der php und css sind auch entsprechende im Joomla Backend selbst zu tätigen. Wäre klasse wenn auch diese in dem Tutorial jeweils kurz besprochen werden. Alleine mit dem Entpacken der gezippten Files in das Template ist es jedenfalls nicht getan.

report abuse
vote down
vote up
Tom
April 14, 2010
Stimmen: +2

Modulpositionen werden ausführlich besprochen. Anpassungen am Backend sind nicht nötig. Wie bei jedem Template müssen die gewünschten Positionen ausgewählt werden. Das Purity Template z. B. nutzt ebenfalls die Position "navi".
Dass bei diesem Tutorial mehr zu machen ist, als das Template auszupacken liegt auf der Hand.

report abuse
vote down
vote up
FSup
August 30, 2010
Stimmen: +0

Ich wollte einfach mal Danke sagen - das Tutorial ist das erste, welches es mir erlaubt ein eigenes Joomla-Template von Grund auf zu erstellen - anstatt irgendein Template herunter zu laden und darin herumzupfuschen smilies/smiley.gif

Beste Grüße aus Mainhattan

report abuse
vote down
vote up
Franz
Oktober 19, 2010
Stimmen: +0

Hallo,

danke für das tolle Tutorial. Ich den Files zum downloaden ist ein kleiner Fehler. Die Position "navi" existiert im TemplateDetail.xml File nicht, und daher wird auch nichts dargestellt.

Schöne Grüße

Franz

report abuse
vote down
vote up
Faive
Januar 26, 2011
Stimmen: +1

Also ersten ich muss sagen ich find es gut , dass du dir die Arbeit gemachst hast solch ein TUT zu verfassen . Aber ich finde es absolut nicht hilfreich .

Dies liegt hauptsächlich daran , dass du den code , den du im tuorial verwendetst zwar erklärst . aber wie du im Endeffekt zu den Ergebnissen der einzel Schritte kommst ist mir völlig unklar . Wie wär's ,wenn du schon den wrapper verwendest, auch mal zu erklären wieso du da content wrapper sowieso header wrapper erzeugst .

Ich weiß auch nicht wen dieses TUT ansprechen soll ,erfahrene Nutzer bzw. Personen , die sich mit php,html,css schon auskennen oder doch eher Anfänger .

report abuse
vote down
vote up
make
März 29, 2011
Stimmen: +0

Kann es sein, dass die Paramater bei Joomla! 1.6 garnicht mehr Funktionieren?
Ich versuche gerade dein Tutorial mit der 1.6 Verion nachzuarbeiten und schon bei dem ersten Parameter schritt mit der Breite wird im backend nichts angezeigt...

report abuse
vote down
vote up
Tom
März 29, 2011
Stimmen: +0

@make
Das stimmt. Dieses Tutorial betrifft Joomla 1.5 Templates. Es ist nicht schwierig es auf Joomla 1.6 Templates zu übertragen, aber einfach übernehmen kann man es nicht.

report abuse
vote down
vote up
make
März 29, 2011
Stimmen: +1

Also erstmal danke für deine schnelle Antwort und auserden find ich ist hier ein großes Lob und ein Dankeschön angebracht, das Du dir die Mühe mit dem Tutorial gemacht hast und das es so gut geworden ist.

Ok danke ich werde mal suchen. Besteht die Möglichkeit, das du ein weiteres tutorial bzw. ein Update dieses Tutorials macht, dass sich auf Joomla 1.6 bezieht?

report abuse
vote down
vote up
Tom
März 29, 2011
Stimmen: +1

@make
Also grundsätzlich mache ich die Tutorials sehr gerne und würde gerne bald ein neues machen. Selbst bei diesem 1.5 Template Tutorial fehlt ja noch der letzte Teil.
Leider sind wir im Tagesgeschäft stark eingebunden und die neue B01 Seite ist auch in den Startlöchern und genießt momentan höchste Priorität. Also kann ich nur um Geduld bitten.

report abuse
vote down
vote up

Kommentar schreiben
 
  kleiner | groesser
 

security image
Bitte den folgenden Code eintragen


busy
 

B01 realisiert zeitgenössische Online-Kommunikationsmittel.
Wir sind spezialisiert auf OSCMS und unterstützen unsere Kunden vom Konzept bis zum Launch mit Erfahrung und exklusiven Komponenten zur Umsetzung von Communitys, Shops, Portalen und Webseiten.

B01 Kunden

Unsere Ideen, unsere Produkte, unsere Kunden.

B01 empfiehlt:

ZOO Content Construktion Kit

ZOO CCK

Virtuemart Shopsystem

E-Commerce

Joomla SEO

SEO

Joomla Content Editor

Content Editor

Joomla Social Networking

JomSocial