Stosowanie stylów do określonych składników

Składnik "obraz"

Składnik "obraz" ma pod klasą scs-component-content następującą strukturę klas CSS:

scs-image-container
scs-image-link
scs-image-image
scs-image-caption

Klasa scs-image-image jest stosowana do samego znacznika <img>. Klasa scs-image-caption służy do przypisania stylu do podpisu (nazwy opisowej), jeśli podpis występuje.

Klasa scs-image-link występuje tylko wtedy, jeśli do obrazu jest dołączone łącze. Zazwyczaj klasa ta ani klasa scs-image-container nie wymaga stosowania stylów niestandardowych.

Domyślnie podpis obrazu jest renderowany jako półprzezroczysta nakładka, rozciągająca się na dole obrazu.

.scs-image .scs-image-caption {
 position: absolute;
 left: 0px;
 bottom: 0px;
 right: 0px;
 background-color: rgba(0, 0, 0, 0.54);
 padding: 0.5em;
 color: #FFFFFF;
}

Chcąc umieścić podpis na górze obrazu i zmienić kolory, należy dodać dla składnika "obraz" własny styl w pliku design.json, a następnie zdefiniować kod CSS w pliku design.css.

.scs-image-style-17 .scs-image-caption {
 position: absolute;
 top: 0px;
 height: 35px;
 font-weight: bold;
 background-color: rgba(122, 213, 256, 0.54);
 color: #515151;
}

Składnik "przycisk"

Składnik "przycisk" ma następującą strukturę klas:

scs-button-button
    scs-button-text

Klasa scs-button-button to klikalny element <div>, stylizowany na przycisk. Klasa scs-button-text służy do stosowania stylów do tekstu zawartego w przycisku.

Na przykład można przetestować modyfikowanie postaci składnika "przycisk" przez dodanie do niego dodatkowego stylu w pliku design.json, a następnie zdefiniowanie kodu CSS w pliku design.css.

.design-style .scs-button-button {
 background-image: linear-gradient(
  to top, #E3E7E9 0%, #E7EBED 50%, #F1F3F3 100%);
 border: 1px solid #c4ced7;
 color: #000000;
}

.design-style .scs-button-button:hover {
background: #f7f8f9;
border: 1px solid #c4ced7;
 color: #0572ce;
}

.design-style .scs-button-button:active {
background: #0572ce;
border: 1px solid #0572ce;
color: #ffffff;
}

.scs-button-style-4 .scs-button-button {
 background-image: radial-gradient(
  red, yellow, green
 );
border: 1px solid #c4ced7;
color: #000000;
}

.scs-button-style-4 .scs-button-button:hover {
 background: #f7f8f9;
 border: 1px solid #c4ced7;
 color: #0572ce;
}

.scs-button-style-4 .scs-button-button:active {
 background: #0572ce;
 border: 1px solid #0572ce;
 color: #ffffff;
}

Dokument

Składnik "dokument" ma następującą strukturę klas:

scs-document-container
 scs-document-cap
  scs-document-title
  scs-document-desc

Klasa scs-document-container otacza przeglądarkę dokumentów i zazwyczaj nie jest do niej stosowany żaden styl.

Galeria

Składnik "galeria" ma jedną klasę otaczającą używany składnik "suwak JSSOR":

scs-gallery-container 

Suwak JSSOR używa kilku klas, do których można stosować style:

jssorb14 (navigator)
jssora02l (left arrow)
jssora02r (right arrow)
jssort07 (thumbnails)

Siatka galerii

Klasy używane dla składnika "siatka galerii" zależą od układu i przycinania, wybranych w panelu Ustawienia:

scs-gallerygrid-container scs-gallerygrid-layout
  scs-gallerygrid-cell
    scs-image (multiple)

W zależności od ustawień przycinania i układu, wybranych dla składnika "siatka galerii", wartością właściwości layout będzie stretch (rozciąganie), crop (przycinanie), fit (dopasowanie) lub flowing (przepływ).

Klasa scs-gallerygrid-cell występuje tylko dla układów "kolumna".

Pasek społecznościowy

Składnik "pasek społecznościowy" ma następującą strukturę klas:

scs-socialbar-container
  scs-socialbar-icon

Klasa scs-socialbar-icon jest stosowana do każdego ze znaczników <img> w elemencie "pasek społecznościowy".

Akapit

Składnik "akapit" ma tylko jedną klasę otaczającą faktyczny tekst akapitu:

scs-paragraph-text 

Na przykład, aby tekst prezentowany za pomocą składnika "akapit" miał postać tekstu grawerowanego na metalu, należy dodać dodatkową klasę stylu w pliku design.json, a następnie zdefiniować dla niej kod CSS w pliku design.css.

.scs-paragraph-style-7 {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 700;
 padding: .3em;
 color: #000000;
 background: #666666;
 text-shadow: 0px 1px 1px #ffffff;
}

Chcąc zaś uzyskać bardziej fantazyjny efekt, można użyć na przykład kodu z poniższego przykładu..

.scs-paragraph-style-8 {
 padding: 20px;
 margin: 10px;
 background: #ff0030;
 color: #fff;
 font-size: 21px;
 font-weight: bold;
 line-height: 1.3em;
 border: 2px dashed #fff;
 border-radius: 10px;
 box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
 text-shadow: -1px -1px #aa3030;
 font-weight: normal;
}

Tytuł

Składnik "tytuł" także ma tylko jedną klasę otaczającą faktyczny tekst:

scs-title-text 

Mapa

Składnik "mapa" ma tylko jedną klasę otaczającą realizację mapy:

scs-map-content

To klasy tej zazwyczaj nie stosuje się własnych stylów.

Niestandardowy składnik lokalny

Składnik "niestandardowy składnik lokalny" ma tylko jedną klasę otaczającą faktyczny składnik:

scs-custom-component-wrapper 

Użytkownik ma pełną kontrolę nad stylami CSS, które mają zostać użyte do renderowania widoku niestandardowego składnika lokalnego. Składnik lokalny jest renderowany wstawkowo; oznacza to, że można do niego bezpośrednio stosować style zdefiniowane w motywie lub w pliku design.css.

Niestandardowy składnik odległy

Składnik "niestandardowy składnik odległy" ma jedną klasę otaczającą jego ramkę iFrame:

scs-app-iframe-wrapper

Oprócz stosowanie stylów CSS zdefiniowanych w niestandardowym składniku odległym, można użyć pakietu Sites SDK do pobrania pliku design.css z serwisu hosta.

// fetch current theme design from host site and then add it to the page
SitesSDK.getSiteProperty('theme',function(data){
 // check if we got a url back
 if ( data.url && typeof data.url === 'string' ) {
  if ( data.url !== '') {
   // theme is loaded, so dynamically inject theme
   SitesSDK.Utils.addSiteThemeDesign(data.url);
  }
 }
});

Tym samym składnik będzie mógł odziedziczyć style ze stylu używanego na hoście.

Separator

Mimo że nie ma klas specyficznych dla składnika "separator", to jednak można stosować style w samym znaczniku <hr>.

Na przykład można utworzyć separator kropkowy:

.design-style .scs-divider hr {
border-top: 1px dotted #333333;
}

Wideo, YouTube, rozdzielacz

Nie ma klas specyficznych dla składników "wideo", "YouTube" ani "rozdzielacz"