| Weitere Artikel aus dem Webentwickler Blog |
| Teilen |  |
 |
 |
Im letzten Beitrag haben wir die Hintergrundfarbe und die Schriftart unseres Templates verändert. In diesem Text wollen wir uns dem Header, also dem Kopfbereich unserer Webseite, zuwenden. Wir verwenden nach wie vor das Template wm_01_j15 als Beispiel und betrachten uns den Header dieses Templates etwas genauer:
Für unseren Geschmack ist das Bild im Header zu hoch. Momentan beträgt die Höhe 251 Pixel. Für unseren Geschmack ist es jedoch angenehmer, die Höhe um etwa ein Fünftel auf 200 Bildpunkte zu verringern. Auch dafür müssen wir die Datei template.css manipulieren. Es genügt allerdings noch nicht, die Höhe in der CSS-Datei auf 200px zu verkleinern. Das Bild selbst ist 251px hoch. Das bedeutet, wir müssen das Bild in einem Bildbearbeitungsprogramm auf 200px verkleinern oder schneiden. Anschließend wird das bearbeitete Bild wieder im Ausgangsverzeichnis gespeichert. Die Header-Bilddatei liegt im Verzeichnis: /templates/wm_01_j15/images.
Position des Header-Bildes und der Höhe (200px)
#header {
height: 251px;
background: url (../header_bg.jpg) no-repeat left top;
margin: 0 auto;
width: 820px;
padding: 15px 10px 0 0;
}
Die Höhe des Header-Bildes soll auf 200px verringert werden. Dazu tragen wir in die betreffende Zeile (height:) den neuen Wert von 200 Bildpunkten ein. Der neue Header-Abschnitt in der CSS-Datei sieht wie folgt aus:
#header {
height: 200px;
background: url (../header_bg.jpg) no-repeat left top;
margin: 0 auto;
width: 820px;
padding: 15px 10px 0 0;
}
Und hier die angepasste Header-Grafik: 
Dies hat alles wunderbar geklappt. Was stört noch am Template? Der dunkle Rahmen um die Webseite sieht nach Trauer aus und das wollen wir nicht. Wir wollen eine lebendige Seite. Die Rahmenfarbe des Templates ist im CSS-Abschnitt #page_bg hinterlegt:
#page_bg {
width: 940px;
height: 100%;
padding: 10px;
margin: 0 auto;
background: #454851;
}
Die dunkle Rahmenfarbe ist in der Zeile background: #454851 festgelegt. Ändern wir diese Hexadezimalzahl im Joomla oder in einem Editor zu #ffffff ab. Der veränderte Abschnitt lautet dann folgendermaßen:
#page_bg {
width: 940px;
height: 100%;
padding: 10px;
margin: 0 auto;
background: #ffffff
}
Hier das Ergebnis. Zunächst der alte Seitenrand ... 
... der nun durch einen freundlicheren hellen Rand ersetzt wurde. 
Der Textabschnitt wurde dem Buch “Joomla! für Profis” von Stephan Brey entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.
Stephan Brey
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
