Komponentspesifikk stil

Bildekomponent

Bildekomponenten har følgende CSS-klassestruktur under klassen scs-component-content:

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

Klassen scs-image-image brukes for selve <img>-koden. Klassen scs-image-caption brukes til å formatere bildeteksten, hvis bildeteksten finnes.

Klassen scs-image-link finnes bare hvis bildet har en tilknyttet kobling. Denne klassen og klassen scs-image-container trenger vanligvis ikke egendefinerte stiler.

Bildetekster gjengis som standard som et delvis gjennomsiktig overlegg langs bunnen av bildet.

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

Hvis du vil plassere bildetekstene øverst i bildet og endre farger, legger du til ekstra stil for bildekomponenten i filen design.json, og deretter definerer du CSS for den i filen 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;
}

Knappekomponent

Knappekomponenten har følgende klassestruktur:

scs-button-button
    scs-button-text

Klassen scs-button-button er den klikkbare <div>, med stil for å se ut som en knapp. Klassen scs-button-text brukes til å formatere teksten i knappen.

Du kan for eksempel teste endring av utseende og virkemåte for knappekomponenten ved å legge til ekstra stil for den i filen design.json, og deretter definerer du CSS for den i filen 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

Dokumentkomponenten har følgende klassestruktur:

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

Klassen scs-document-container innkapsler dokumentvisningen og er vanligvis ikke formatert.

Galleri

Gallerikomponenten har én enkelt klasse som innkapsler den underliggende komponenten for JSSOR-glidebryteren:

scs-gallery-container 

JSSOR-glidebryteren bruker flere klasser som du også kan formatere:

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

Gallerirutenett

Klassene som brukes for komponenten for gallerirutenettet, avhenger av oppsettet og beskjæringen valgt i ruten Innstillinger:

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

Verdien for layout vil være Strekk, Beskjær, Tilpass eller Flytende, avhengig av innstillingene for beskjæring og oppsett valgt for gallerirutenettet.

Klassen scs-gallerygrid-cell er bare tilgjengelig for kolonneoppsett.

Sosialt-felt

Komponenten for sosialt-felt har følgende klassestruktur:

scs-socialbar-container
  scs-socialbar-icon

Klassen scs-socialbar-icon brukes for hver <img>-kode i sosialt-feltet.

Avsnitt

Avsnittskomponenten har bare én enkelt klasse som innkapsler den faktiske avsnittsteksten:

scs-paragraph-text 

Hvis du for eksempel vil at tekst du bidrar med i avsnittskomponenten, skal ha en effekt som gravert i metall, legger du til en ekstra stilklasse i filen design.json, og deretter definerer du CSS for den i filen 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;
}

Hvis du vil gjøre noe mer avansert, kan du se i det neste eksemplet.

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

Tittel

Tittelkomponenten har også bare én enkelt klasse som innkapsler den faktiske teksten:

scs-title-text 

Kart

Kartkomponenten har én enkelt klasse som innkapsler kartgjengivelsen:

scs-map-content

Denne klassen er vanligvis ikke formatert.

Egendefinert lokal komponent

Den egendefinerte lokale komponenten har også bare én enkelt klasse som innkapsler den faktiske komponenten:

scs-custom-component-wrapper 

Du har full kontroll over CSS-stilene du trenger for å gjengi egendefinert visning for den egendefinerte lokale komponenten. En lokal komponent gjengis innebygd. Det vil si at du kan bruke CSS-stiler definert i temaet eller i filen design.css direkte.

Egendefinert ekstern komponent

Den egendefinerte eksterne komponenten har også bare én enkelt klasse som innkapsler den innebygde rammen (IFrame):

scs-app-iframe-wrapper

I tillegg til å bruke CSS-stiler definert i den egendefinerte eksterne komponenten, kan du bruke SDK-et for områder til å hente en design.css-fil fra vertsområdet.

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

Du kan dermed angi at komponenten skal arve stilen fra vertsstilen.

Skille

Det finnes ingen komponentspesifikke klasser for skillekomponenten, men selve koden <hr> kan formateres.

Du kan for eksempel opprette et prikket skille:

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

Video, YouTube, mellomrom

Det finnes ingen komponentspesifikke klasser for video-, YouTube- eller mellomromskomponenter.