Alle ingebouwde sitecomponenten hebben een vergelijkbare CSS-klassenstructuur.
In elke component zijn de volgende drie CSS-klassen toegepast op het buitenste <div>-element:
scs-component scs-type design-style
Het onderdeel type is het componenttype (zoals image, gallery of divider). Het onderdeel design-style is de gekozen stijlklasse voor een component, zoals gedefinieerd in het bestand van het thema.
Basisinformatie over themastijlen
Het bestand design.json van een thema bevat alle stijlen (frame, shadow, highlighted, enzovoort) die op elk componenttype (zoals button of image) kunnen worden toegepast. Elke stijl heeft een display name (weergavenaam) en een class name (klassennaam). De weergavenaam wordt getoond op het tabblad Stijl van het paneel Instellingen. De klassennaam verwijst naar een CSS-selector in het bestand design.css van het thema. Zo is de ingang voor de component button als volgt:
"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 van ingebouwde componenten zijn vertaald, zodat u een sleutel ziet om de stijlnaam op te halen uit het resourcepakket. Als u een component button toevoegt aan een pagina en vervolgens de stijl Eenvoudig kiest in het paneel Instellingen \Stijl, wordt door het bestand design.json de weergavenaam Eenvoudig (sleutel COMP_STYLE_SIMPLE) gekoppeld aan de klassennaam scs-button-style-3. De component button wordt weergegeven met de volgende klassen:
scs-component scs-button scs-button-style-3
Als voor een bepaalde component geen stijl is gekozen, wordt de standaardstijl scs-type-default-style gebruikt. In het voorgaande voorbeeld wordt de component 'button' weergegeven met de volgende klassen:
scs-component scs-button scs-button-default-style
De stijl 'scs-component-content'
Voor elke ingebouwde component binnen de eerdergenoemde scs-component <div> bestaat een content <div> met de CSS-klasse scs-component-content. Met andere woorden:
scs-component scs-type design-style scs-component-content
In het bestand design.css wordt de klasse scs-component-content vaak gebruikt voor de opmaak van het "vak" rond de component (bijvoorbeeld door toepassing van een rand of schaduw).
Het is goed om te weten dat de definitie van de algemene klassescs-component-content in het ingebouwde bestand comp.css onder andere de CSS-eigenschappen position:relative en display:inline-block bevat.
Ook al is de klasse scs-component-content nuttig voor de opmaak van het "vak" rond elke component, voor de complete opmaak van een component zijn componentspecifieke klassen vereist. Zie voor meer informatie: Componentspecifieke stijlen.