Das Mate Theme nutzt das Front-End-Framework Materialize basierend auf Material Design.
Eine Palette der Farben, die Materialize mitbringt, finden Sie auf der Materialize-Seite oder im Theme unter Elemente und Farben. Jede der Farben besteht aus einer Grundklasse und optionalen Klassen, die die Farbe heller oder dunkler machen.
Um die Hintergrundfarbe eines Elementes anzupassen, fügen Sie dem Element einfach eine Klasse mit dem Farbnamen und eine Klasse mit der gewünschten Helligkeitsstufe hinzu.
Um eine Textfarbe anzugeben, müssen Sie nur den Farbnamen mit dem Suffix -text verwenden.
Materialize nutzt ein 12-Spalten-Grid-System. Beispiele und Erläuterungen dazu finden Sie auch auf der Materialize-Webseite.
Mobile Geräte | Tablet-Geräte | Desktop-Geräte | große Desktop-Geräte | |
---|---|---|---|---|
Auflösung | <= 600px | > 600px | > 992px | > 1200px |
Klassen-Prefix | .s | .m | .l | .xl |
Spalten-Anzahl | 12 | 12 | 12 | 12 |
Es muss immer die Klasse col vorangestellt werden. Sollen mehrere Elemente nebeneinander dargestellt werden, muss
dem Eltern-Element die Klasse row vergeben werden. Werden beispielsweise die Klassen col s12 m6 l4
verwendet,
bewirkt dies, dass das Element …
Um Elementen diese Klassen vergeben zu können, wird die Erweiterung Advanced Classes verwendet. Die Klassen kann man bei Inhaltselementen unter Erweiterte CSS-Klassen hinzufügen (siehe Bild 3), wobei nicht alle Elemente unterstützt werden (bspw. die Teaser- oder Content-Box). Wird das Element nicht unterstützt, muss man die Klassen händisch in den Experten-Einstellungen hinzufügen.
Bild 3: Erweiterte CSS-Klassen setzen
Damit die Elemente richtig dargestellt werden, muss das umfassende Element die Klasse row bekommen. Dafür wurde die Erweiterung Contao Bootstrap Grid verwendet. Sie legen dafür einfach ein Element vom Elementtyp Grid Start an und wählen das Grid Umschlag mit Klasse row aus (siehe Bild 4). Anschließend sollte es wie auf Bild 5 aussehen. Das Grid Stop Element wird automatisch angelegt.
Unter Themes und Manage grid definitions (das vorletzte Icon) wurde einfach ein leeres Grid-Element angelegt, das dafür sorgt, dass ein Div-Element mit der Klasse row angelegt wird.
Bild 4: Grid-Umschlag anlegen
Bild 5: Elemente in einem Grid-Umschlag
Um Icons zu verwenden, geben Sie dem Element einfach die material-icons Klasse und den Icon Namen als Inhalt. Alle Icons und die dazugehörigen Namen finden Sie entweder auf der Material Design Webseite oder im Theme unter Elemente und Icons.
Zum Beispiel:
<i class="material-icons">insert_schedule</i>
Größe und Farben können Sie durch das Hinzufügen von weiteren Klassen beeinflussen.