Joomla Templates - Das Design mit CSS erstellen
im vorigen Abschnitt haben wir das Gerüst des Joomla-Templates erstellt - nun passen wir es mit CSS dem Screendesign an, welches wir mit Photoshop gemacht haben.
Das HTML-Gerüst (bzw. php-Gerüst) sieht derzeit so aus:
<?php
defined('_JEXEC') or die;
/* The following line loads the MooTools JavaScript Library */
JHtml::_('behavior.framework', true);
/* The following line gets the application object for things like displaying the site name */
$app = JFactory::getApplication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<jdoc:include type="head" />
<style type="text/css">
<!--
body {
}
#wrap {
width: 960px;
margin: 0 auto;
}
#header {background-color:#D65D16; }
#sidebarLeft {
float: left;
width: 200px;
}
#content {
float:left;
width:600px;
}
#sidebarRight {
float: left;
width: 180px;
}
#footer {
padding: 10px 0;
clear: both; /* Diese clear-Eigenschaft bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<body>
<div id="wrap">
<div id="header"><!-- end #header --></div>
<div id="sidebarLeft">
<jdoc:include type="modules" name="left" style="xhtml" />
<!-- end #sidebarLeft --></div>
<div id="content">
<jdoc:include type="modules" name="breadcrumb" style="xhtml" />
<jdoc:include type="component" />
<jdoc:include type="message" />
<jdoc:include type="modules" name="debug" />
<!-- end #content --></div>
<div class="sidebar2">
<jdoc:include type="module" name="search" style="xhtml" />
<jdoc:include type="modules" name="right" style="xhtml" />
<!-- end #sidebar2 --></div>
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
<!-- end #footer --></div>
<!-- end #wrap --></div>
</body>
</html>
Für die Gestaltung des CSS müssen wir folgende Dinge tun:
- Den Hintergrund mit einem Verlaufsgrafik zieren
- Die äußere Box bzw. den #wrap mit einem Schatten versehen
- Den Header der Seite mit Logo und Banner füllen
- Die Text- und Link-Farben formatieren und richtige Schriftgrößen und -Familien festlegen
- Den einzelnen Boxen Höhe und Hintergrundfarben geben
1. Hintergrundmuster für die komplette Seite
Wie man im Layout erkennen kann, ist im Hintergrund ein linearer Verlauf angelegt, der von oben nach unten verläuft. Diesen schneidet man mit dem Freistellungswerkzeug aus:
Diesen Streifen speichert nun über das Menü "Datei" - "Für Web speichern" ab. Im darauf folgenden Fenster wählt man oben das Dateiformat "jpg" und stellt auf "hohe Qualität". Nun speichert man mit dem Button "speichern" und wählt den Ort, wo auch das Template gespeichert ist. Am besten legt man dafür einen Ordner mit dem Namen "images" an. Dort werden später auch die anderen Grafiken wie das Logo und das Banner abgelegt.
Nun erstellen wir einen HTML-Selektor im CSS-Bereich für den body-Befehl, denn dieser ist verantwortlich für den Inhalt und auch den Hintergrund der Seite.
body {
background-image: url(../images/background.jpg);/* der Pfad zum Bild */
background-repeat: repeat-x; /* das Bild wird nun in x-Richtung wiederholt */
background-color:#2a3024;
/* am unteren Rand des Bildes erscheint nicht mehr das Bild, sondern die hier gewählte Hintergrundfarbe */
}
2. Der Schatten für den Wrap bzw. den Hauptcontainer
Hier machen wir es uns einfach und verwenden einen CSS-Befehl für Schatten. Dieser wird zwar nicht von älteren Browsern verstanden, produziert aber keine Fehlermeldungen. Der Schatten-Effekt wird dort einfach nicht angezeigt..
Wir ergänzen also unsere ID #wrap um die entsprechenden Eigenschaften:
#wrap {
width: 960px;
margin: 0 auto;
box-shadow: 3px 3px 5px #333333,
-3px -3px 5px #333333;
}
Das Prinzip von box-shadow ist folgendes:
box-shadow: [xVersatz] [yVersatz] [Stärke] [Farbcode];
In meinem Beispiel habe ich noch eine zweite Zeile mit einem negativen Versatz gemacht, damit der Schatten nicht nur nach rechts und unten, sondern auch nach links und oben geworfen wird.
3. Header mit Logo und Banner
Dafür benutzen wir wieder Photohop und schneiden mit dem Freistellungswerkzeug das Logo und den Banner zurecht (ohne den Schatten!).
Das Logo als png(24) mit Transparenz gespeichert:
Das PNG-24 hat den Vorteil, dass es Transparenz mit hoher Qualität abbilden kann. Eine genaue Übersicht aller Bilddatei-Formate für das Internet finden Sie übrigens hier.
Und nun das Banner (genau wie der Hintergrundstreifen als jpg):
Diese Bilder werden direkt in den header geladen, müssen aber referenziert werden. Das heißt der Pfad zum späteren Template-Ordner muss angegeben werden. Da wir den aber noch wissen, benutzen wir einen php-Verweis:
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="Logo" />
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/banner.jpg" alt="Banner" />
Damit das Logo auch gleichzeitig als Home-Button genutzt werden kann, wird noch ein Hyperlink auf die Grafik gelegt:
<a href="<?php echo $this->baseurl ?>"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="Logo" /></a>
4. Schriftenarten und -farben festlegen
Diese Formatierung kann sehr umfangreich werden, daher versuche ich es erstmal auf nötigste zu reduzieren.
Festlegung der Schriftfamilie, größe und -farbe allgemein:
body {
font-family:Arial, sans-serif;
font-size:12px;
color:#120a01;
line-height:135%;
}
Größe der Überschriften
h1 {font-size:20px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
a {
text-decoration:none;
color:#120a01;
font-style:italic;
}
Formatierung von Hyperlinks in der Navigation
#nav a {
font-size:14px;
font-style:normal;
font-weight:bold;}
Formatierung der Liste in der Navigation (keine Aufzählungszeichen)
#nav ul li{
list-style-type:none;
line-height:145%;
}
Anlegen einer Klasse für die Formatierung der Breadcrumbs
.breadcrumb {
color:#708234;
font-size:8px;
text-decoration:none;
}
5. Definition der Hintergrundfarben der einzelnen Boxen
Nun fehlen noch die Farben für den Inhaltsbereich, den Header und den Footer:
Inhalt und Seitenbereiche haben die gleiche Hintergrundfarbe - wir können sie demnach auch über den Wrap einfärben. Kopf und Fuss der Seite legen sich farblich dann darüber.
#wrap {
width: 960px;
min-height:650px;
margin: 0 auto;
box-shadow: 3px 3px 5px #333333,
-3px -3px 5px #333333;
background-color:#c2ad51;
}
#header {background-color:#ba5d22; }
#footer {
padding: 10px 0;
clear: both; /* Diese clear-Eigenschaft bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
background-color:#34362c;
}
Den bisherigen Code und die Bilder kann man hier als "zip-Datei" runterladen. Die Datei ist mit Mac erstellt. Windows-Nutzer erhalten womöglich beim Entpacken Dateien mit vorangestelltem "." - diese können gelöscht werden.
Demnächst geht es dann mit der Joomla-Template-Installation weiter. Dafür müssen wir die einzelnen Dateien zusammenstellen und eine XML-Konfiguration-Datei anlegen. Diese dient dann als Installationsanweisung für Joomla. Also weiter geht's ->