Technische Umsetzung - Teil 2

16.3.4 Shop

Um den Kunden eine Online-Bezahlmöglichkeit zu bieten, muss ein Warenkorbsystem auf der Website installiert werden. Zum jetzigen Zeitpunkt gibt es allerdings noch keine Shop-Komponente, die mit Joomla! 1.5 funktioniert, und Herr Bertrand möchte auch möglichst wenig Zusatzkomponenten installieren, um die Pflege und die Update-Häufigkeit nicht zu aufwändig zu gestalten.

Sein Sohn Didier hat die Idee, einfach einen Einkaufskorb von PayPal einzubinden. PayPal ist das weltgrößte Online-Bezahlsystem⁵ und gehört zu eBay⁶. Es bietet zahlreiche Händlertools an, unter anderem auch ein Warenkorbsystem. Herr Bertrand erstellt sich ein Benutzerkonto bei PayPal. Außer PayPal gibt es auch andere Systeme wie beispielsweise WorldPay⁷ und viele andere, die ähnliche Features anbieten.

Er verkauft momentan drei Produkte:

• Einen Weißwein zu 10 Euro die Flasche
• Einen Roséwein zu 10 Euro die Flasche
• Einen Rotwein zu 12 Euro die Flasche

PayPal bietet die Möglichkeit, Buttons zu erzeugen, die auf die spezifischen Produkte passen. Bei einem Klick auf diese Buttons wird der Artikel in den PayPal-Warenkorb gelegt. Dabei ist es möglich, Versandkosten und Steuern zu berücksichtigen (Abbildung 16.28).

Abbildung 16.28: Schaltflächen des Shops

Auf der Website baut Herr Bertrand die Schaltflächen in die Beiträge Weißwein, Rotwein und Roséwein ein. Er entschließt sich dazu, ein eigenes Modul zu erstellen. Unter Erweiterungen Module klickt er auf das Icon Neu und wählt ein HTML Modul aus. Er fügt den PayPal-Code in der HTML-Ansicht des Editors (Button HTML) ein. Um sich die Arbeit zu erleichtern, kann er den Editor auch im Menü Site - Konfiguration deaktivieren. Er positioniert das Modul auf der linken Seite unter dem Hauptmenü und wählt die Seiten aus, bei denen es angezeigt werden soll (Abbildung 16.29).

Abbildung 16.29: Neues »Shop«-Modul

Im Falle von PayPal wird die E-Mail-Adresse von Herrn Bertrand im Quellcode benötigt. Das standardmäßige Plugin Email Cloaking maskiert diese E-Mail-Adresse, so dass PayPal nicht den richtigen Warenkorb findet. Er deaktiviert das Plugin im Menü Erweiterungen - Plugins. Die Website sieht jetzt aus wie in Abbildung 16.30.

Abbildung 16.30: Shop-Buttons auf der Website

Klickt nun ein Benutzer auf die Buttons, wird ein PayPal-Einkaufswagen erstellt. Er kann mehrere Artikel in den Einkaufswagen legen und die Mengen verändern (Abbildung 16.31).

Abbildung 16.31: PayPal-Warenkorb

Wenn der Kunde über ein PayPal-Konto verfügt, kann er sofort damit bezahlen. Die Chance, dass Menschen, die online Wein kaufen, ein PayPal-Konto haben, ist relativ hoch, und die Tendenz ist stark steigend.

16.3.5 Die Impressionen

Um den Besuchern der Website ein Gefühl für die Umgebung zu geben, aus der seine Weine stammen, möchte Herr Bertrand Bilder und Videos auf der Website einbinden. Er installiert die Exposé Gallery wie in Kapitel 12.3 auf Seite 237 beschrieben. Er legt sich ein Album Weinlese mit einem Unteralbum 2007, ein Album Weinfest mit dem Unteralbum 2007 und ein Album Produktion mit ein paar Bildern an (Abbildung 16.27). Weitere Bilder soll sein Sohn Didier nach und nach einfügen.

Abbildung 16.32: Album Manager

Über Menüs - Main Menu - Neu fügt er den Link zur Exposé-Komponente dem Menü hinzu. In der Menülink-Bearbeitungsmaske gibt er dem Link noch den Titel Impressionen. Nach dem ersten Abspeichern kann er den Link im Menü an der richtigen Stelle positionieren. Auf der Website erscheinen jetzt die Bilder hinter dem Link Impressionen (Abbildung 16.33).

Abbildung 16.33: Impressionen auf der Website

16.3.6 Der Benutzerbereich

Im Bereich für die registrierten Benutzer sollen diese eine Seite mit besonderen Wein-Angeboten finden sowie einen Downloadbereich mit als PDF angebotenen Artikeln, Zertifikaten, Bodenuntersuchungen und Ähnlichem.

Das Benutzermenü

Herr Bertrand legt einen nicht-kategorisierten Beitrag mit der Überschrift Angebote an. Der Beitrag wird veröffentlicht, nicht auf der Startseite angezeigt und ist nur für registrierte Benutzer zugänglich (Abbildung 16.34).

Abbildung 16.34: Angebote Beitrag

Im Menü Menüs Neu erstellt er sich ein Benutzermenü (Abbildung 16.35).

Abbildung 16.35: Benutzermenü erstellen

Das Benutzermenü positioniert er in Erweiterungen Module auf der linken Seite, aktiviert es und setzt die Berechtigung auf registrierte Benutzer (Abbildung 16.36).

Abbildung 16.36: Benutzermenü im Modulbereich

Er fügt den Beitrag dem neuen Benutzermenü hinzu und setzt die Zugriffsebene auf Registriert (Abbildung 16.37).

Abbildung 16.37: Benutzermenülink

Auf der Website kann sich Herr Bertrand jetzt anmelden. Er nimmt sein admin-Benutzerkonto und stellt erfreut fest, dass außer seinem eben erstellten Benutzermenü neben jeder Überschrift ein Bleistift-Icon angezeigt wird (Abbildung 16.38).

Abbildung 16.38: Benutzermenü auf der Website

Durch einen Klick auf das Bleistift-Icon gelangt er in die Bearbeitungsmaske eines Beitrags. Hier kann er den Text des Artikels und auch die Parameter und die Metadaten verändern. Beim Bearbeiten der Beiträge fällt ihm auf, dass der Button Abmelden aus dem Login-Modul nur auf der Startseite angezeigt wird. Er geht ins Menü Erweiterungen - Module und ändert im Login-Modul im Bereich Seiten/Beiträge die Ansicht auf Alle.

Der Downloadbereich

Als Letztes möchte er noch einen Downloadbereich für seine eingescannten Dokumente haben. Kleine Grafiken der Zertifikate möchte er in den Lagen-Beschreibungen anzeigen, die ausführlichen Dokumente im Bereich für registrierte Benutzer. Dazu benutzt er die Weblinks-Komponente aus Joomla!.

Er wechselt in den Bereich Erweiterungen - Weblinks - Kategorien und legt drei Kategorien an:

• Veröffentlichungen
• Zertifikate
• Bodenuntersuchungen

Zu jeder Kategorie fügt er eine kleine Beschreibung hinzu und will später auch noch ein Bild zuordnen. Die Kategorien sollen nur für registrierte Benutzer sichtbar sein (Abbildung 16.39).

Abbildung 16.39: Link-Kategorien

Die PDFs sollen in einem speziellen Verzeichnis im Medienbereich (Site - Medien) gespeichert werden. Er fügt in das Feld neben der Pfadangabe den Verzeichnisnamen pdf ein und klickt auf den Button Ordner erstellen (Abbildung 16.40).

Abbildung 16.40: PDF-Verzeichnis

Jetzt kann er alle PDFs in Joomla! laden. Er könnte die Dateien auch über einen Datei-Manager in das lokale XAMPP lite-Verzeichnis C:/xampplite/htdocs/bertrand/images/pdfkopieren oder später per FTP auf den Server hochladen (Abbildung 16.41).

Abbildung 16.41: Hochgeladene PDFs

Jetzt muss er die URLs der PDFs noch als Links im Menü Komponenten - Weblinks - Neu einpflegen. In dieser Maske müssen im Internet gültige URLs eingegeben werden (Abbildung 16.42). Außerdem wählt er die Kategorie aus und legt als Ziel nach einem Klick ein Neues Browserfenster ohne Navigation fest, in dem das PDF erscheinen soll. Da Herr Bertrand momentan lokal arbeitet, beziehen sich die URLs auf http://localhost/bertrand/. Wenn Herr Bertrand die Website auf seinen Server überträgt, muss er diese Werte auf seinen zukünftigen Domainnamen anpassen oder bereits jetzt den richtigen Domainnamen eingeben.

Abbildung 16.42: Weblink einfügen

Nach etwas Tipparbeit hat Herr Bertrand neun Links zu verschiedenen PDFs eingepflegt (Abbildung 16.43).

Abbildung 16.43: Fertige Linksammlung

Jetzt muss die Linksammlung noch ins Benutzermenü. Herr Bertrand ruft Menü Benutzermenü Neu auf, wählt im Menüeintragsassistent die Weblinks und dort die Kategorieliste Layout aus (Abbildung 16.44).

Abbildung 16.44: Downloadbereich einbinden

In der anschließenden Bearbeitungsmaske trägt er noch eine Überschrift für den Bereich ein (Downloadbereich). Zugriff sollen nur registrierte Benutzer haben. Er speichert den Link und positioniert ihn unterhalb des Angebots-Links. Auf der Website erscheint der Link wie gewünscht. Die drei Kategorien werden angezeigt. Nach einem Klick auf eine der Kategorien wird eine Tabelle mit den PDFs angezeigt (Abbildung 16.45).

Abbildung 16.45: Downloadbereich auf der Website

Herr Bertrand ist zufrieden. Es ist zwar keine wirkliche Dokumentenverwaltung, aber für seine Zwecke völlig ausreichend. In der Tabelle wird sogar die Häufigkeit der Klicks auf die einzelnen Dokumente angezeigt. Die Anzeige der Beschreibungen und die Darstellung der Tabelle sind ebenfalls in Menü - Benutzermenü - Download - Parameter einstellbar.

16.3.7 Benutzerdetails

Herr Bertrand erinnert sich daran, dass es in den Beispieldaten von Joomla! einen Link im Benutzermenü gab, mit dem der Benutzer seine Daten (E-Mail-Adresse, Passwort etc.) ändern konnte. So ein Link soll auch in das Benutzermenü seiner Website. Im Menüeintragsassistent wählt er Benutzer/Benutzerdetails/Ansicht. Jetzt enthält der Benutzerbereich den entsprechenden Link, und jeder registrierte Benutzer kann seine Daten ändern (Abbildung 16.46).

Abbildung 16.46: Benutzerkonto ändern

16.3.8 Erstes Fazit

Herr Bertrand ist positiv überrascht, wie schnell das alles ging. Er ruft Ruth an und berichtet vom Fortschritt seiner Arbeit. Ruth klingt ein wenig verzweifelt, da sie bisher Templates für die Version Joomla! 1.0.x erstellt hat und sich scheinbar doch eine Menge geändert hat. Sie ist aber zuversichtlich, dass sie das Template am nächsten Tag präsentieren kann.

Sie schickt per E-Mail schon mal zwei Screenshots ihrer Arbeit (Abbildung 16.47 und Abbildung 16.48).

Abbildung 16.47: Entwurf der Website

Abbildung 16.48: Entwurf des Shop-Bereichs

Bei der Einbindung in Joomla! 1.5 stellte Ruth schnell fest, dass sich im Vergleich zu Joomla! 1.0 die Namen vieler CSS-Klassen geändert haben.

Um einen Überblick über die CSS-Klassen und die anderen Parameter zu bekommen, benutzt Ruth die Firefox-Komponente Web Developer⁸ und hat so einen guten Überblick (Abbildung 16.49).

Abbildung 16.49: CSS-Klassen-Info per Firefox Web Developer

Ruth und Herr Bertrand verständigen sich darauf, dass Herr Bertrand die Website schon auf seinem Server installiert. Das Template werden sie nachträglich hinzufügen.

16.3.9 Herr Bertrand lernt CSS

Herr Bertrand ist jetzt schon ganz fit in HTML und möchte gerne wissen, wie sein Template funktioniert.

Es wird ein längeres Gespräch ...

Ruth erklärt ihm, dass das Aussehen des Templates durch zwei CSS-Dateien bestimmt wird, die dem Browser angeben, wie er die Website darstellen soll. Beispielsweise ob die Hintergrundfarbe Rot oder Braun ist, ob ein Bildelement eingefügt wird und vieles andere mehr.

Diese Angaben sind mit Cascading-Stylesheet-Befehlen geschrieben und in den CSS-Dateien template.css und joomlastuff.css hinterlegt.

Ruth hat diese Dateien für die gebräuchlichsten Browser Internet Explorer 6.0 und Firefox 1.5 unter Windows sowie Firefox 1.06 und Safari 2.03 unter Mac OS X 10.4 optimiert.

Um selbst sein Template ändern oder erstellen zu können, will Herr Bertrand CSS verstehen lernen.

Ruth erklärt das Prinzip von Cascading Stylesheets (CSS): Das Wort Cascading bedeutet, dass die Angaben der CSS-Formatierungen von den Browsern von oben nach unten gelesen werden, wie eine Kaskade. Schreibt man eine Angabe doppelt, überschreibt die untere die obere bzw. die letzte die davor liegenden. CSS-Angaben lassen sich an folgenden Stellen einbinden:

• in einer externen CSS-Datei,
• im Head einer HTML-Datei,
• direkt im betreffenden HTML-Tag.

CSS-Angaben, die direkt im betreffenden HTML-Tag gemacht werden, überschreiben die Formatierungen aus den externen CSS-Dateien. Das ist wichtig zu wissen, da die Bestandteile von Joomla! manchmal mit CSS-Formatierungen ausgegeben werden, die direkt in die jeweiligen HTML-Tags eingebunden sind.

Um das Stylesheet von Herrn Bertrands Template einfach zu halten, hat Ruth die Hierarchie der CSS genutzt.

So hat sie beispielsweise die Schriftgestaltung in den allgemeinen HTML-Tags: body, table, div, p und form festgelegt. Damit ist definiert, dass der gesamte Inhalt dieser Elemente in der Schriftart Verdana zu lesen ist, in einer bestimmten Größe dargestellt wird und grau ist.

Soll das an einer Stelle auf der Website geändert werden, muss man diesen HTML-Tags eine Klasse zuordnen. Zum Beispiel die Klasse

.grauetabelle

mit den Eigenschaften:

{ background-color: #333; }

Dies wird in das HTML-Gerüst eingebunden mit

<table class="grauetabelle">

So lassen sich mit CSS-Klassen einzelne Elemente anders steuern.

In Joomla! gibt es eine Menge solcher festgelegten Klassen, über die man ein eigenes Template leicht programmieren kann. Nehmen wir uns beispielsweise die Seitennavigation vor (Abbildung 16.50).

Abbildung 16.50: Ansicht Seitennavigation

Die Seitennavigation besteht aus drei Joomla!-Modulen:

• Main Menu/Hauptmenü
• User Menu/Benutzermenü
• User Login/Anmeldeformular

Ruth legt das Layout der Seitennavigation mit diesen Klassen fest (siehe Listing 16.1):

...
<div class="moduletable_menu">
<h3>Hauptmenü</h3>
<ul class="menu">
  <li id="current"
      class="active item1">
  <a href="http://localhost/bertrand/">Startseite</a>
  </li>
  <li class="parent item4">
  <a href="index.php?option=com_content...">Die Weine</a>
  </li>
  <li class="parent item8">
  <a href="index.php?option=com_content...">Terroir</a>
  </li>
  ...
</ul>
</div>
<div class="moduletable">
<h3>Anmeldung</h3>
<form action="index.php"
      method="post"
      name="login"
      id="form-login">
<fieldset class="input">
<p id="form-login-username">
<label for="modlgn_username">Benutzername</label><br>
<input id="modlgn_username"
       name="username"
       class="inputbox"
       alt="username"
       size="18"
       type="text">
</p>
...
</fieldset>
<ul>
<li>
<a href="index.php?option=com_user...">Passwort vergessen?</a>
</li>
...
</ul>
<input name="option"
       value="com_user"
       type="hidden">
...
</form>
</div>
<div class="clear"></div>
...

Listing 16.1: HTML-Code der Seitennavigation

Die Formatierung in Einzelschritten

Schema

Anhand des HTML-Codes lässt sich leicht ein Schema erkennen:

Ruth hat für ihr Layout in der index.php die Ausgabe der Module mit dem style="xhtml" angegeben.

Alle hier verwendeten Module werden bei dieser Einstellung und der Parameter-Einstellung der Module (Modulmanager) auf "list" in <div>-Tags ausgegeben. Diese <div>-Container enthalten eine mit dem HTML-Tag <h3> definierte Headline und Listen. In den Listen stehen die Links. Man hat hier viele Gestaltungsmöglichkeiten, denn alle HTML-Tags lassen sich entweder direkt oder mit den von Joomla! mitgebrachten Klassen programmieren.

Die Module haben einen ganz leicht sichtbaren Bildhintergrund, der bei allen Modulen hinterlegt ist und deswegen in dem sie umfassenden HTML-Tag definiert wurde. Alle Klassen, die Ruth für ihr HTML-Gerüst selbst erfunden hat, befinden sich in der Datei template.css. So auch die Hintergrundfarbe der durchgängigen Seitennavigation (Listing 16.2).

.naviside{
  background: 
    url(../images/naviseite_oben.jpg) 
    top left;
    /*Bildhintergrund*/
  width: 210px;
    /*Breite*/
  vertical-align: top;
    /*Ausrichtung der Inhalte am oberen Rand*/
  border: 0px;
    /*Rand*/
  padding: 0px;
    /*Innenabstände*/
  margin: 0px;
    /*Außenabstände*/
  background-color:   #fff;
    /*Hintergrundfarbe*/
  text-align: left; 
    /*Ausrichtung am linken Seitenrand*/
  float: left;
    /*Gesamtausrichtung innerhalb des Html-Gerüstes*/
}

Listing 16.2: CSS-Code .naviside

Ruth ordnet im nächsten Schrittt den <div>-Tags, die hier mit den Klassen moduletable_menu und moduletable (Login Form) angesprochen werden, Eigenschaften zu, die für alle Menüs gültig sein sollen:

Breite, Abstände voneinander und eine Farbe. Sie muss dafür nur die beiden Klassen .moduletable bzw. moduletable_menu kennen.

Die Klassen .moduletable und .moduletable_menu sind von Joomla! vorgegebene Klassen. Ruth hat eigens definierte und von Joomla! vorgegebene Klassen der Übersicht halber getrennt in den CSS-Dateien joomla_stuff.css und template.css angelegt.

.naviside .moduletable, .moduletable_menu{
  width: 210px;     /*Breite*/
  background: none; /*Hintergrund*/
  margin-top: 18px; 
    /*Abstand außerhalb der Module, nach oben*/
  text-align: left; /*linksbündig*/
  padding: 0px; 
    /*Keine Innenabstände vom Modulrand zum Inhalt*/
}

Listing 16.3: CSS-Code

Titel der Module

Einen Titel, der für alle Module gleich aussieht (Abbildung 16.51), kann man einfach erstellen, indem die Überschrift innerhalb des Moduls direkt mittels ihres HTML-Tags <h3> angesprochen wird.

Abbildung 16.51: Modultitel

Dazu gibt man in der CSS zuerst wieder die Klasse an, hier .navioben. Alle Module befinden sich innerhalb dieses <div>s mit der Klasse .navioben. Diese Angabe bewirkt, dass nur Überschriftenangaben innerhalb des Bereichs .navioben mit diesen CSS-Angaben formatiert werden. Nun wird noch das ausschlaggebende <h3>-Tag hinzugefügt. Ruth hat die Titel mit einem Hintergrundbild hinterlegt, um die Menüs etwas abwechslungsreicher zu gestalten (Listing 16.4).

/*Festlegung der Überschriften 
  der linksaufgeführten Module*/
.navioben h3 {
  font: 18px/18px Times New Roman, serif;  
    /*Schriftgröße/-Art*/
  font-weight: normal;
    /*Schriftstärke*/
  color:  #A49A66;
    /*Schriftfarbe*/
  background: url(../images/blatt.gif) 
              top left;  
    /*Hintergrundbild*/
  background-repeat: no-repeat;
    /*Wiederholung Hintergrundbild*/
  padding-left: 25px;
    /*Innenabstand linke Seite*/
  height: 25px;  /*div höhe*/
  width: 185px;  /*Breite*/
}

Listing 16.4: Modultitel

Menüeinträge

Nachdem der Titel fertig ist, müssen noch die in HTML-Listen angelegten Links formatiert werden (Abbildung 16.52).

Abbildung 16.52: Menü Einträge

Ruth wollte keine Punkte vor den Links stehen und die listenüblichen Einrückungen verschwinden lassen. Um die Liste anzusprechen, nimmt sie die von Joomla! vordefinierten CSS-Klassen: .menu bzw. .moduletable (Listing 16.5).

ul.menu, .naviside .moduletable ul {
  list-style: none; 
    /* Liste ohne Punkt*/ 
  display: block;  /* Blockelement, */
    /* als Kasten formatierbar */
  width:  210px;  /* Breite   */
  margin:   0px;  /* Außenabstände   */
  border:   0px;  /* Rand */
  padding:  0px;  /* Innenabstände */
}

Listing 16.5: Listenformatierung der Module

Trennungslinien

Ruth wollte die einzelnen Links durch Linien getrennt darstellen. Dazu werden die <li>-Tags der Listen gezielt angesprochen:

ul.menu li {
border-bottom: 1px dotted #ccc;
/* Unterer Rand */
}

Die Unterrubriken der Links kann man extra ansprechen, sie haben in diesem Beispiel einen Einzug am linken Rand (Listing 16.6).

/*Listenformatierung der Unterrubriken*/
ul.menu ul { 
  /* Außenabstand wirkt wie ein Texteinzug */
  margin-left: 10px;
  background-color: #EEE;
    /* andere Hintergrundfarbe */
  width: 200px;
    /* Geringere Breite */
}

Listing 16.6: Unterrubriken

Die Unterrubriken bekommen passend zur Hintergrundfarbe nochmals einen anders formatierten unteren Rand:

ul.menu ul li {
border-bottom: 1px solid #fff;
/* Unterer Rand */
}

Man könnte sogar jeden einzelnen Listenpunkt extra formatieren, da jedes <li>-Tag auch eine eigene Klasse besitzt.

level1 item1,
.level1 item2 parent,
.level1 item3 parent,
.level1 item4

Die eigentlichen Links

Nun zu den Links selbst. Die Formatierung spricht das <a>-Tag an, das in der Liste <ul> mit der Klasse .menu liegt.

Alle Links sollen so aussehen:

ul.menu a {
  text-decoration: none;
    /* Link ohne Unterstreichung */
  color: #6B5E588;
    /* Schriftfarbe */
  font-size: 11px;
    /* Schriftgröße */
  padding-left: 10px;
    /* Schriftabstand zum Rand */
}

Der hover-Effekt bewirkt, dass beim Überfahren mit der Maus der Hintergrund und/oder die Schriftfarbe des Links wechselt. Ruth hat diesen Fall folgendermaßen eingestellt:

ul.menu a:hover {
  color: #CAC303;
  text-decoration: none;
}

Zu guter Letzt wird mithilfe der folgenden Klasse der Link der gerade aktiven Seite besonders hervorgehoben:

.menu li#current a {
  color: #B22819; /* Schriftfarbe */?
}

... und fertig!

Herr Bertrand freut sich und findet die Formatierung mit CSS nach dieser Erklärung gar nicht mehr so schwer. Ihm raucht zwar noch der Kopf, aber Ruth gibt ihm noch den Link http://www.css4you.de. Das ist eine Website, auf der alle Eigenschaften, die man mit CSS zuordnen kann, gut beschrieben sind.

16.3.10 Das ist Ruth aufgefallen, während sie mit der neuen Joomla!-Version 1.5 arbeitete

Falls Sie bereits Templates unter Joomla! 1.0.x erstellt haben, zunächst mal eine gute Nachricht: Joomla! 1.5 ist im Legacy Mode abwärtskompatibel (siehe auch Kapitel 12)!

Ein paar Fallstricke gibt es aber für Template-Ersteller zu beachten. Die bisherigen mosload()-Befehle im PHP-Code sowie die alten CSS-Klassen der index.php eines Templates funktionieren an manchen Stellen nicht mehr, da sich Formatierungen geändert haben.

Änderungen an den Menüs

Die Formatierung der Module und Komponenten ist gegenüber den Joomla!1.0-Versionen um eine Vielzahl an Möglichkeiten erhöht worden. Waren die Module früher schon variabel steuerbar, indem man ihnen eigene CSS-Klassenerweiterungen zuordnen konnte, so ist nun noch hinzugekommen, dass sich ihre HTML-Ausgabe durch folgende Angaben in der Template-eigenen index.php steuern lässt.

Zur Auswahl stehen die Optionen:

• "table" (Default) – das Modul wird in einer Tabellenspalte dargestellt
• "horz" – das Modul wird horizontal angezeigt und in der Zelle einer umgebenden Tabelle ausgegeben.
• "xhtml" – das Modul wird in einem einfachen div-Element ausgegeben.
• "rounded" – die Ausgabe erfolgt in einem Format, das runde Ecken ermöglicht, dabei ändert sich der Name des <div> von moduletable zu module.
• "none" – das Modul wird ohne Formatierung ausgegeben

Ich finde das super! Lässt es doch zu, dass ein Joomla! sich ganz ohne Tabellen gestalten lässt und der Inhalt dadurch logisch gliederbar wird (Thema Barrierefreiheit).

Überhaupt kann man unter Verwendung des <div>-Tags in der Gestaltung wesentlich freier arbeiten als mit HTML-Tabellen, die ursprünglich für diesen Zweck auch nicht vorgesehen waren.