Az összes beépített webhelyösszetevő hasonló CSS osztálystruktúrát használ.
Minden összetevő a következő három CSS osztályt alkalmazza legkülső <div> elemére:
scs-component scs-type design-style
A type az összetevő típusa (például image, gallery vagy divider). A design-style az összetevőhöz választott stílusosztály a témafájlban definiált módon.
A témastílusok alapjai
A témához tartozó design.json fájl felsorolja az összes olyan stílust (frame, shadow, highlighted stb.), amely az egyes összetevőtípusokra alkalmazható (például button vagy image). Minden stílus rendelkezik megjelenítési név és osztálynév beállítással. A megjelenítési név a Beállítások panel Stílus lapján látható. Az osztálynév a témához tartozó design.css fájlban lévő CSS választóra vonatkozik. Például a button összetevő bejegyzése a következő:
"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"
}
]
},
A beépített összetevők neve le van fordítva, így egy kulcs jelenik meg a stílusnév beolvasásához az erőforráskötegből. Ha egy button összetevőt vesz fel egy oldalra, és az Egyszerű stílust választja a Beállítások > Stílus panelen, a design.json fájl társítja az Egyszerű megjelenítési nevet (COMP_STYLE_SIMPLE kulcs) az scs-button-style-3 osztálynévvel. A button összetevőt a következő osztályokkal jeleníti meg a rendszer:
scs-component scs-button scs-button-style-3
Ha adott összetevőhöz nem tartozik választott stílus, akkor az alapértelmezett scs-type-default-style stílust használja a rendszer. Ekkor az előző példához tartozó gombot a következő osztályokkal jeleníti meg a rendszer:
scs-component scs-button scs-button-default-style
Az scs-component-content stílus
Minden beépített összetevőnél a korábban említett scs-component <div> elemen belül a content <div> is szerepel az scs-component-content CSS osztállyal. Azaz:
scs-component scs-type design-style scs-component-content
A design.css fájlban az scs-component-content osztályt gyakran az összetevő körüli terület stílusának megadására használják (például szegély vagy árnyék alkalmazásához).
Nem jelent semmit, hogy a beépített comp.css fájlban a közös scs-component-content osztály a CSS egyéb tulajdonságai között a position:relative és az display:inline-block beállítással van definiálva.
Míg a scs-component-content az egyes összetevők körüli terület stílusának megadásában hasznos, az összetevőfüggő osztályoknak teljesen meg kell határozniuk az összetevő stílusát. Lásd: Összetevőfüggő stílusok.