Tutti i componenti built-in di Sites condividono una struttura di classi CSS simile.
Ogni componente dispone delle tre classi CSS seguenti applicate all'elemento <div> più esterno:
scs-component scs-type design-style
type rappresenta il tipo di componente (ad esempio image, gallery o divider). design-style indica la classe di stili scelta per un componente, definita nel file del tema.
Nozioni di base sugli stili del tema
Nel file design.json di un tema sono elencati tutti gli stili (frame, shadow, highlighted e così via) che possono essere applicati a ogni tipo di componente (ad esempio button o image). Ogni stile dispone di un display name (nome visualizzato) e di un class name (nome classe). Il nome visualizzato viene mostrato nella scheda Stile del pannello Impostazioni. Il nome classe fa riferimento a un selettore CSS definito nel file design.css del tema. Ad esempio, di seguito è riportata l'immissione per il componente 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"
}
]
},
I nomi dei componenti built-in sono tradotti, pertanto è visibile una chiave per ottenere il nome dello stile dal bundle delle risorse. Se si aggiunge un componente button a una pagina e quindi si sceglie lo stile Semplice nel pannello Impostazioni > Stile, il file design.json assocerà il nome visualizzato Semplice (chiave COMP_STYLE_SIMPLE) al nome classe scs-button-style-3. Il rendering del componente button verrà eseguito con le classi seguenti:
scs-component scs-button scs-button-style-3
Se non viene scelto alcuno stile per un componente specificato, verrà utilizzato lo stile predefinito scs-type-default-style. Nell'esempio precedente il rendering del pulsante verrà eseguito con le classi seguenti:
scs-component scs-button scs-button-default-style
Stile scs-component-content
Per ogni componente built-in, all'interno dell'elemento scs-component <div> indicato in precedenza, esiste un elemento content <div> con la classe CSS scs-component-content. In altre parole:
scs-component scs-type design-style scs-component-content
Nel file design.css la classe scs-component-content viene spesso utilizzata per applicare uno stile alla "casella" che racchiude il componente (ad esempio per applicare un bordo o l'ombreggiatura).
Vale la pena osservare che nel file comp.css built-in la classe scs-component-content è definita, tra le altre proprietà, con position:relative e display:inline-block.
Mentre la classe scs-component-content è utile per l'applicazione degli stili alla "casella" che racchiude ogni componente, le classi specifiche dei componenti sono necessarie per applicare tutti gli stili ai componente. Vedere Stili specifici dei componenti.