Joomla! 2.5 (Teil 28): Vorhandene Templates anpassen

Wenn ihr vorhandene Templates umgestalten wollt, kommt ihr um den Einsatz von CSS in aller Regel nicht herum. In diesem Tutorial erfahrt ihr, wie ihr auf die CSS-Eigenschaften von Templates zugreifen könnt, wie sich zusätzliche CSS-Dateien einbinden lassen und wie sich so jedes beliebige Element einer Joomla!-basierten Webseite verändern lässt.

Wir empfehlen:
Joomla!-Training

Um euch zu zeigen, wie sich ein vorhandenes Template anpassen lässt, wird auf das Template jm-0013 zurückgegriffen, das kostenlos von der Seite http://www.vorlagenstudio.de/joomla-templates/gratis/jm-0013-joomla-1-7 heruntergeladen werden kann. Entpackt das heruntergeladene Archiv. Nach dem Entpacken liegen im Verzeichnis zwei Zip-Archive. Installiert anschließend über das Backend das Archiv jm-0013.zip. Das installierte Template kann nun als Standard eingestellt werden.

Ruft anschließend Erweiterungen>Templates auf und wechselt ins Register Templates. Dort klickt ihr auf Jm-0013 Details und Dateien.

 

Das öffnet eine Übersicht, in der alle relevanten Dateien aufgeführt sind, die zum Template gehören.

 

Werft zunächst einen Blick in den Bereich Template Hauptdateien. Beim Template jm-0013 findet ihr dort zwei Dateien.

Hauptseite bearbeiten – das ist die Seite, die für die Anzeige im Frontend verantwortlich ist.
Druckseite bearbeiten – diese Datei wird verwendet, wenn die Seite über die Druckfunktion des Browsers ausgedruckt werden soll.

Im rechten Fensterbereich seht ihr eine Übersicht der zum Template gehörenden Stylesheet-Dateien.

Welche Dateien hier tatsächlich aufgeführt sind, variiert stark von Template zu Template. Prinzipiell gibt es aber zwei CSS-Dateien, die in jedem Template zu finden sind bzw. zu finden sein sollten.

template.css – das ist die allgemeine Template-Datei. Üblicherweise sind darin die wichtigsten CSS-Eigenschaften definiert.
template_rtl.css – das ist die CSS-Datei, die den Fall einer umgekehrten Schriftrichtung abdeckt. Interessant ist das beispielsweise für arabisch-sprachige Seiten, auf denen die Schrift von rechts nach links läuft.

 

Um Änderungen am Template vorzunehmen, gibt es prinzipiell immer zwei Möglichkeiten.

• Man bearbeitet die vorhandenen CSS-Dateien des Templates.
• Man legt eine zusätzliche CSS-Datei an.

Bei der ersten Variante muss man zunächst einmal herausfinden, wo die betreffenden CSS-Anweisungen stehen. Schwierig wird das vor allem, da in den meisten Templates die CSS-Eigenschaften für ein Element auf verschiedene Dateien aufgeteilt sind. Oftmals bietet sich daher die zweite Variante an. Entscheidend ist dabei dann, dass diese als letzte CSS-Datei eingebunden wird. Damit überschreiben die in dieser Datei enthaltenen CSS-Eigenschaften die Eigenschaften der anderen Dateien. Genau diese Variante wird hier vorgestellt.

Zunächst muss die zusätzliche CSS-Datei natürlich eingebunden werden. Dreh- und Angelpunkt der Template-Dateien ist die index.php, die im Stammverzeichnis des Templates liegt. Öffnet diese Datei in einem Editor.

Eingebunden werden die CSS-Dateien üblicherweise im head-Element der Seite. Ein solcher Bereich könnte folgendermaßen aussehen:

<link href="<?php echo $dj_path;?>css/layout.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $dj_path;?>css/reset.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $dj_path;?>css/modules.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $dj_path;?>css/template.css" rel="stylesheet" type="text/css" />

Beim aktuellen Template ist das jedoch nicht der Fall. Anstelle der üblichen link-Elemente ist dort Folgendes zu sehen:

<?php
  // including template header files
  include_once (JPATH_ROOT."/templates/".$this->template.'/lib/
  php/dj_head.php');
?>

Offensichtlich wird anstelle der gesuchten CSS- eine PHP-Datei eingebunden. Diese Datei liegt im Verzeichnis lib/php. Öffnet diese ebenfalls in einem Editor. Sucht innerhalb dieser Datei nach folgender Passage:

<!--[if IE 7]>
  <?php if($direction == 'rtl'): ?>
  <link href="<?php echo $dj_path;?>css/ie7_rtl.css" rel="stylesheet" type="text/css" />
  <?php endif; ?>
<![endif]-->

 

Direkt darunter wird nun folgender Eintrag hinzugefügt:

<link href="<?php echo $dj_path;?>css/personal.css" rel="stylesheet" type="text/css" />

Durch diese Zeile wird die Datei personal.css nach allen anderen CSS-Dateien eingebunden. Die in der personal.css stehenden Anweisungen überschreiben damit alle anderen CSS-Eigenschaften. Damit die Datei greift, muss sie im Verzeichnis css des Templates angelegt werden. Ohne weitere Anpassungen sieht das Template folgendermaßen aus:

 

Elemente umgestalten

Prinzipiell könnt ihr jetzt loslegen mit der Umgestaltung des Templates. Stellt sich natürlich die Frage, wie sich die Elemente des Templates umgestalten lassen. Zunächst muss man herausfinden, welche CSS-Klassen und –IDs Joomla! für die einzelnen Elemente verwendet. Das lässt sich am besten über entsprechende Tools ermitteln. Wer mit Google Chrome arbeitet, kann dafür die Entwicklertools einsetzen, die im Browser über das Werkzeugsymbol und den Eintrag Tools erreichbar sind. Wenn ihr die Entwicklertools öffnet, ist dort vor allem der Bereich Elements interessant.

 

Darüber lassen sich die gewünschten Elemente auswählen. Die Entwicklertools zeigen daraufhin im rechten Fensterbereich die vom aktuellen Element verwendeten Klassen und IDs an. Klickt dazu das gewünschte Element an.

 

In diesem Zusammenhang noch ein Hinweis zum Unterschied zwischen Klassen und IDs. Ein Element, das mit einer ID gekennzeichnet wurde, darf innerhalb des Dokuments lediglich einmal vorkommen. Zu erkennen sind IDs anhand des gleichnamigen Attributs.

<p id="einfuehrung">
Inhalt
</p>

Will man ein solches Elements mittels CSS formatieren, wird innerhalb der CSS-Definition vor den ID-Namen ein Rautezeichen gesetzt:

#einfuehrung { color: green; }

Klassen werden hingegen immer dann verwendet, wenn ein Element einer Gruppe zugeordnet werden soll. Im HTML-Code erkennt man Klassenzuweisungen am class-Attribut:

<p class="blau">
Inhalt
</p>

Um Klassen zu formatieren, wird vor dem Klassennamen ein Punkt angegeben:

.blau { color: green; }

Mit diesem Wissen ausgestattet, kann man nun sämtliche Elemente Joomla!-basierter Webseiten umgestalten. Wie einfach sich so etwas umsetzen lässt, kann man sehr schön anhand eines Beispiels zeigen. Dabei werden die allgemeinen Seiteneigenschaften angepasst. Die betreffenden Eigenschaften sind innerhalb der layout.css hinterlegt. Verantwortlich sind die darin enthaltenen Definitionen body und all. Diese Definitionen sehen folgendermaßen aus:

body {

  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}
#all {
  font-size: 12px;
  line-height: 20px;
  text-align: left;
}

 

Angenommen, ihr wollt das Schriftbild der Seite verändern. Öffnet dazu die momentan noch leere personal.css und fügt dort folgende Passage ein:

body {
  font-family:Verdana, Arial, Helvetica, sans-serif;
}
#all {
  font-size: 14px;
  color: #999;
}

Hier werden eine neue Schriftart, Schriftgröße und Schriftfarbe definiert. Ein anschließender Blick ins Frontend der Seite liefert folgendes Ergebnis:

 

Auf diese Weise können sämtliche Elemente der Seite angepasst werden. Entscheidend ist dabei allerdings immer, dass die neuen CSS-Definitionen immer als Letztes eingebunden werden.

Fazit

Dieses Tutorial hat euch gezeigt, wie einfach sich vorhandene Templates auf Basis von CSS-Definitionen anpassen lassen. Das ist dann auch gleich die Vorstufe dessen, was euch im weiteren Verlauf dieser Tutorial-Reihe erwartet. Dann geht es nämlich um die Entwicklung eigener Templates. Und spätestens dann werden euch CSS-Klassen und –IDs wieder begegnen.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Joomla! für Einsteiger und Aufsteiger

Joomla! für Einsteiger und Aufsteiger

Was liegt wo und ist wie, mit welchem Inhalt verknüpft?! Nach diesem Kurs ist das keine Frage mehr! Mit Joomla! erstellst du Webseiten und behältst deren Inhalte jederzeit im kontrollierenden und koordinierenden Blick.

  • 28 Lektionen in über fünf Stunden Video-Training zum praktischen Umgang mit Joomla!
  • Lerne das CMS von Grund auf kennen und verwalte damit deine redaktionellen Webseiten-Inhalte
  • Praxisnah lernen: inklusive Arbeitsmaterialien zum Mitmachen und Nachvollziehen
  • Auf dem neuesten Stand: Optimiert für die aktuelle Joomla!-Version 3.6

Zum Training