Tüm yerleşik Siteler bileşenleri, benzer bir CSS sınıfı yapısını paylaşır.
Her bileşenin en dıştaki <div> öğesine uygulanmış şu üç CSS sınıfı vardır:
scs-component scs-type design-style
type bileşen tipidir (örneğin image, gallery veya divider). design-style, bir bileşen için temanın dosyasında tanımlandığı gibi seçilen stil sınıfıdır.
Temel Tema Stili Bilgileri
Bir temanın design.json dosyası, her bileşen tipine (button veya image) uygulanabilen tüm stilleri (frame, shadow, highlighted vb.) listeler. Her stilde display name ve class name vardır. Görünen ad, Ayarlar panelinin Stil sekmesinde gösterilir. Sınıf adı, temanın design.css dosyasındaki bir CSS seçiciyi işaret eder. Örneğin, button bileşeni için giriş aşağıdaki gibidir:
"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"
}
]
},
Yerleşik bileşenlerin adları çevrilir, böylece kaynak paketinden stil adı almak için bir anahtar görürsünüz. Bir sayfaya bir button bileşeni ekleyip ardından Ayarlar > Stil panelinde Basit stilini seçerseniz design.json dosyası Basit görünen adını (COMP_STYLE_SIMPLE anahtarı) scs-button-style-3 sınıf adıyla ilişkilendirir. button şu sınıflarla görüntülenir:
scs-component scs-button scs-button-style-3
Belirli bir bileşen için stil seçilmezse stil öndeğeri olan scs-type-default-style kullanılır. Önceki örnekte düğme aşağıdaki sınıflarla görüntülenir:
scs-component scs-button scs-button-default-style
scs-component-content Stili
Her yerleşik bileşen için daha önce bahsedilen scs-component <div> içerisinde scs-component-content CSS sınıfına sahip bir content <div> vardır. Başka bir deyişle:
scs-component scs-type design-style scs-component-content
design.css dosyasında scs-component-content sınıfı genellikle bileşenin etrafındaki "kutuya" stil kazandırmak için kullanılır (örneğin kenarlık veya gölge uygulamak için).
Yerleşik comp.css dosyasında scs-component-contentsınıfının başka CSS niteliklerinin yanında position:relative ve display:inline-block ile tanımlandığına dikkat edilmesi gerekir.
scs-component-content, her bileşenin etrafındaki "kutuya" yönelik stil oluşturmak için yararlı olsa da, bir bileşene tamamen stil oluşturmak için bileşene özel sınıflar gereklidir. Bkz. Bileşene Özel Stil Oluşturma.