Joomla! Programmierung/Programmierung/Templates/Module Chrome

Aus Joomla! Dokumentation

Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

Was ist Module Chrome?

Module Chrome ermöglicht es Templateersteller die Ausgabeart der Module im Template zu beeinflussen. Im Wesentlichen ist es ein Stück vordefinierter HTML Code, der vor, nach oder um das Modul eingefügt wird und per CSS formatiert werden kann. Module Chrome wird im Allgemeinen dazu verwendet um Ränder um Module, besonders mit abgerundeten Ecken, zu erstellen, kann aber auch für andere Sachen verwendet werden.

Der jeweilige Module Chrome Typ wird mit dem Attribut style beim Aufruf des Moduls festgelegt. Wenn Sie zum Beispiel die Position user1 mit dem Module Chrome custom nutzen wollen, müssen Sie folgendes in die index.php Ihres Templates schreiben:

<jdoc:include type="modules" name="user1" style="custom" />

Jedes Modul, das dieser Position zugewiesen wird, wird mit dem selben Module Chrome geladen - mit anderen Worten, wenn Sie in einer Spalte verschiedene Module Chrome nutzen wollen, müssen Sie mehrere Positionen definieren (z.B. user1 und user2).

Das Standard Joomla! 1.5 Paket beinhaltet sechs verschiedene Module Chrome Styles. Aber das bedeutet nicht, dass Sie sich darauf beschränken müssen. Es ist sehr einfach diese sechs um weitere Module Chromes zu erweitern.

Weitere Informationen: modules.php

Joomla! 1.5 Standard Module Chromes

Style Ausgabe Aussehen
rounded
(Standard für das Milkywaymenu)
<div class="module_menu">
  <div>
    <div>
      <div>
        <h3>Main Menu</h3>
        <ul class="menu">
          <li><!-- verschiedene Menupunkte --></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Image:Module_chrome_rounded.png

none
<ul class="menu">
  <li><!-- verschiedene Menupunkte --></li>
</ul>

Image:Module_chrome_none.png

table
<table cellpadding="0" cellspacing="0" class="moduletable_menu">
  <tr>
    <th valign="top">Main Menu</th>
  </tr>
  <tr>
    <td>
      <ul class="menu">
        <li><!-- verschiedene Menupunkte --></li>
      </ul>
    </td>
  </tr>
</table>

Image:Module_chrome_table.png

horz
<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td valign="top">
      <table cellpadding="0" cellspacing="0" class="moduletable_menu">
        <tr>
          <th valign="top">Main Menu</th>
        </tr>
        <tr>
          <td>
            <ul class="menu">
              <li><!-- verschiedene Menupunkte --></li>
            </ul>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Image:Module_chrome_horz.png

xhtml
<div class="moduletable_menu">
  <h3>Main Menu</h3>
  <ul class="menu">
    <li><!-- verschiedene Menupunkte --></li>
  </ul>
</div>

Image:Module_chrome_xhtml.png

outline
<div class="mod-preview">
  <div class="mod-preview-info">left[outline]</div>
  <div class="mod-preview-wrapper">
    <ul class="menu">
      <li><!-- verschiedene Menupunkte --></li>
    </ul>
  </div>
</div>

Image:Module_chrome_outline.png

Hinweis

Das Aussehen der Module kann je nach der CSS des Templates variieren. Zum Beispiel sehen none und horz sehr ähnlich aus, obwohl der HTML Code sehr unterschiedlich ist.

siehe auch

Persönliche Werkzeuge
Team Navigation