Alla inbyggda webbplatskomponenter delar en liknande CSS-klasstruktur.
Varje komponent har följande tre CSS-klasser tillämpade på sitt yttersta <div>-element:
scs-component scs-type design-style
type är komponenttypen (t.ex. image, gallery eller divider). design-style är den valda formatklassen för en komponent, enligt definitionen i temats fil.
Grunderna om temamallar
Ett temas design.json-fil listar alla format (frame, shadow, highlighted osv.) som kan tillämpas på varje typ av komponent (t.ex.button eller image). Varje format har både ett display name och ett class name. Visningsnamnet visas på fliken Format i panelen Inställningar. Klassnamnet refererar till en CSS-väljare i temats design.css-fil. Här följer ett exempel på inmatningen för komponenten button:
"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"
}
]
},
Namn på inbyggda komponenter översätts, så du ser en nyckel när du ska hämta formatnamnet från resurspaketet. Om du lägger till komponenten button på en sida och sedan väljer formatet Enkelt i panelen Inställningar > Format så associerar filen design.json visningsnamnet Enkelt (nyckeln COMP_STYLE_SIMPLE) med klassnamnet scs-button-style-3. button återges med följande klasser:
scs-component scs-button scs-button-style-3
Om inget format väljs för en viss komponent så används standardformatet, scs-type-default-style. I föregående exempel återges knappen med följande klasser:
scs-component scs-button scs-button-default-style
Formatet scs-component-content
För varje inbyggd komponent finns det, inuti scs-component <div> som nämndes tidigare, en content <div> med CSS-klassen scs-component-content. Med andra ord:
scs-component scs-type design-style scs-component-content
I filen design.css används klassen scs-component-content ofta för att formatera "rutan" runt komponenten (t.ex. tillämpa en kantlinje eller skugga).
Det är värt att notera att i den inbyggda comp.css-filen definieras den gemensamma klassen scs-component-content med position:relative och display:inline-block, bland andra CSS-egenskaper.
scs-component-content är användbar för att formatera "rutan" runt varje komponent, men komponentspecifika klasser behövs för den fullständiga formateringen av en komponent. Se Komponentspecifika format.