Összetevőfüggő stílusok

Kép összetevő

A kép összetevő a következő CSS osztálystruktúrával rendelkezik az scs-component-content osztály alatt:

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

Az scs-image-image osztályt magára az <img> címkére alkalmazza a rendszer. Az scs-image-caption osztály a felirat stílusának megadására szolgál, ha szerepel a felirat.

Az scs-image-link osztály csak akkor szerepel, ha a kép csatolt hivatkozással rendelkezik. Sem ez sem az scs-image-container osztály általában nem igényel egyéni stílust.

Alapértelmezés szerint a kép felirata félig áttetsző átfedésként jelenik meg a kép alján.

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

A felirat kép tetején való megjelenítéséhez és a színek módosításához vegyen fel külön stílust a kép összetevő számára a design.json fájlban, majd definiáljon stíluslapot ehhez a design.css fájlban.

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

Gomb összetevő

A gomb összetevő a következő osztálystruktúrával rendelkezik:

scs-button-button
    scs-button-text

Az scs-button-button osztály kattintható <div> elem olyan stílussal, amely gombszerű kinézetet kölcsönöz. Az scs-button-text osztály a gombon belüli szöveg stílusának megadására szolgál.

Például tesztelje a gomb összetevő megjelenését külön stílus felvételével a design.json fájlban, majd definiáljon stíluslapot ehhez a design.css fájlban.

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

Dokumentum

A dokumentum összetevő a következő osztálystruktúrával rendelkezik:

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

Az scs-document-container osztály a dokumentummegtekintőt foglalja magába, és általában nem igényel stílust.

Galéria

A galéria összetevő egyetlen osztállyal rendelkezik, amely az alapul szolgáló JSSOR csúszka összetevőt foglalja magába:

scs-gallery-container 

A JSSOR csúszka számos osztályt használ, amelyeknél megadhatja az stílust:

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

Galériarács

A galériarács összetevőhöz használt osztályok a Beállítások panelen választott elrendezéstől és vágástól függenek:

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

A galériarácshoz választott vágási és elrendezési beállítástól függően a layout értéke stretch, crop, fit vagy flowing lehet.

Az scs-gallerygrid-cell osztály csak hasábos elrendezéseknél szerepel.

Közösségi sáv

A közösségi sáv összetevő a következő osztálystruktúrával rendelkezik:

scs-socialbar-container
  scs-socialbar-icon

Az scs-socialbar-icon osztály a közösségi sávon lévő minden <img> címkére vonatkozik.

Bekezdés

A bekezdés összetevő egyetlen osztállyal rendelkezik, amely a tényleges bekezdésszöveget foglalja magába:

scs-paragraph-text 

Például a bekezdés összetevőben fémbe vésett szöveghatás eléréséhez vegyen fel külön stílusosztályt a design.json fájlban, majd definiáljon stíluslapot ehhez a design.css fájlban.

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

Vagy ha valami különlegeset szeretne, használjon a következő példához hasonlót.

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

Cím

A cím összetevő egyetlen osztállyal rendelkezik, amely a tényleges szöveget foglalja magába:

scs-title-text 

Térkép

A térkép összetevő egyetlen osztállyal rendelkezik, amely a térkép-megjelenítést foglalja magába:

scs-map-content

Ehhez az osztályhoz általában nem tartozik stílus.

Egyéni helyi összetevő

Az egyéni helyi összetevő egyetlen osztállyal rendelkezik, amely a tényleges összetevőt foglalja magába:

scs-custom-component-wrapper 

A felhasználó teljes körűen szabályozhatja azokat a CSS stílusokat, amelyeket egyéni nézet megjelenítéséhez kíván használni egyéni helyi összetevőinél. A helyi összetevők beágyazva jelennek meg, azaz közvetlenül alkalmazhatók a témában vagy a design.css fájlban definiált CSS stílusok.

Egyéni távoli összetevő

Az egyéni távoli összetevő egyetlen osztállyal rendelkezik, amely a beágyazott keretet foglalja magába:

scs-app-iframe-wrapper

Az egyéni távoli összetevőben definiált CSS stílusok alkalmazása mellett a Sites SDK segítségével egy design.css fájl is behívható a gazdawebhelyről.

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

Ily módon az összetevő stílusokat örökölhet a gazdastílusból.

Elválasztó

Bár az elválasztó összetevőhöz nem tartoznak külön osztályok, magához a <hr> címkéhez megadható stílus.

Létrehozhat például egy pontozott elválasztót:

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

Videó, YouTube, térköz

A videó, YouTube és a térköz összetevőhöz nem tartoznak külön osztályok.