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.