Joomla 1.5 Template Tutorial

Beitragsseiten
Joomla 1.5 Template Tutorial
Entwicklung eines CSS-basierten Joomla! 1.5 Template
Was ist ein Joomla! 1.5 Template?
Ein einfaches leeres Template
CSS für den Aufbau eines tabellenfreien Layout
Ein Joomla! 1.5 Template
Weitere Templateeigenschaften
Schlußwort
Alle Seiten

Seite 6 von 8

Ein Joomla! 1.5 Template

Zuerst beginnen wir mit unserem sogenannten comp (composition). Dies ist das Design, welches die Basis des Templates darstellen soll. Wir nutzen eines, welches uns freundlicherweise von Casey Lee, dem Lead Designer von Joomlashack zur Verfügung gestellt wurde. Es nennt sich Bold und wir können es in Bild 9.8 sehen

9.8 Design von Joomlashack

Slicing and Dicing

Der nächste Schritt wird als Slicing bezeichnet. Wir verwenden unser Grafikprogramm, um kleine Bildabschnitte für unser Template zu verwenden. Falls nötig sollte beachtet werden, wie diese Elemente in der Größe verändert werden können. (Mein bevorzugtes Grafikprogramm ist Fireworks, weil es geeigneter für Webdesign ist als Photoshop, welches wiederum für den Druck vorteilhafter ist)

Modulpositionen festlegen

Dieses Template hat einige besondere Positionen für besondere Module, die sich leicht von der Standard Joomla! Installation unterscheiden. Um sicherzugehen, daß alles richtig funktioniert, gelten folgende Vereinbarungen: User1 für das Suchmodul, User2 für das Topmenü, Top für den Newsflash oder andere HTML Module. Hier sollte nichts anderes ausgegeben werden.

Header

Das Header Image hat oben einen kleinen Streifen. Wir wollen daran festhalten, indem wir das Image als Background aufbauen und zusätzlich eine Farbe zuweisen. So kann der Header vertikal skalieren, falls dies zum Beispiel bei einer Veränderung der Textgröße benötigt wird. Ebenso wird die Farbe vom Text in Weiß geändert, damit er sich vom schwarzen Hintergund abhebt. Wir benutzen das Background Image für die Suchbox. Ich habe ebenso eine absolute Positionierung innerhalb eines relativ positionierten Elementes verwendet, um die Suchbox an der gewünschten Stelle zu platzieren. Wenn der Text vergrößert wird, wird dieses einzelne Bild nicht mitskaliert. Es ist also ein oberes und unteres Bild notwendig. Eine kleine Übung für Sie.

#header {
color:#fff;
background:#212121 url(../images/header.png) no-repeat;
position:relative;
}

#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;
}

#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
font:1em Arial, Helvetica, sans-serif;
padding:2px;
}

#header .search {
position:absolute;
top:20px;
right:20px;
}

Ich habe hier kein Bild als Logo verwendet, sondern Text, weil Suchmaschinen Bilder nicht interpretieren können. Man kann natürlich eine elegante Bildersetzung einbauen, aber dies überlasse ich Ihnen. Unser Header sieht nun wie in Bild 9.9 aus

9.9 Header Image Background

Jetzt werden wir eine Technik kennenlernen, mit der ein Hintergrund für eine fluide Spalte dargestellt wird: Sliding Doors.

Spalten Hintergründe

Wir hatten festgestellt, daß eine Hintergundfarbe einer Spalte sich nicht bis zum Footer erstreckt. Deshalb, weil das <div> Element, hier sidebar und sidebar-2 nur so groß wie sein Inhalt wird. Es erstreckt sich nicht bis zur Grenze des umgebenden Elementes. Wir wenden eine Technik an, die sich 'Sliding Faux Columns' nennt. Mit dieser werden grundlegend zwei breite Images erzeugt, welche übereinander verschoben werden. Wir definieren zwei neue Container, um diese Hintergründe aufzunehmen. Normalerweise könnten wir eine dem #wrap zuweisen, aber ich werde hier einen zusätzlichen Container definieren, um dies so besser darzustellen. Eine vollständige Beschreibung finden Sie hier:

In diesm Fall ist unsere maximale Weite 960px. Darum beginnen wir mit einem Image dieser Breite. Im template.zip ist es die Datei slidingcolumns.png. Wir exportieren dann zwei Slices, eines 960px breit mit einem 192px breiten Hintergund auf der linken Seite. Und ein 960px breites mit einem 192px breiten Hintergund auf der rechten Seite.

Das linke Bild benötigt einen weißen und das rechte einen transparenten Hintergund . Ich habe diese bei dem Export von der Originaldatei verändert. Warum 192px? Es sind 20% von 960, unsere Spalten haben eine Breite von 20%. Wir verwenden die CSS-Eigenschaft background-position , um die Bilder an die richtige Stelle zu positionieren. Hier haben wir die Shorthandsyntax benutzt:

#leftfauxcol {
background:url(../images/leftslidingcolumn.png) 20% 0;
}
#rightfauxcol {
background:url(../images/rightslidingcolumn.png) 80% 0;
}

In der index.php fügen wir einfach einen Container innerhalb des wrap hinzu.

<div id="wrap">
<?php if($this->countModules('left')) : ?>
<div id="leftfauxcol">
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
<div id="rightfauxcol">
<?php endif; ?>
<div id="header">

Weiterhin werden vor dem schließenden </div> PHP if-abfragen eingefügt.

<?php if($this->countModules('left')) : ?>
</div>
<!--end of leftfauxcol-->
<?php endif; ?>
<?php if($this->countModules('right')) : ?>
</div>
<!--end of rightfauxcol-->
<?php endif; ?>

Der Footer sowie die unteren Module/Elemente erhalten auch einen Background, sonst würde der Spaltenhintergrund sichtbar werden.

#footer {
background:#212121;
color:#fff;
text-align:right;
clear:both;
}
#bottom {
background:#333;
color:#666;
padding:10px 50px;
}

Wir müssen die Floats clearen, damit die faux columns sich bis zum unteren Ende der Seite erstrecken. Herkömmlicherweise wurde das Pseudoelement :after verwendet, aber dies funktioniert im IE7 nicht mehr korrekt. Wir müssen ein clear im IE6 und im IE7 erreichen, eine schwierige Aufgabe. Mittlerweile gibt es hierfür eine Menge von Lösungen. Wir benutzen hier die 'Float (nearly Everything)' Methode. Wir fügen dem #footer ein simples clear:both hinzu und den Spalten umgebenden Containern ein float. Diese fügen wir in einem Stylesheet nur für den IE6 ein.

#leftfauxcol,#rightfauxcol,#footer {
float:left;
width:100%;
}

Im Head der index.php wird folgender Code aufgenommen.

<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ie6only.css"
           rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7only.css"
           rel="stylesheet" type="text/css" />
<![endif]-->

Flexible Module

In unserem Design haben wir einen großen Modulblock. Wir wissen nicht, welche Größe der darin enthaltene Text benötigt. Um dieses Problem zu lösen, fügen wir die jdoc:include Anweisung in einem Containerelement ein, welches dieselbe Hintergrundfarbe wie das Bild beinhaltet. Die gleiche Strategie haben wir bereits für den Header verwendet.

<?php if($this->countModules('top')) : ?>
<div id="top">
<div class="inside">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php else : ?>
<div id="top"> </div>
<?php endif; ?>

Wir haben auch hier eine PHP-Bedingung eingebaut. Wenn nämlich das obere Modul keinen Inhalt ausgibt, wird auch nicht das orangefarbene Teaserbild angezeigt. Es verbleibt ein leerer Container, der ein wenig von dem Hintergrundbild ausgibt und ein Padding von 20px., eine rein ästehtische Angelegenheit. Das CSS benötigt eine bestimmte Spezifität, um die vorher definierten Styles von moduletable zu übersteuern:

#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}
#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
font-stretch:expanded;
margin:0;
padding:0;
}

#top .moduletable {
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
border:0;
margin:0;
padding:0;
}

Typographie

Viele der Links müssen weiß sein, darum definieren wir sie global und verändern dann die Farbe innerhalb der mittleren Spalte:

a:link,a:visited {
text-decoration:underline;
color:#fff;
}
a:hover {
text-decoration:none;
}
#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,
#content100 a:link,#content100 a:visited {
color:#000;
}

Das Element .button erhält einen Style.Wir erzeugen hierzu den Bachground aus einem geslicten Bild des comp. Dieses dünne Slice ist horizontal gekachelt.

.button {
border:#000 solid 1px;
background:#fff url(../images/buttonbackground.png) repeat-x;
height:25px;
cursor:hand;
margin:4px 0;
padding:0 4px;
}

Für Tabellen können wir einen Background verwenden, indem wir das gleiche Bild wiederholt anzeigen, das auch für den Teaser verwendet wird. Das Wiederverwenden eines Bildes verkleinert den nötigen Download von Bildern und beschleunigt so den Seitenaufbau.

sectiontableheader {
background:url(../images/teaser.png);
color:#fff;
font:1.2em bold Arial, Helvetica, sans-serif;
padding:5px;
}

Die Module benötigen noch einfache Einstellungen für padding und margin.

.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}
.moduletable h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

Menüs benötigen wie immer umfangreiche Stylevorgaben. Wir machen dies so einfach wie möglich. Wir slicen ein Image, das sowohl das Aufzählungszeichen (bullet) als auch die Unterstreichung beinhaltet.Beachten Sie, daß das Modulsuffix menu jedem Element zugeordnet ist:

.moduletablemenu {
margin-bottom:1em;
}

.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

.moduletablemenu ul {
list-style:none;
margin:5px 0;
}

.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}

.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}

.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}

Zuletzt zu dem tabbasierten Menü oben rechts. Als ein Anwalt der Accessibility werden wir es so aufbauen, daß es bei einer Textgrößenveränderung mitskaliert. Glücklicherweise gibt es hierfür eine Technik, welche dies bewerkstelligt. Es ist dieselbe, die wir auch für die Spalten verwendet haben: die Sliding Doors!

Wir werden ebenso hier auf den schnellen Zugriff auf das Template achten, indem wir ein einzelnes Bild für die linke und rechte Seite aufbauen, ebenso für den 'an' und 'aus' Zustand. Dies wird auch als 'sprites' bezeichnet.

Das CSS ist nicht sehr kompliziert, wir müssen ein wenig mit der vertical position des Backgrounds spielen.

.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.moduletabletabs ul {
list-style:none;
float:right;
background:#212121;
width:100%;
margin:0;
padding:0;
}

.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}

.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}

.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}

.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}

Wir müssen hier den Suffix tabs für das Menümodul verwenden. Wenn Sie sich das Originaldesign ansehen, werden Sie bemerken, daß sich Icons auf den Tabs befinden. Während wir schon zwei Background Images verwenden, eines für das li und eines für den link , würden wir ein drittes Element benötigen, um dort das Icon zu platzieren. Sie könnten hierfür ein <span> benutzen, aber dies ist fortgeschrittenes CSS Jiu-Jitsu. Ich überlasse es Ihnen als Hausarbeit. Die letzte verbleibende Aufgabe: Die Änderung der Datei templateDetails.xml. Sie muss alle Dateien und Images beinhalten, die im Template aufgerufen werden, damit es korrekt als ZIP-Datei installiert werden kann. Unser fertiges Template sollte so wie in Bild 9.10 aussehen.

9.10 Advanced Template mit Typografie

Zuletzt sollten Sie wissen, daß die Herstellung eines produktiven Joomla! Templates mehr eine Frage des grafischen Designs und des CSS ist als spezielles Joomla! Wissen.

CSSTemplateTutorialStep3

Wir haben nun ein Template entwickelt, welches auf einem comp (oder Design) beruht. Eine einfache Typographie wurde hinzugefügt, aber wichtiger, wir haben ein reines CSS Layout, welches dynamisch versteckte Spalten und ein tabbasiertes Menü aufweist. Ein installationsfähiges Template befindet sich in der Compass library: CSSTemplateTutorialStep3.zip.

Nachdem wir die Grundlagen hinter uns haben, beschäftigen wir uns mit weiteren Möglichkeiten, die mit 1.5 Templates möglich sind.

<< Zurück - Weiter >>

Joomla-Tipps.net