Komponenttikohtainen tyyli

Kuva-komponentti

Kuva-komponentilla on seuraava CSS-luokkarakenne scs-component-content-luokan alla:

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

scs-image-image-luokkaa käytetään varsinaiselle <img>-tunnisteelle. scs-image-caption-luokkaa käytetään kuvatekstin tyylissä, jos kuvalla on kuvateksti.

scs-image-link-luokka on mukana vain, jos kuvaan on liitetty linkki. Se ei tavallisesti tarvitse räätälöityä tyyliä, kuten ei myöskään scs-image-container-luokka.

Kuvan kuvateksti muodostetaan oletusarvoisesti puoliksi läpinäkyvänä peittokuvana kuvan alaosaan.

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

Jos haluat asettaa kuvatekstit kuvan yläosaan ja muuttaa värejä, lisää ylimääräinen tyyli Kuva-komponentille design.json-tiedostossa ja määritä sitten sen CSS-koodi design.css-tiedostossa.

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

Painike-komponentti

Painike-komponentin luokkarakenne on seuraava:

scs-button-button
    scs-button-text

scs-button-button-luokka on napsautettava <div>-elementti, josta on tehty painikkeen näköinen. scs-button-text-luokan avulla voi määrittää tyylin painikkeen sisällä olevalle tekstille.

Jos haluat esimerkiksi kokeilla Painike-komponentin käyttötuntuman muuttamista, lisää ylimääräinen tyyli sille design.json-tiedostossa ja määritä sitten sen CSS-koodi design.css-tiedostossa.

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

Asiakirja

Asiakirja-komponentin luokkarakenne on seuraava:

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

scs-document-container-luokka sisältää asiakirjojen katseluohjelman, eikä sillä tavallisesti ole tyyliä.

Galleria

Galleria-komponentilla on yksi luokka, joka sisältää perustana olevan JSSOR-liukusäädinkomponentin:

scs-gallery-container 

JSSOR-liukusäätimessä käytetään useita luokkia, joille voi myös määrittää tyylin:

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

Galleriaruudukko

Galleriaruudukko-komponentissa käytetyt luokat vaihtelevat Asetukset-paneelissa valitun asettelun ja rajauksen mukaan:

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

layout-arvo vaihtelee galleriaruudukolle valittujen rajauksen ja asettelun asetusten mukaan, ja se voi olla stretch, crop, fit tai flowing.

Vain Sarake-asettelut sisältävät scs-gallerygrid-cell-luokan.

Yhteisöpalvelupalkki

Yhteisöpalvelupalkki-komponentin luokkarakenne on seuraava:

scs-socialbar-container
  scs-socialbar-icon

scs-socialbar-icon-luokkaa käytetään jokaisessa yhteisöpalvelupalkin <img>-tunnisteessa.

Kappale

Kappale-komponentilla on vain yksi luokka, joka sisältää varsinaisen kappaleen tekstin:

scs-paragraph-text 

Voit esimerkiksi käyttää Kappale-komponenttiin syötetyssä tekstissä metalliin kaiverretun tekstin tehostetta. Voit tehdä tämän lisäämällä ylimääräisen tyyliluokan design.json-tiedostossa ja määrittämällä sitten sen CSS-koodin design.css-tiedostossa.

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

Jos haluat luoda todella tyylikkään vaikutelman, sovella esimerkiksi seuraavaa esimerkkiä.

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

Otsikko

Otsikko-komponentilla on myös vain yksi luokka, joka sisältää varsinaisen tekstin:

scs-title-text 

Kartta

Kartta-komponentilla on yksi luokka, joka sisältää kartan muodostuksen:

scs-map-content

Tällä luokalla ei yleensä ole tyyliä.

Räätälöity paikallinen komponentti

Räätälöity paikallinen komponentti -komponentilla on vain yksi luokka, joka sisältää varsinaisen komponentin:

scs-custom-component-wrapper 

Voit hallita täysin CSS-tyylejä, joita käytetään räätälöidyn paikallisen komponentin räätälöidyn näkymän muodostukseen. Paikallinen komponentti muodostetaan rivinsisäisesti. Tämä tarkoittaa sitä, että voit käyttää teemassasi tai design.css-tiedostossa määritettyjä CSS-tyylejä suoraan.

Räätälöity etäkomponentti

Räätälöity etäkomponentti -komponentilla on vain yksi luokka, joka sisältää sen iframe-elementin:

scs-app-iframe-wrapper

Räätälöidyssä etäkomponentissa määritettyjen CSS-tyylien käytön lisäksi voit hakea design.css-tiedoston pääsivustosta sivustojen SDK:n avulla.

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

Tällä tavoin voit määrittää komponentin perimään tyylit pääsivuston tyyleistä.

Erotin

Erotin-komponentille ei ole komponenttikohtaisia luokkia, mutta varsinaiselle <hr>-tunnisteelle voi määrittää tyylin.

Voit esimerkiksi luoda pisteviivaerottimen:

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

Video, YouTube, Spacer

Video-, YouTube- ja Spacer-komponenteille ei ole komponenttikohtaisia luokkia.