Zusätzliche <HTML>-Klassen: Zufällige IDs und eine Nachtklasse

Tom

20. Mai 2021

8. Dezember 2023

43 Downloads

1 Kommentar

Dieses Plugin fügt eine Reihe von zusätzlichen Klassen im HTML-Tag ein:

htmlRandomIDX

Mit einer definierbaren Anzahl von zufälligen Klassen lassen sich Stile bei jedem Aufruf etwas anders darstellen, zum Beispiel mit einem zufällig angezeigtem Hintergrund- oder Headerbild. Oder anderen Farben, oder, oder, oder…

Beispiel

CSS

/* WoltLab Suite 5.2 */

html.htmlRandomID1 #pageHeaderFacade {
    background-color: #000;
    background-image: url('#{$style_image_path}starfield1.png');
}
html.htmlRandomID2 #pageHeaderFacade {
    background-color: #000;
    background-image: url('#{$style_image_path}starfield2.png');
}
html.htmlRandomID3 #pageHeaderFacade {
    background-color: #000;
    background-image: url('#{$style_image_path}starfield3.png');
}

/* WoltLab Suite 5.3 */
html.htmlRandomID1 #pageHeaderFacade {
    background-color: #000;
    background-image: url('#{$style_image_path}custom/starfield1.png');
}
html.htmlRandomID2 #pageHeaderFacade {
    background-color: #000;
    background-image: url('#{$style_image_path}custom/starfield2.png');
}
html.htmlRandomID3 #pageHeaderFacade {
    background-color: #000;
    background-image: url('#{$style_image_path}custom/starfield3.png');
}

Alles anzeigen

htmlStyleIDX

Mit dieser Klasse wird die ID des Stils übergeben so das man ihn gezielt über Stilunabhängiges CSS und SCSS im ACP ansprechen kann. Das kann sinnvoll sein wenn man viele Stile installiert hat aber nicht jeden einzelnen editieren und einige Stile gar nicht verändern will.

Beispiel

CSS

/* WoltLab Suite 5.2 */

html.htmlStyleID34 #pageHeaderFacade {
    background-color: #000;
    background-image: url('#{$style_image_path}starfield.png');
}

/* WoltLab Suite 5.3 */

html.htmlStyleID34 #pageHeaderFacade {
    background-color: #000;
    background-image: url('#{$style_image_path}custom/starfield.png');
}

Alles anzeigen

htmlNightMode

Mit der Klasse htmlNightMode kann man zu bestimmten Uhrzeiten zusätzliche, oder andere Bilder / Logos einbinden.

Beispiel

CSS

/* WoltLab Suite 5.2 */

html.htmlNightMode #pageHeaderFacade {
    background-color: #000;
    background-image: url('#{$style_image_path}starfield.png');
}

/* WoltLab Suite 5.3 */

html.htmlNightMode #pageHeaderFacade {
    background-color: #000;
    background-image: url('#{$style_image_path}custom/starfield.png');
}

Alles anzeigen

Installation

Der Download muss als Paket installiert werden.

Konfiguration

ACP > Konfiguration > Allgemein -> HTML-Klassen

Version

1.0.2

- Update WS 5.5 und 6.0

1.0.1

- Update WS 5.4

1.0.0

- Erste öffentliche Version WoltLab Suite

Lizenz

Siehe unsere Lizenz für kostenlose Erweiterungen:

https://www.cls-design.com/licence-free/

Laden Sie die Erweiterung nicht herunter, wenn Sie mit den Lizenzbedingungen nicht einverstanden sind. Mit dem Herunterladen stimmen Sie den Lizenzbedingungen zu.

Dateien