| Weitere Artikel aus dem Webentwickler Blog |
| Teilen |  |
 |
 |
Joomla ist grundsätzlich ein Content-Management-System, welches Inhalte bereitstellt und kontrolliert. In gewisser Weise ist Joomla die Kombination von Content, der von einer Datenbank geliefert wird, mit der gestalterischen und bedienbaren Formgebung, für die die sogenannten Templates zuständig sind. Die Datei template.css schreibt vor, wie die Gestaltung des Templates aussehen soll. In unserem Fall gibt es eine Datei template.css, die für die Gestaltung sorgt.
Manche Templates haben sogar mehr als eine solche Stylesheet-Datei. Die fundamentalen Vorgaben in der template.css sind zum Beispiel die Schriftarten, die Hintergrundfarbe und die Höhe sowie die Breite des Templates. In dieser umfangreichen Datei sind eine Menge Informationen gespeichert; der gesamte Code der template.css kann um die 20 Seiten und mehr umfassen.
Das Template wm_01_j15 ist eine gute Vorlage für die eigene Templateerstellung, weil bereits alle wichtigen Module vorinstalliert sind, sowohl ein linker als auch ein rechter Seitenbereich existiert und sich die Grafiken relativ leicht ersetzen bzw. editieren lassen. Wenn das Template heruntergeladen und importiert wurde, befindet es sich im Verzeichnis /templates/ wm_01_j15.
Für ist an dieser Stelle erst einmal die Datei template.css interessant. Hierüber erfolgt die Anpassung des neuen Templates. Zu Anfang sieht das Original-Template wie in der Abbildung unten aus. Dabei ist schön zu erkennen, wie Joomla die Positionen für die Module farblich festlegt. Um diese Ansicht zu erhalten, wählen Sie das Template im Backend-Menü Erweiterungen/Templates aus und klicken im Parametermenü auf den Vorschau-Button:
Die Schriftart
Uns interessiert zunächst die im Template verwendete Schriftart. In unserem Fall ist das die Schriftart Tahoma. Sollte auf Ihrem Rechner dieser Font nicht vorhanden sein, wird eine andere serifenlose Schrift wie z. B. die Verdana verwendet.
Der Abschnitt body der Datei ist folgendermaßen aufgebaut:
body {
background: #FEFEFE; Hintergrundfarbe
font-family: Tahoma, Arial, sans-serif; Schriftart
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}
Sehen wir einmal nach, was das bedeutet: Wenn wir die Schriftart Tahoma durch die Courier New ersetzen, sieht der body-Bereich der Datei wie folgt aus:
body {
background: #fefefe;
font-family: "courier new", Tahoma, Arial, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}
Und die Darstellung auf dem Bildschirm ändert sich:
Die Hintergrundfarbe
Vielleicht gefällt Ihnen die Hintergrundfarbe des Templates nicht. Im Augenblick wird sie in der template.css in der Zeile background durch den Hexadezimal-Wert #fefefe definiert. Das entspricht einer – sagen wir mal – weißlichen Hintergrundfarbe.
Ganzen Artikel lesen...
Stephan Brey
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
