Modulpositionen mit Bootstrap 2 ausrichten - Die magische Zwölf

Gridsystem?

Stellen Sie sich Ihre Webseite erst mal wie eine Tabelle gegliedert vor oder wie ein Raster. Sie haben Spalten (von oben nach unten) und Zeilen / Reihen (von links nach rechts). Und die einzelnen Zellen / Kästchen der Tabellenreihen können unter Umständen selber wieder kleinere Tabellen enthalten. Ich weiß den Deutschen Begriff nicht ("verschachtelt" ?) und spreche von "nested" Tabellen. Da gehe ich hier gar nicht weiter darauf ein.

Im Unterschied zu einer normalen Tabelle, die man nur schmaler und breiter ziehen kann, kümmert sich ein Gridsystem wie z.B. Bootstrap darum, dass die Zellen / Kästchen nicht zu schmal werden. Sie werden ab bestimmten Breiten, den so genannten Breakpoints, z.B. untereinander angeordnet statt nebeneinander und auf volle Bildschirmbreite gezogen. So sind die Zelleninhalte auch auf einem Smartphone noch lesbar. Man spricht von responsivem Verhalten.

Die beliebtesten Grid-Systeme arbeiten mit CSS-Klassen, um dieses Verhalten zu erreichen. Zwar bringen einige noch reichlich JavaScript mit, aber damit hat man im Normalfall nichts zu tun, wenn es nur um die Gliederung des Seitenlayouts geht.

Welches Bootstrap verwendet mein Template?

Bevor wir Sie mit diesem Tutorial auf's Glatteis führen: Grundlegend ist die "Denke" aller Grid-Systeme identisch, aber sie arbeiten mit unterschiedlichen CSS-Klassen, sowohl für die Reihen als auch die Kästchen der gedachten Tabelle. Bootstrap-Version 2 unterscheidet sich erheblich von Bootstrap-Version 3, was die Klassenbezeichner / Selektoren für die "Kästchen" einer Reihe anbelangt. Und viele fertige Templates greifen (meiner Meinung nach meist unnötigerweise) zusätzlich auf eigene CSS-Klassen zurück, die erheblich in das Gridsystem eingreifen.

Joomla 3.4.4 mit dem Standard-Template Protostar arbeitet noch mit Bootstrap 2. Viele andere Templates kommen mit Bootstrap 3 daher. In diesem Tutorial geht es um das derzeit aktuelle Protostar, also Bootstrap 2.

Neue Modul-Position anlegen

Nachdem wir uns eine Kopie des Protostar-Templates angelegt haben oder alternativ eine Testinstallation von Joomla zum Rumspielen (am besten mit Demodaten), legen wir eine neue Modulposition namens meine-neue-position an.

In der Datei /templates/protostar/templateDetails.xml (bzw. im Ordner Ihres kopierten Templates) fügt man eine neue Zeile ein. Am besten nur Kleinschrift, Zeichen a-z und 0-9, Bindestriche verwenden für den Positionsbezeichner..

...
 <positions>
  <position>meine-neue-position</position>
  <position>banner</position>
  <position>debug</position>
  <position>position-0</position>
  <position>position-1</position>
  <position>position-2</position>
  <position>position-3</position>
  <position>position-4</position>
  <position>position-5</position>
  <position>position-6</position>
  <position>position-7</position>
  <position>position-8</position>
  <position>position-9</position>
  <position>position-10</position>
  <position>position-11</position>
  <position>position-12</position>
  <position>position-13</position>
  <position>position-14</position>
  <position>footer</position>
 </positions>
...

Diese sieht man jetzt im Backend, wenn man in einem Modul eine Position auswählt. Legen Sie schon mal ein neues Modul vom Typ Eigene Inhalte an, bisschen Text eintippen, nicht zu kurz und wählen dann die neue Position. Als Titel des Moduls z.B. Meine neue Position - Modul 1.

Die neue Modulposition im Modulmamager auswählen

In der Datei /templates/protostar/index.php (bzw. im Ordner Ihres kopierten Templates) fügen wir ebenfalls eine neue Zeile ein. Vor den Marker / Kommentar  (bei mir ist das Zeile 188). Wichtig für dieses Tutorial ist dabei, dass die Zeile NICHT innerhalb eines DIV-Containers mit Klasse container oder container-fluid liegt. Das sind Bootstrap-Klassen, die wir hier auch erlernen müssen.

(Wenn Sie sich schwer tun in dem Wust, schieben sie die Zeile 13 des folgenden Codeblocks direkt vor dem schließenden </body>-Tag ganz am Ende der index.php rein.)

...
    <?php if ($this->countModules('position-7')) : ?>
     <div id="aside" class="span3">
      <!-- Begin Right Sidebar -->
      <jdoc:include type="modules" name="position-7" style="well" />
      <!-- End Right Sidebar -->
     </div>
    <?php endif; ?>
   </div>
  </div>
 </div>

<jdoc:include type="modules" name="meine-neue-position" style="html5" />

 <!-- Footer -->
 <footer class="footer" role="contentinfo">
  <div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
   <hr />
   <jdoc:include type="modules" name="footer" style="none" />
...

In Zeile 13 des Codeblocks die neue Zeile. Darum herum Zeilen, die in Protostar bereits vorhanden sind. In Zeile 17 ein Beispiel einer der o.g. container-Klassen. Je nach Einstellungen im Protostartemplate (Backend) wird daraus ein CSS-Selektor container oder ein container-fluid. Ich bevorzuge nebenbei das fluide Layout und mach mit dieser Protostar-Einstellung im Folgenden weiter. Probieren Sie die Unterschiede selber aus.

Protostartemplate Fluides oder statisches Layout

CSS-Klassen für das Layout (container und container-fluid)

Lädt man die Seite im Frontend, wird das Modul bereits angezeigt, aber sieht man genauer hin, ragt es links und rechts über die anderen Elemente der Seite hinaus. (Das mit senkrechten Strichen muss ich wohl noch üben.)

Modul ohne umschliessende container Klasse.

Aufpassen: Haben wir eine Fensterbreite kleiner 768 Pixel (einer der Bootstrap-2-Breakpoints), stimmen die Ränder. Also immer alles mit verschiedenen Breiten ausprobieren. Im Firefox-Browser gibt es ein Hilfswerkzeug unter Extras -> Web-Entwickler -> Bildschirmgrößen testen.

Wir legen einen speziellen DIV-Container um unsere Modulposition. Da ich mich oben für das Fluid-Layout entschieden habe, nehme ich die Klasse container-fluid

<div class="container-fluid">
<jdoc:include type="modules" name="meine-neue-position" style="html5" />
</div>

Oder spezifisch (nur) für das Protostar mit diesen Zeilen, wo das -fluid automatisch drangehängt wird, weil wir in den Template-Einstellungen Fluid gewählt haben.

<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
<jdoc:include type="modules" name="meine-neue-position" style="html5" />
</div>

Unser Block meine-neue-position wird jetzt links und rechts passend zum Rest eingerückt, auch oberhalb des Breakpoints 768. Sieht schon mal gut aus. Gute Gelegenheit, mal eben das -fluid zu entfernen, um zu sehen, was passiert. Das fluide Layout arbeitet auch zwischen den Breakpoints mit Prozenten. Das statische hat fixe "Breiten-Hüpfpunkte", mehr oder weniger Rand links und rechts bis zum nächsten Breakpoint.

Container.mit Klasse container oder container-fluid braucht man in einer Bootstrap-Webseite mindestens einen. Es sind auch mehrere erlaubt, die aber nicht verschachtelt sein sollten. Oder anders: Ohne diese Klassen wird es unnötig kompliziert. Man spricht gelegentlich auch von Layout-Klassen.

Zwischenergebnis

Wir sind jetzt schon fertig, wenn wir nicht mehr wollten als 1 einspaltige Reihe / Zeile mit 1 Modul über die volle Breite der Seite.

CSS-Klassen für Reihen (row und row-fluid)

Innerhalb der o.g. Container können wir jetzt eine oder mehrere Reihen / Zeilen definieren. Dafür verwenden wir eingenistete Container mit der CSS-Klasse row-fluid.

Angemerkt: Auch row ist möglich, sogar von Reihe zu Reihe unterschiedlich, aber sowohl in einem statischen als auch fluiden Layout ist row-fluid meist die passendere Wahl. Will man spielen, immer mit unterschiedlichen Bildschirmbreiten testen! Es kann böse Überraschungen geben.

Nur gelegentlich verwende ich row bei in Reihen eingenisteten Reihen. Beachten Sie dabei: row und row-fluid unterscheiden sich auch bei den Verschachtelungsregeln.

<div class="container-fluid">
 <div class="row-fluid">
  <jdoc:include type="modules" name="meine-neue-position" style="html5" />
 </div>
</div>

Hier der Code, um mal alle Varianten untereinander zu sehen. Das Modul wird mehrfach untereinander angezeigt.

<h6>Modul alleine</h6>
<jdoc:include type="modules" name="meine-neue-position" style="html5" />
 
<div class="container-fluid">
<h6>Nur container-fluid</h6>
  <jdoc:include type="modules" name="meine-neue-position" style="html5" />
</div>

<div class="container-fluid">
 <div class="row-fluid">
<h6>container-fluid und row-fluid</h6>
  <jdoc:include type="modules" name="meine-neue-position" style="html5" />
 </div>
</div>

<div class="container-fluid">
 <div class="row">
<h6>container-fluid und row</h6>
  <jdoc:include type="modules" name="meine-neue-position" style="html5" />
 </div>
</div>

<div class="container">
 <div class="row">
<h6>container und row</h6>
  <jdoc:include type="modules" name="meine-neue-position" style="html5" />
 </div>
</div>

Wenn man die Breite der Seite langsam ändert, stellt man fest, dass container und row bei manchen Breiten ganz links am Bildschirmrand klebt. Das meinte ich mit bösen Überraschungen und sorgfältig testen. Dieses Verhalten kann sich von Template zu Template unterscheiden.

War jetzt eher ein Exkurs. Machen wir weiter mit unseren fluiden Klassen. Das row-fluid innerhalb container-fluid hatte alleine noch keinen besonderen Effekt, aber es ist die Basis für die Kästchen, die gedachten Tabellen-Zellen, die nun folgen, besser "Spalten" (Columns).

CSS-Klassen für Spalten innerhalb einer Reihe (span1 bis span12)

Wir starten mit 1 Spalte, die die Hälfte der Reihe einnimt.

Innerhalb einer Klasse row-fluid sind 12 Spalten denkbar. So sieht das Bootstrap vor. Also soll unser Modul 6 Spalten davon abdecken. Dafür verwenden wir einen weiteren DIV-Container mit Klasse span6, den wir zusätzlich um unsere Modulposition drumherum legen.

<div class="container-fluid">
 <div class="row-fluid">
  <div class="span6">
   <jdoc:include type="modules" name="meine-neue-position" style="html5" />
  </div>
 </div>
</div>

Bei Bildschirmbreiten größer 767Pixel haben wir den gewünschten Effekt. Darunter löst das responsive CSS das Verhalten auf und zieht das Modul auf volle Breite auf.

Ersetzen Sie span6 durch andere Klassen von span1 bis span12.

Fügen Sie zusätzlich die bootstrap-2-spezifischen Klassen offset1 bis offset11 hinzu. Das Modul wird nach rechts verschoben.

<div class="span6 offset2">

Achten Sie immer darauf, dass die Zahl 12 nicht überschritten wird! Im letzten Code sind wir bei 8 (6 + 2).

Als nächstes 2 Spalten, jeweils halbe Breite:

<div class="container-fluid">
 <div class="row-fluid">

  <div class="span6">
   <jdoc:include type="modules" name="meine-neue-position" style="html5" />
  </div>

  <div class="span6">
   <jdoc:include type="modules" name="meine-neue-position" style="html5" />
  </div>

 </div>
</div>

Verändern sie die span-Werte, fügen Sie offset-Klassen hinzu oder weitere Spalten durch kopieren der span-Container. Einzige Beschränkung: In Summe immer 12 oder weniger innerhalb eines Containers row-fluid..

Das geht variabler mit Joomla. Backendsteuerung

Das Beispiel mit 2 oder mehr Spalten könnte man jetzt so statisch in der index.php belassen und führt eben noch eine oder mehr Modulpositionen für die weiteren Spalten ein, bspw. meine-neue-position-2 usw., jeweils innerhalb eines span-Containers.

Wir reduzieren aber zurück auf diese Version

<div class="container-fluid">
 <div class="row-fluid">
  <jdoc:include type="modules" name="meine-neue-position" style="html5" />
 </div>
</div>

Variante 1. HTML-Eingabe

Jetzt geben wir in unserem Modul Eigene Inhalte in der HTML-Ansicht des Editors die span-Container mit ein, z.B. für 3 Spalten

<div class="span4">
<p>Text in Spalte 1. 1 Spalte Text von. in Spalte 1. 1 Spalte Text von. in Spalte 1. 1 Spalte Text von.</p>
</div>

<div class="span4">
<p>Text in Spalte 2. 2 Spalte Text von. in Spalte 2. 2 Spalte Text von. in Spalte 2. 2 Spalte Text von.</p>
</div>

<div class="span4">
<p>Text in Spalte 3. 3 Spalte Text von. in Spalte 3. 3 Spalte Text von. in Spalte 3. 3 Spalte Text von.</p>
</div>

BTW: Übrigens eine Technik, die man in vielen Demoversionen von Templates sehen kann und oft den normalen Endanwender gnadenlos überfordert, weil mit diversen weiteren CSS-Klassen und HTML-Konstrukten, direkt im Editor einzugeben, etwas hingehübscht wird.

Mag ich jetzt nicht so, weil ich auch noch die Überschriften im Editor eingeben müsste, innerhalb der span4 etc. pp.

Variante 2. Modulklassensuffix

Also deaktiviere ich mein Modul und lege mir 3 neue an. Und diese müssen jetzt auch nicht mehr alle vom Typ Eigene Inhalte sein. Wir brauchen keinen Editor.

In das Feld Modulklassensuffix geben wir jeweils die Bootstrap-Klasse span4 ein mit einem Leerzeichen davor. Oder andere span-Klassen, so lange wir uns an die "Regel 12" halten. Auch eine offset-Klasse (s.o.) ist zusätzlich möglich.

Allen neuen Modulen geben wir die Position meine-neue-position, geben ihnen eine Überschrift im Titelfeld, prüfen die Menüzuweisung.

modul position Modulklassensuffix fuer Bootstrapgroesse

Auch so erhalten wir 3 Module nebeneinander und können die Modul-Reihenfolge umsortieren (wie man Module eben sortiert im Joomla-Backend).

Die Variante 2 kann unter Umständen zu Problemen führen, da es von Modul zu Modul vorkommen kann, dass der Modulklassensuffix doppelt und verschachtelt gesetzt wird. Hab nie verstanden, was das soll. Das hängt vom Modulstil ab und der Ausgabedatei des Moduls (wen es näher interessiert: Modulstile verwenden, verstehen und eigene anlegen). Man kommt dem nur aus, wenn man für solcherlei betroffenen Module einen Template-Override anlegt und den Modulklassensuffix dort entfernt. Oder mit einem anderen Modulstil ausprobiert, der dann aber vielleicht die Überschrift nicht anzeigt. Hilft nur ausprobieren oder Variante 3 verwenden.

Variante 3. Per Einstellung Bootstrapgröße

Im Normalfall wird oben beschriebener Modulklassensuffix-Konflikt nicht auftreten.

(Nur) Die Modulstile xhtml und html5 bieten die Möglichkeit das Einstellfeld Bootstrapgröße für Module zu verwenden anstatt den Modulklassensuffix händisch einzugeben (löschen nicht vergessen, falls noch drinnen steht). Ergänzung 2015-10-21: Einstellen kann man die Option Bootstrapgröße in jedem Modul, aber macht halt nix im Frontend ohne passenden Modulstil.

modul position Modulstil xhtml und html5 koennen Einstellung Bootstrapgroesse

Nachtrag 2015-10-21: Kann natürlich sein, dass Ihr Template weitere geeignete Modulstile mitbringt, die "Bootstrapgröße verstehen".

Unsere Modulposition verwendet bereits den Stil html5. Siehe das style:, das wir unserer Codezeile oben mitgegeben haben.

<jdoc:include type="modules" name="meine-neue-position" style="html5" />

Das könnte man aber mit dem Feld Modulstil überschreiben bzw. "sicher einstellen". Immer daran denken: Für einige Modulpositionen MUSS man einen funktionierenden Stil so erzwingen.

Und so stellen Sie schließlich die Bootstrapgröße ein, aus dem dann automatisch unser span4 wird.

modul position Einstellfeld Bootstrapgroesse fuer Stile xhtml oder html5

Ergänzende Infos

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Beitrags-Schlagworte

Joomla CSS Frontend Modul HTML Template Bootstrap Tutorial

Kategorien: Hauptkategorie: Schnipsel; Kategorie: Joomla-Kram
Datum-Infos: Erstellt: 25.09.2015; Aktualisiert: 20.03.2021

Joomla: Codes. Erweiterungen, Wissenswertes (Schnipsel)