Joomla! 2.5 (Teil 29): Die Ausgabe der Module anpassen

Viele Inhalte werden in Joomla! als Module ausgegeben. Das betrifft beispielsweise Menüs, das Login-Formular und die Suchfunktion. Joomla! weist diesen Modulen von Hause aus bestimmte CSS-Klassen und IDs zu. Über diese Klassen und IDs lassen sich diese Module mittels CSS formatieren. Wie ihr die verwendeten Klassen und IDs ermitteln könnt, wurde bereits gezeigt. Jetzt geht es darum, wie ihr durch den Einsatz sogenannter Suffixe die Ausgabe der Module noch individueller gestalten könnt.

Wir empfehlen:
Joomla!-Training

Joomla! stattet die einzelnen Elemente automatisch mit CSS-Klassen und/oder -IDs aus. Dabei geht Joomla! nach einem denkbar einfachen Prinzip vor: Elemente des gleichen Typs bekommen standardmäßig dieselben Klassen und IDs zugewiesen. Dadurch sehen beispielsweise sämtliche Menüs einer Seite zunächst einmal gleich aus. Das ist praktisch, schließlich muss man dadurch nur wenige Klassen anpassen, um das Aussehen der Menüs zu verändern.

Problematisch wird das Ganze jedoch, wenn einzelne Module individuell gestaltet werden sollen. In diesem Fall kommen die Modulklassensuffixe ins Spiel. Das betreffende Feld ist euch vielleicht schon aufgefallen. Ruft dazu über Erweiterungen>Module ein entsprechendes Modul auf. Interessant ist im Bereich Erweiterte Optionen das Feld Modulklassensuffix.

 

Über dieses Feld könnt ihr Modulen ein Suffix zuweisen. Und genau darüber lässt sich dann dieses Modul individuell formatieren. Was aber hat es eigentlich mit einem solchen Suffix auf sich? Angenommen, einem Modul wird von Joomla! automatisch die CSS-Klasse menu zugewiesen. Wenn ihr nun in das Feld Modulklassensuffix den Wert _haupt eintragt, wird daraus im Frontend menu_haupt. Das Suffix wird also dem Klassennamen angehängt.

Praktisch ist das Ganze beispielsweise, wenn ihr die Überschriften der Menü-Module verändern wollt, die Überschriften der anderen Module aber unangetastet bleiben sollen.

Wie die Suffixe angehängt werden, hängt dabei übrigens auch davon ab, wie man die Module einbindet. So kann man nämlich im Template selbst den Stil des Moduls bestimmen. (Mehr dazu dann in den reinen Template-Tutorials).

Wird der Stil xhtml verwendet, sieht eine Modulausgabe folgendermaßen aus:

<div class="djmodule" id="Mod16">
<div class="moduleIn">
<h3 class="title">Anmeldung</h3>
...
</div>

Wenn jetzt in das Feld Modulklassensuffix der Wert _neu eingetragen wird, ergibt sich daraus folgendes Bild:

<div class="djmodule_neu" id="Mod16">
<div class="moduleIn">
<h3 class="title">Anmeldung</h3>
...
</div>

Eine andere Möglichkeit zur individuellen Formatierung besteht darin, mehrere CSS-Klassen zuzuweisen. Dazu trägt man den gewünschten Klassennamen in das Suffix-Feld ein, lässt davor aber ein Leerzeichen stehen.

<div class="moduletable blau">
<h3>Anmeldung</h3>
...
</div>

 

In diesem Fall werden zwei Klassen angewendet, einmal moduletable und einmal blau.

Diese beiden Klassen können wie gewohnt in den CSS-Dateien formatiert werden.

 

Wenn ihr euch innerhalb der Moduleinstellungen eines Menüs den Bereich Erweiterte Optionen anseht, fällt euch dort neben dem Feld Modulklassensuffix auch noch das Feld Menü-Tag-ID auf.

Die folgende Syntax zeigt, was es mit diesem Feld auf sich hat:

<div class="djmodule modulklassensuffix" id="Mod23"> 
<div class="moduleIn"> <h3 class="title">Über Joomla!</h3> 
<div class="module-content clearfix">                                
<ul class="menu" id="menu-tag-id">
...

Joomla! weist diese Tag-ID also dem umgebenden ul-Element des Menüs zu. Somit kann auch dieses Element explizit anders als andere Menüs formatiert werden.

 

Menüs anpassen

Das Umgestalten der Ausgabe von Modulen lässt sich am besten anhand von Beispielen zeigen. Dazu wird an dieser Stelle auf ein Menü zurückgegriffen.

 

Zunächst soll die Überschrift dieses Menüs angepasst werden. Um die Ausgabe zu beeinflussen, muss man zunächst herausfinden, wie die entsprechende CSS-Klasse heißt. Hier hilft ein Blick in den im Frontend generierten Quellcode:

<div class="djmodule" id="Mod23">
    <div class="moduleIn">
      <h3 class="title">Über Joomla!</h3>
      <div class="module-content clearfix">
        <ul class="menu">
          <li class="item-437"><a href="/joomla25/index.php/erste-schritte" >Erste Schritte</a></li>
          <li class="item-280 parent"><a href="/joomla25/index.php/joomla-nutzen" >Joomla! nutzen</a></li>
          <li class="item-278"><a href="/joomla25/index.php/das-joomla-projekt" >Das Joomla!-Projekt</a></li>
          <li class="item-279"><a href="/joomla25/index.php/die-joomla-community" >Die Joomla!-Community</a></li>
        </ul>
      </div>
    </div>
  </div>

Der generierte Quellcode sieht bei euch möglicherweise etwas anders aus. Das hängt letztendlich auch vom eingesetzten Template ab. So wurde im gezeigten Beispiel das Template jm-0013 verwendet. Wer beispielsweise das Beez-Template einsetzt, wird in etwa folgenden Quellcode vorfinden:

<div class="left1 leftbigger" id="nav">
  <div class="moduletable">
    <h3><span class="backh"><span class="backh2"><span class="backh3">
    Über Joomla!</span></span></span></h3>
    <ul class="menu">
      <li class="item-437"><a href="/joomla25/index.php/erste-schritte" >
      Erste Schritte</a></li>
      <li class="item-280 parent"><a href="/joomla25/index.php/joomla-nutzen" >
      Joomla! nutzen</a></li>
      <li class="item-278"><a href="/joomla25/index.php/das-joomla-projekt" >
      Das Joomla!-Projekt</a></li>
      <li class="item-279"><a href="/joomla25/index.php/die-joomla-community" >
      Die Joomla!-Community</a></li>
    </ul>
  </div>

 

Wenn ihr ein Element umgestalten wollt, solltet ihr euch vorher unbedingt den im Frontend generierten Quellcode ansehen.

Für die Umgestaltung des Menüs wurde im aktuellen Fall das Modulklassensuffix _menu angegeben. Im Frontend bewirkt das folgenden Code:

<div class="djmodule_menu" id="Mod23">
  <div class="moduleIn">
  <h3 class="title">Über Joomla!</h3>

Im ersten Schritt soll die Überschrift (h3) des Menüs (djmodule_menu) angepasst werden. Das geschieht über folgende CSS-Syntax:

div.djmodule_menu h3 {
     color: #000;
     font-size:18px;
     font-variant:small-caps;
  }

Das Ergebnis lässt sich durchaus sehen:

 

Sollte die CSS-Definition nicht greifen, liegt das an einem (gewollten?) Fehler im Template. Denn dort wird zwischen Klassenname und Suffix ein Leerzeichen eingefügt.

<div class="djmodule _menu" id="Mod23">

Sollte das bei euch auch so aussehen, müsst ihr die Syntax folgendermaßen anpassen:

div.djmodule._menu h3 {
     color: #000;
     font-size:18px;
     font-variant:small-caps;
  }

Gezielt auf einzelne Module zugreifen

Das Modul wurde wie gewünscht angepasst. Das Problem dabei: Die CSS-Definition greift gleich für alle Menüs, denen das Suffix zugewiesen wurde. Was aber, wenn tatsächlich nur ein Menü optisch verändert werden soll? Auch das ist natürlich möglich. Werft dafür wieder einen Blick in den Quellcode der Seite.

<div class="djmodule " id="Mod23">
  <div class="moduleIn">
  <h3 class="title">Über Joomla!</h3>
   <div class="module-content clearfix">
        <ul class="menu">
       <li class="item-437"><a  href="/joomla25/index.php/erste-schritte" >
       Erste Schritte</a></li>
       <li class="item-280 parent"><a href="/joomla25/index.php/joomla-nutzen" >
       Joomla! nutzen</a></li>
       <li class="item-278"><a href="/joomla25/index.php/das-joomla-projekt" >
       Das Joomla!-Projekt</a></li>
          <li class="item-279"><a href="/joomla25/index.php/die-joomla-community" >
       Die Joomla!-Community</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="djmodule _menu" id="Mod26">
  <div class="moduleIn">
    <h3 class="title">Diese Site</h3>
    <div class="module-content clearfix">
      <ul class="menu">
        <li class="item-435 current active"><a href="/joomla25/" >Home</a></li>
        <li class="item-294 parent"><a href="/joomla25/index.php/sitemap" >Sitemap</a></li>
        <li class="item-233"><a href="/joomla25/index.php/anmeldung" >Anmeldung</a></li>
        <li class="item-238 parent"><a href="/joomla25/index.php/beispielseiten" >Beispielseiten</a></li>
        <li class="item-448"><a href="/joomla25/administrator" target="_blank" >Administrator</a></li>
        <li class="item-455"><a href="/joomla25/index.php/joomla-nutzen/erweiterungen-anwenden/komponenten" >Beispiele</a></li>
      </ul>
    </div>
  </div>

Den beiden Menüs wurden von Joomla! automatisch zwei verschiedene IDs zugewiesen. Anhand dieser IDs lässt sich tatsächlich jedes Menü ganz individuell gestalten, da jede ID dokumentweit eindeutig ist, also nur ein Mal existiert.

Will man das Menü mit der ID Mod23 umgestalten, sieht die Syntax folgendermaßen aus:

div#Mod23.djmodule_menu h3 {
     color: #000;
     font-size:18px;
     font-variant:small-caps;
}

Auf diese Weise könnt ihr also wirklich jedes von Joomla! automatisch generierte Element euren eigenen Wünschen entsprechend anpassen. Entscheidend ist dabei lediglich, dass ihr euch immer den im Frontend generierten Quellcode der Seite anseht. Tatsächlich ist es nämlich so, dass viele Templates mittels sogenannter Overrides die Standardausgabe von Joomla! überschreiben und so beispielsweise völlig andere Klassen und IDs verwenden. Und das lässt sich eben am einfachsten über den generierten Frontend-Quellcode herausfinden.

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