Modulstile

Style-Konzepte

Ein Modul-Eingabeformular hat einen Reiter Erweitert. Dessen Felder variieren je nach Modultyp, und das lässt sich leicht selbst nachvollziehen, indem man ein Menü-Modul auswählt und es mit einem Login-Modul oder einem Breadcrumbs-Modul vergleicht. Man sieht die folgenden drei Formularfelder, die sich auf die Gestaltung beziehen:

• Modulklasse ist ein Textfeld, mit dem eine eigene CSS-Klasse zum Modul-Container-Tag hinzugefügt werden kann, in der Regel ein <div>.
• Überschriftenklasse ist ein Textfeld, mit dem eine eigene CSS-Klasse zum Überschriften-Tag hinzugefügt werden kann, standardmäßig ein <h3>-Tag.
• Modulstil ist eine Liste, aus der einer von mehreren Standardstilen ausgewählt werden kann. Die Liste enthält none, html5, outline, table, card und noCard. Die Vorgabe ist card aus den Cassiopeia-Template-Stilen.

Die Optionen des Modulstils lassen sich ausprobieren, indem ein Modul bearbeitet und der Wert geändert wird, um zu sehen, welche Auswirkung dies auf die Anzeige der Site hat.

• html5 ergibt <div class="moduletable ">
• none entfernt das äußere <div> vollständig sowie das <h3>-Tag des Moduls.
• outline ergibt <div class="mod_preview_info">, wobei Positions- und Stilinformationen das <h3>-Tag des Moduls ersetzen.
• table ergibt ein Tabellen-Layout, das mit <table class="moduletable "> beginnt, wobei das vormalige h3-Tag nun ein <th>-Tag ist.
• card ergibt <div class="sidebar-right card ">, die Vorgabe.
• noCard ergibt <div class="sidebar-right no-card ">

Die Modulklasse

An dieser Stelle ist ein wenig Wissen über Cascading Style Sheets bzw. CSS erforderlich. Wird ein einzelnes Wort in das Feld Modulklasse eingegeben, etwa green, da CSS-Klassen üblicherweise durchgehend klein geschrieben werden, und ist der Modulstil auf Vererbt gesetzt, enthält die Ausgabe <div class="sidebar-right card green">.

Es gibt keine sichtbare Änderung im Erscheinungsbild der Site, da die Klasse green nicht definiert ist. Um sie zu definieren, muss ein Eintrag in der Datei user.css des Templates vorgenommen werden.

Aus dem Administrator-Menü:

• System / Site-Templates / Cassiopeia-Templates und Dateien auswählen.
• Neue Datei aus der Werkzeugleiste auswählen
• css in der linken Spalte auswählen, das Ziel für die neue Datei.
• user in das Feld Dateiname eingeben.
• css aus der Liste Dateityp auswählen.
• Die Schaltfläche Erstellen auswählen.

Nun kann das Verzeichnis css geöffnet werden, um die Datei user.css zur Bearbeitung zu finden und zu öffnen. Folgende Stilanweisungen eingeben, wobei die US-amerikanische Schreibweise von color zu beachten ist:

.sidebar-right.card.green {
    background-color: #ddffdd;
}
.sidebar-right.card.green .card-body {
    background-color: #eeffee;
}

Der Stil hätte auch nur .green verwenden können, doch das hätte möglicherweise andere Tags mit diesem Stil auf anderen Seiten beeinflusst.

Die Überschriftenklasse

Zurück zum Modul-Bearbeitungsformular: blue in das Feld Überschriftenklasse eingeben. Am Modul ändert sich auf der Site sichtbar nichts, doch die Überschrift wird nun als <h3 class="card-header blue"> angezeigt. Zurück zur Bearbeitung der Datei user.css, um einen Eintrag für den Überschriftenstil hinzuzufügen:

.card-header.blue {
    color: navy;
}

Die Modulüberschrift ist jetzt dunkelblau. Es gibt mehrere Möglichkeiten, Farben in CSS anzugeben. Die gängigsten sind Hexadezimal-Werte und Standardfarbnamen. Mehr dazu findet man an anderer Stelle!

CSS Challenge

• Die Rahmenfarbe des Moduls auf Marineblau ändern!
• Den unteren Rahmen der Überschrift ebenfalls ändern.
• Diesen Stil auf mehrere Module gleichzeitig anwenden, statt einzeln