Nastavenie štýlu podľa komponentu

Komponent obrázka

Komponent obrázka má nasledujúcu štruktúru tried CSS pod triedou scs-component-content:

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

Trieda scs-image-image sa použije na samotnú značku <img>. Trieda scs-image-caption umožňuje určiť štýl titulku, ak existuje.

Triedu scs-image-link obsahuje len vtedy, ak je k obrázku pripojené prepojenie. Táto trieda ani trieda scs-image-container obvykle nevyžadujú vlastný štýl.

Titulok obrázka sa predvolene vykreslí ako polopriehľadné prekrytie v spodnej časti obrázka.

.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;
}

Ak chcete, aby sa titulky nachádzali vo vrchnej časti obrázka a chcete zmeniť farby, do súboru design.json pridajte ďalší štýl pre komponent obrázka a potom preň definujte štýl CSS v súbore 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;
}

Komponent tlačidla

Komponent tlačidla má nasledujúcu štruktúru tried:

scs-button-button
    scs-button-text

Trieda scs-button-button sa vzťahuje na značku <div>, na ktorú je možné kliknúť a má štýl tlačidla. Trieda scs-button-text umožňuje určiť štýl textu vnútri tlačidla.

Vyskúšajte si napríklad zmeniť dizajn komponentu tlačidla pridaním ďalšieho štýlu do súboru design.json a potom preň definujte štýl CSS v súbore 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

Komponent dokumentu má nasledujúcu štruktúru tried:

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

Trieda scs-document-container sa vzťahuje na prehliadač dokumentov a obvykle nemá žiadny štýl.

Galéria

Komponent galérie má jednu triedu, ktorá sa vzťahuje na podkladový komponent jazdca JSSOR:

scs-gallery-container 

Jazdec JSSOR používa niekoľko tried, pre ktoré môžete tiež nastaviť štýl:

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

Mriežka galérie

Triedy, ktoré sa použijú pre komponent mriežky galérie, závisia od rozloženia a orezania, ktoré ste vybrali na paneli Nastavenia:

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

V závislosti od vybraných nastavení orezania a rozloženia pre mriežku galérie bude mať vlastnosť layout hodnotu stretch (natiahnuť), crop (orezať), fit (prispôsobiť) alebo flowing (zľava doprava).

Trieda scs-gallerygrid-cell bude zahrnutá iba pre rozloženia stĺpcov.

Panel sociálnych sietí

Komponent panela sociálnych sietí má nasledujúcu štruktúru tried:

scs-socialbar-container
  scs-socialbar-icon

Trieda scs-socialbar-icon sa použije na každú značku <img> na paneli sociálnych sietí.

Odsek

Komponent odseku má iba jednu triedu, ktorá sa vzťahuje na samotný text odseku:

scs-paragraph-text 

Ak napríklad chcete, aby mal text, ktorý pridáte do komponentu odseku, efekt textu vyrytého do kovu, do súboru design.json pridajte ďalšiu triedu štýlu a následne definujte štýl CSS v súbore 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;
}

Alebo ak chcete niečo nápadnejšie, použite kód podobný tomu v nasledujúcom príklade.

.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;
}

Nadpis

Komponent nadpisu má tiež iba jednu triedu, ktorá sa vzťahuje na samotný text:

scs-title-text 

Mapa

Komponent mapy má iba jednu triedu, ktorá sa vzťahuje na formát výstupu mapy:

scs-map-content

Táto trieda obvykle nemá žiadny štýl.

Vlastný lokálny komponent

Vlastný lokálny komponent má iba jednu triedu, ktorá sa vzťahuje na samotný komponent:

scs-custom-component-wrapper 

Máte úplnú kontrolu nad štýlmi CSS, ktoré potrebujete použiť na vykreslenie vlastného zobrazenia pre svoj vlastný lokálny komponent. Lokálny komponent sa vykresľuje vnorene, čiže môžete priamo použiť štýly CSS, ktoré sú definované v motíve alebo súbore design.css.

Vlastný vzdialený komponent

Vlastný vzdialený komponent má iba jednu triedu, ktorá sa vzťahuje na jeho objekt iframe:

scs-app-iframe-wrapper

Okrem štýlov CSS, ktoré sú definované vo vlastnom vzdialenom komponente, môžete použiť aj súpravu Sites SDK na načítanie súboru design.css z hostiteľskej lokality.

// 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);
  }
 }
});

Môžete tým určiť, aby komponent zdedil štýl hostiteľa.

Oddeľovač

Hoci neexistujú žiadne triedy, ktoré by boli špecifické pre komponent oddeľovača, pre samotnú značku <hr> možno nastaviť štýl.

Môžete napríklad vytvoriť bodkovaný oddeľovač:

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

Video, YouTube a medzerník

Neexistujú žiadne štýly, ktoré by boli špecifické pre komponenty videa, YouTube alebo medzerníka.