Alle integrierten Sitekomponenten verwenden eine ähnliche CSS-Klassenstruktur.
Jede Komponente weist die folgenden drei CSS-Klassen auf, die auf das äußerste <div>
-Element angewendet werden:
scs-component scs-type design-style
type
ist der Komponententyp (z.B. image
, gallery
oder divider
). design-style
ist die ausgewählte Stilklasse für eine Komponente, die in der Theme-Datei definiert wird.
Grundlagen für Theme-Stile
Die Datei design.json
eines Themes enthält alle Stile (frame
, shadow
, highlighted
usw.), die auf jeden Komponententyp (wie button
oder image
) angewendet werden können. Jeder Stil hat einen display name
und einen class name
. Der Anzeigename wird auf der Registerkarte Stil des Bereichs Einstellungen angezeigt. Der Klassenname bezieht sich auf einen CSS-Selektor in der Datei design.css
des Themes. Beispieleintrag für die button
-Komponente:
"scs-button": { "styles": [{ "name": "COMP_STYLE_ALTA_SMALL", "class": "scs-button-default-style" }, { "name": "COMP_STYLE_ALTA_LARGE", "class": "scs-button-style-2" }, { "name": "COMP_STYLE_SIMPLE", "class": "scs-button-style-3" } ] },
Namen von integrierten Komponenten werden übersetzt. Sie sehen also einen Schlüssel zum Abrufen des Stilnamens aus dem Resource Bundle. Wenn Sie eine button
-Komponente zu einer Seite hinzufügen und dann den Stil Einfach im Bereich Einstellungen > Stil auswählen, verknüpft die Datei design.json
den Anzeigenamen Einfach (Schlüssel COMP_STYLE_SIMPLE
) mit dem Klassennamen scs-button-style-3
. Die button
-Komponente wird mit den folgenden Klassen gerendert:
scs-component scs-button scs-button-style-3
Wenn Sie für eine Komponente keinen Stil auswählen, wird der Standardstil scs-type-default-style
verwendet. Im oben genannten Beispiel wird die Schaltfläche mit den folgenden Klassen gerendert:
scs-component scs-button scs-button-default-style
Der Stil "scs-component-content"
Für jede integrierte Komponente enthält das oben genannte scs-component <div>
ein content <div>
mit der CSS-Klasse scs-component-content
. Anders ausgedrückt:
scs-component scs-type design-style scs-component-content
In der Datei design.css
wird die Klasse scs-component-content
häufig verwendet, um das "Kästchen" um die Komponente zu formatieren (z.B. um einen Rahmen oder Schatten anzuwenden).
Beachten Sie, dass in der integrierten Datei comp.css
die allgemeine Klasse scs-component-content
mit position:relative
und display:inline-block
sowie anderen CSS-Eigenschaften definiert ist.
Während scs-component-content
zum Festlegen des Stils für das "Kästchen" um jede Komponente nützlich ist, sind für die vollständige Formatierung einer Komponente komponentenspezifische Klassen erforderlich. Siehe Komponentenspezifische Formatierung.