Styly specifické pro jednotlivé komponenty

Komponenta obrázek

Komponenta obrázek má pod třídou scs-component-content následující strukturu třídy CSS:

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

Třída scs-image-image se používá pro samotný tag <img>. Třída scs-image-caption se používá k nastavení stylu titulku, pokud titulek existuje.

Třída scs-image-link je k dispozici, pouze pokud je k obrázku připojen odkaz. Vlastní nastavení stylu obvykle nevyžaduje ani třída scs-image-container.

Ve výchozím nastavení je popisek obrázku generován jako poloprůhledná překryvná vrstva, která se rozkládá přes spodní část obrázku.

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

Chcete-li umístit titulky k hornímu okraji obrázku a změnit barvy, přidejte do souboru design.json dodatečný styl pro komponentu obrázek a poté pro ni definujte šablonu stylů CSS v souboru 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;
}

Komponenta tlačítko

Komponenta tlačítko má následující strukturu tříd:

scs-button-button
    scs-button-text

Třída scs-button-button je <div> umožňující kliknutí se stylem odpovídajícím vzhledu tlačítka. Třída scs-button-text se používá k nastavení stylu textu uvnitř tlačítka.

Například vyzkoušejte změnu vzhledu komponenty tlačítko tím, že pro ni přidáte dodatečný styl do souboru design.json a poté pro ni definujte šablony stylů CSS v souboru 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

Komponenta dokument má následující strukturu tříd:

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

Třída scs-document-container je určena pro prohlížeč dokumentů a normálně pro ni není nastaven styl.

Galerie

Komponenta galerie má jedinou třídu, která zastřešuje základní komponentu posuvníku JSSOR:

scs-gallery-container 

Posuvník JSSOR používá několik tříd, pro které můžete také nastavit styl:

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

Mřížka galerie

Třídy použité pro komponentu mřížka galerie závisí na rozvržení a oříznutí vybraném na panelu Nastavení:

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

V závislosti na nastaveních oříznutí a rozvržení vybraných pro mřížku galerie bude mít parametr layout hodnotu stretch, crop, fit nebo flowing.

Třída scs-gallerygrid-cell je dostupná pouze pro rozvržení sloupců.

Pruh funkcí sociální sítě

Komponenta pruh funkcí sociální sítě má následující strukturu tříd:

scs-socialbar-container
  scs-socialbar-icon

Třída scs-socialbar-icon se používá pro každý tag <img> na panelu funkcí sociální sítě.

Odstavec

Komponenta odstavec má pouze jedinou třídu, která zastřešuje skutečný text odstavce:

scs-paragraph-text 

Chcete-li například textu, kterým přispíváte do komponenty odstavec, zajistit efekt textu vyrytého do kovu, přidejte dodatečnou třídu stylu do souboru design.json a poté pro ni definujte šablony stylů CSS v souboru 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;
}

Nebo pokud chcete dosáhnout uměleckého vzhledu, použijte něco podobného jako v následujícím příkladu.

.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

Komponenta nadpis má také pouze jedinou třídu, která zastřešuje skutečný text:

scs-title-text 

Mapa

Komponenta mapa má jedinou třídu, která zastřešuje vykreslení mapy:

scs-map-content

Tato třída nemá normálně nastaven styl.

Vlastní místní komponenta

Vlastní místní komponenta má pouze jedinou třídu, která zastřešuje skutečnou komponentu:

scs-custom-component-wrapper 

Máte plnou kontrolu nad styly CSS, které je nutné použít ke generování vlastního zobrazení pro vlastní místní komponentu. Místní komponenta se generuje jako vložená, takže můžete přímo použít styly CSS definované v tématu nebo v souboru design.css.

Vlastní vzdálená komponenta

Vlastní vzdálená komponenta má pouze jedinou třídu, která zastřešuje vložený rámec:

scs-app-iframe-wrapper

Kromě použití stylů CSS definovaných ve vlastní vzdálené komponentě můžete využít sadu SDK pro weby k načtení souboru design.css z hostitelského webu.

// 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 tak zajistit, aby komponenta zdědila nastavení stylu ze stylu hostitele.

Rozdělovač

Ačkoli pro komponentu rozdělovač neexistují žádné specifické třídy, může být použit styl pro samotný tag <hr>.

Můžete například vytvořit tečkovaný rozdělovač:

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

Video, YouTube, mezera

Pro komponenty video, YouTube a mezera neexistují žádné třídy, které jsou pro ně specifické.