Tous les composants de site intégrés partagent une structure de classe CSS similaire.
Chaque composant contient les trois classes CSS suivantes appliquées à son élément <div> externe :
scs-component scs-type design-style
type est le type de composant (par exemple, image, gallery ou divider). design-style est la classe de style choisie pour un composant, telle que définie dans le fichier du thème.
Bases des styles de thème
Le fichier design.json d'un thème répertorie tous les styles (frame, shadow, highlighted, etc.) qui peuvent être appliqués à chaque type de composant (comme un composant de bouton ou d'image). Chaque style est doté d'un nom d'affichage et d'un nom de classe. Le nom d'affichage est visible dans l'onglet Style du panneau Paramètres. Le nom de classe fait référence à un sélecteur CSS dans le fichier design.css du thème. Par exemple, l'entrée du composant de bouton est la suivante :
"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"
}
]
},
Les noms des composants intégrés sont traduits pour que vous puissiez voir une clé vous permettant d'obtenir le nom de style à partir du regroupement de ressources. Si vous ajoutez un composant de bouton à une page, puis choisissez le style Simple dans le panneau Paramètres, le fichier design.json associe le nom d'affichage Simple (clé COMP_STYLE_SIMPLE) au nom de classe scs-button-style-3. Le composant de bouton sera affiché avec les classes suivantes :
scs-component scs-button scs-button-style-3
Si vous ne choisissez aucun style pour un composant donné, le style par défaut scs-type-default-style est utilisé. Dans l'exemple précédent, le bouton sera affiché avec les classes suivantes :
scs-component scs-button scs-button-default-style
Style scs-component-content
Pour tout composant intégré, l'élément scs-component <div> mentionné précédemment contient l'élément content <div> avec la classe CSS scs-component-content. En d'autres termes :
scs-component scs-type design-style scs-component-content
Dans le fichier design.css , la classe scs-component-content est souvent utilisée pour appliquer un style à la zone autour du composant (par exemple, pour appliquer une bordure ou une ombre).
Dans le fichier comp.css intégré, la classe scs-component-content courante est définie avec position:relative et display:inline-block, entre autres propriétés CSS.
Si scs-component-content permet d'appliquer un style à la zone autour de chaque composant, des classes propres au composant sont nécessaires pour appliquer un style à tout le composant. Reportez-vous à Style propre au composant.