Joomla!-Templates nach Maß

In den vorherigen Tutorials wurde bereits gezeigt, an welchen Schrauben man in Joomla! drehen kann, um die Standard-Templates individueller gestalten zu können. Wer sich mit seiner Joomla!-Seite noch etwas mehr von der Masse abheben will, der muss allerdings tiefer in die Joomla!-CSS-HTML-Thematik einsteigen. Den Grundstein dafür legt dieses Tutorial.

Wir empfehlen:
Joomla!-Training

Bevor es losgeht, noch ein paar Worte zum Schwierigkeitsgrad und zur Herangehensweise: Es gibt verschiedene Möglichkeiten, Joomla!-Templates anzupassen. Für welche Sie sich entscheiden, hängt davon ab, wie sehr Sie sich in Joomla! und HTML/CSS einarbeiten wollen.

  • Im einfachsten Fall nutzt man die Template-Parameter. Über die kann man mit ein paar wenigen Mausklicks das Design seiner Seite anpassen.
  • Wenn es etwas mehr sein soll, muss man selbst in den Quelltext des Templates eingreifen. Dafür werden dann aber mindestens Grundkenntnisse in HTML/CSS benötigt.

Beide Varianten werden in diesem Tutorial vorgestellt.

Template-Parameter nutzen

Los geht es mit den Template-Parametern. Das Design des Joomla!-Standard-Templates kennen Sie.

Ändert man nun einen der innerhalb dieses Templates angebotenen Template-Parameter, wirkt die gleiche Seite plötzlich völlig anders.

Der Effekt ist erstaunlich. Allerdings muss gleich etwas auf die Euphorie-Bremse getreten werden. Denn leider arbeiten längst nicht alle Templates mit Template-Parametern. Aber dort wo sie verfügbar sind, stellen sie eine gute Gestaltungsmöglichkeit dar. Einsetzen lassen sich die Parameter denkbar einfach. Dazu rufen Sie Erweiterungen/Templates auf und klicken auf den betreffenden Parameter-Namen. Interessant ist nun der Bereich Parameter.

Über die angebotenen Auswahlfelder können die Parameter eingestellt werden. Experimentieren Sie hier ruhig etwas mit den verfügbaren Optionen.
Interessant für alldiejenigen, die später selbst Templates mit Parametern ausstatten wollen, ist die Frage, wie diese eigentlich im Hintergrund arbeiten. Sieht man sich den Quelltext der Seite der Template-Datei an, findet man im <head>-Bereich unter anderem die folgenden Aufrufe:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/<?php echo $this->params->get('backgroundVariation'); ?>_bg.css" />


Darüber werden die CSS-Dateien für die verschiedenen Farbvariationen und die Hintergrundfarben geladen. Anstelle der tatsächlichen Dateinamen findet man dort allerdings jeweils PHP-Anweisungen. Im Frontend werden diese dann durch die eigentlichen Dateinamen ersetzt. Ein generierter Quelltext – wenn als Farbvariation Rot und als Hintergrundvariante Grün gewählt wurde – könnte folgendermaßen aussehen:

<link rel="stylesheet" href="/joomla/templates/rhuk_milkyway/css/red.css" type="text/css" />
<link rel="stylesheet" href="/joomla/templates/rhuk_milkyway/css/green_bg.css"
type="text/css" />

Template-Parameter bieten also durchaus gute Gestaltungsmöglichkeiten.

Direkt ins Stylesheet eingreifen

Nicht immer reichen die Möglichkeiten der Template-Parameter aus. Nun könnte man natürlich frustriert das Handtuch werfen und sich mit den Gegebenheiten abfinden. Mit etwas HTML- und CSS-Grundwissen, kann man die Templates aber auch von Hand anpassen.

An dieser Stelle ein wichtiger Hinweis: Da Sie in die Original-CSS-Datei des Templates eingreifen, sollten Sie diese unbedingt vor den Anpassungen sichern. So können Sie, wenn Sie mit dem Ergebnis der Modifikationen nicht zufrieden sind, ruck zuck den Originalzustand wiederherstellen. Im aktuellen Beispiel wird mit der template.css des Standard-Templates gearbeitet. Zu finden ist die unter joomla emplates huk_milkywaycss.

Wie einfach sich Templates anpassen lassen, wird hier anhand von RHUK Milkyway gezeigt. Das allgemeine Vorgehen lässt sich so aber natürlich auch auf jedes andere Template übertragen. Um die CSS-Syntax anzupassen, rufen Sie Erweiterungen/Templates auf, klicken auf den Template-Namen und in der Werkzeugleiste auf CSS bearbeiten.

Dort wählen Sie die CSS-Datei aus, die bearbeitet werden soll. Im aktuellen Beispiel ist das die Standard-CSS-Datei template.css. Markieren Sie die vor diesem Namen angezeigte Radio-Box und wählen Sie aus der Werkzeugleiste Bearbeiten.

Zunächst einmal sollen die allgemeinen Seiteneigenschaften angepasst werden. Verantwortlich für diese ist alles, was innerhalb der body-Definition steht. Standardmäßig sieht die nun folgendermaßen aus:

body {
   font-family: Helvetica,Arial,sans-serif;
   line-height: 1.3em;
   margin: 0px 0px 0px 0px;
   font-size: 12px;
   color: #333;
}

Innerhalb dieses Bereichs können die folgenden Eigenschaften modifiziert werden:

  • Schriftart (font-family)
  • Linienhöhe (line-height)
  • Randabstände (margin)
  • Schriftgröße (font-size)
  • Schriftfarbe (color)

Das ist doch schon eine ganze Menge. Wie sich mit wenigen Anpassungen das Design der Seite ändern lässt, zeigt die folgende Syntax:

body {
   font-family: Verdana,Arial,sans-serif;
   line-height: 1.3em;
   margin: 0px 0px 0px 0px;
   font-size: 15px;
   color: red;
}

Hier wurden einfach die Werte für die Schriftart, die Schriftgröße und die Schriftfarbe geändert. Ein Blick ins Frontend zeigt, was das gebracht hat.

Natürlich waren das nur erste zaghafte Änderungen. Weiter geht es mit den Hyperlinks. Denn auch diese lassen sich problemlos anpassen. Insgesamt existieren CSS-Definitionen für drei Link-Varianten:

  • Normale Links (a:link)
  • Bereits besuchte Links (a:visited)
  • Hover-Links (a:hover)

Was normale und bereits besuchte Links sind, dürfte klar sein. Für Verwirrung sorgt erfahrungsgemäß aber oftmals der Begriff Hover-Links. Dabei handelt es sich um den Link-Zustand, wenn der Besucher mit dem Mauszeiger über den Hyperlink fährt. Auch hierzu wieder die Originalsyntax:

a:link, a:visited {
   text-decoration: none;
   font-weight: normal;
}
a:hover {
   text-decoration: underline;
   font-weight: normal;
}

Was diese CSS-Eigenschaften bewirken, zeigt ein Blick ins Frontend. Standardmäßig sehen Links dort nämlich folgendermaßen aus:

Hier eine Zusammenfassung davon, wie Hyperlinks standardmäßig innerhalb des Templates RHUK Milkyway aussehen bzw. behandelt werden:

  • Normale und bereits besuchte Links werden nicht unterstrichen.
  • Hover-Links werden unterstrichen. Die Unterstreichung verschwindet wieder, sobald der Mauszeiger den Link nicht mehr berührt.

Das also ist die Ausgangssituation. Die ist gut, aber natürlich überall gleich. Mit etwas Phantasie und ein wenig CSS-Know-how kann man aber beispielsweise auch folgendes erreichen:

  • Bereits besuchte Links werden durchgestrichen.
  • Links, über die gerade mit dem Mauszeiger gefahren wird, erhalten einen Oberstrich.
  • Normale Links werden mit einem Unterstrich angezeigt.

Damit das wie gewünscht klappt, müssen ein paar Anpassungen an der CSS-Datei vorgenommen werden. Zunächst einmal die neue Syntax:

//normale Links
a:link {
   text-decoration: underline;
   font-weight: normal;
}
//bereits besuchte Links
a:visited {
   text-decoration: line-through;
   font-weight: normal;
}
//Hover-Links
a:hover {
   text-decoration: overline;
   font-weight: normal;
}

Sie sehen, dass die Definitionen für normale und besuchte Hyperlinks getrennt wurden. Um dafür zu sorgen, dass normale Links unterstrichen angezeigt werden, wird text-decoration: underline; angegeben.
Für durchgestrichene Links verwenden Sie text-decoration: line-through;. Und zu guter Letzt wird dann noch den Hover-Links die Eigenschaft text-decoration: overline; zugewiesen, wodurch "Überstreichungen" erreicht werden.
An dieser Stelle noch einmal der Hinweis: Es ist wichtig, dass Sie die Änderungen an der richtigen CSS-Datei vornehmen. Wer also beispielsweise bei den Template-Parametern die Blau-Variante gewählt hat, muss auch die blue.css bearbeiten. Wichtig ebenfalls: Um mit dem Template später Live an den Start zu gehen, müssen ggf. Änderungen gleich an mehreren CSS-Dateien vorgenommen werden.

Sie haben gesehen, mit wie wenig Aufwand sich das Standard-Design des Templates anpassen lässt. Wie weit Sie die Anpassungen vorantreiben, bleibt letztendlich Ihnen überlassen. Möglich ist aber in jedem Fall über diesen Weg ein komplettes Re-Design der Seite.

 

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