Toate componentele predefinite în Sites au o structură de clase CSS similară.
Fiecare componentă are următoarele trei clase CSS aplicate asupra elementului <div> exterior:
scs-component scs-type design-style
Parametrul type reprezintă tipul componentei (de exemplu image (imagine), gallery (galerie) sau divider (separator)). Parametrul design-style reprezintă clasa de stiluri selectată pentru o componentă, după cum se defineşte în fişierul temei.
Noţiuni de bază despre stilurile temelor
Fişierul design.json al unei teme listează toate stilurile (frame (cadru), shadow (umbră), highlighted (evidenţiere) etc.) care pot fi aplicate asupra fiecărui tip de componentă (de exemplu button (buton) sau image (imagine)). Fiecare stil are un display name şi un class name. Numele afişat apare în fila Stil din panoul Setări. Numele de clasă face referire la un selector CSS din fişierul design.css al temei. De exemplu, intrarea pentru componenta button (buton) este următoarea:
"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"
}
]
},
Numele componentelor predefinite sunt traduse, astfel că veţi vedea o cheie pentru a prelua numele de stil din setul de resurse. Dacă adăugaţi o componentă button (buton) la o pagină şi apoi alegeţi stilul Simplu în panoul Setări > Stil, fişierul design.json va asocia numele afişat Simplu (cheiaCOMP_STYLE_SIMPLE) cu numele de clasă scs-button-style-3. button va fi randat cu următoarele clase:
scs-component scs-button scs-button-style-3
Dacă nu se alege niciun stil pentru componenta respectivă, se va utiliza stilul prestabilit, scs-type-default-style. În exemplul precedent, butonul va fi randat cu următoarele clase:
scs-component scs-button scs-button-default-style
Stilul scs-component-content
Pentru fiecare componentă predefinită, în interiorul separatorului scs-component <div> menţionate anterior, există o componentă content <div> cu clasa CSS scs-component-content. Cu alte cuvinte:
scs-component scs-type design-style scs-component-content
În fişierul design.css , clasa scs-component-content este utilizată adesea pentru a stiliza "caseta" din jurul componentei (de exemplu, pentru prin aplicarea unui chenar sau unei umbre).
Este important de reţinut că în fişierul predefinit comp.css, clasa comună scs-component-content este definită, printre alte proprietăţi CSS, de position:relative şi display:inline-block.
Metoda scs-component-content este utilă pentru stilizarea "casetei" din jurul fiecărei componente, însă pentru stilizarea completă a unei componente sunt necesare clase specifice componentelor. Consultaţi Aplicarea unui stil specific componentelor.