U kunt specifieke stijlen toepassen op afbeeldingen, knoppen, documenten, alinea's, titels, kaarten en andere componenten.
Afbeeldingscomponent
De afbeeldingscomponent heeft de volgende CSS-klassenstructuur onder de klasse scs-component-content
:
scs-image-container scs-image-link scs-image-image scs-image-caption
De klasse scs-image-image
wordt toegepast op de tag <img>
zelf. De klasse scs-image-caption
wordt gebruikt om een stijl op het bijschrift toe te passen, als er een bijschrift is.
De klasse scs-image-link
is alleen aanwezig als er aan de afbeelding een koppeling is toegevoegd. Noch voor deze klasse noch voor de klasse scs-image-container
zijn doorgaans aangepaste stijlen vereist.
Standaard wordt het afbeeldingsbijschrift weergegeven als een halftransparante overlay langs de onderkant van de afbeelding.
.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; }
Als u de bijschriften aan de bovenkant van de afbeelding wilt plaatsen en kleuren wilt wijzigen, voegt u een extra stijl voor de afbeeldingscomponent toe in het bestand design.json
en definieert u er CSS voor in het bestand 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; }
Knopcomponent
De knopcomponent heeft de volgende klassenstructuur:
scs-button-button scs-button-text
De klasse scs-button-button
is de <div>
waarop kan worden geklikt, die eruitziet als een knop. De klasse scs-button-text
wordt gebruikt om een stijl toe te passen op de tekst op de knop.
Test het wijzigen van het uiterlijk van de knopcomponent door er een extra stijl aan toe te voegen in het bestand design.json
en definieer er CSS voor in het bestand 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; }
Document
De documentcomponent heeft de volgende klassenstructuur:
scs-document-container scs-document-cap scs-document-title scs-document-desc
De klasse scs-document-container
zorgt voor terugloop in de documentviewer en heeft doorgaans geen stijl.
Galerie
De galeriecomponent heeft één klasse waarmee voor terugloop van de onderliggende Jssor Slider-component wordt gezorgd:
scs-gallery-container
Voor de Jssor Slider worden verscheidene klassen gebruikt die u ook een stijl kunt geven:
jssorb14 (navigator) jssora02l (left arrow) jssora02r (right arrow) jssort07 (thumbnails)
Galerieraster
De klassen die worden gebruikt voor de galerierastercomponent hangen af van de lay-out en de bijsnijding die zijn geselecteerd in het paneel Instellingen:
scs-gallerygrid-container scs-gallerygrid-layout scs-gallerygrid-cell scs-image (multiple)
Afhankelijk van de instellingen voor bijsnijden en lay-out die zijn geselecteerd voor 'Galerieraster' is de waarde van layout
'stretch', 'crop', 'fit' of 'flowing'.
De klasse scs-gallerygrid-cell
is alleen aanwezig voor lay-outs van het type 'Kolom'.
Sociale balk
De component voor sociale balk heeft de volgende klassenstructuur:
scs-socialbar-container scs-socialbar-icon
De klasse scs-socialbar-icon
wordt toegepast op elke tag <img>
op de sociale balk.
Alinea
De alineacomponent heeft slechts één klasse die zorgt voor de terugloop van de werkelijke alineatekst:
scs-paragraph-text
Bijvoorbeeld: als u een tekst wilt schrijven die u kunt bijdragen aan de component 'Alinea' en die een gegraveerd tekst-op-metaal effect heeft, voegt u een extra stijlklasse toe aan het bestand design.json
en definieert u er vervolgens CSS voor in het bestand 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; }
Of als u iets leuks wilt, gebruikt u zoiets als in het volgende voorbeeld.
.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; }
Titel
De titelcomponent heeft ook slechts één klasse die zorgt voor de terugloop van de werkelijke tekst:
scs-title-text
Kaart
De kaartcomponent heeft één klasse die zorgt voor terugloop van de kaartweergave:
scs-map-content
Deze klasse heeft doorgaans geen stijl.
Aangepaste lokale component
De aangepaste lokale component heeft slechts één klasse die zorgt voor de terugloop van de werkelijke component:
scs-custom-component-wrapper
U hebt volledige controle over de CSS-stijlen die u moet gebruiken om een aangepaste weergave voor uw aangepaste lokale component te renderen. Een lokale component wordt inline weergegeven; dat wil zeggen dat u CSS-stijlen die zijn gedefinieerd in uw thema of in het bestand design.css
rechtstreeks toepast.
Aangepaste externe component
De aangepaste externe component heeft slechts één klasse die zorgt voor de terugloop van het iframe:
scs-app-iframe-wrapper
Naast het toepassen van CSS-stijlen die zijn gedefinieerd in uw aangepaste externe component, kunt u Sites SDK gebruiken om een bestand design.css
op te halen van de hostsite.
// 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); } } });
Op die manier kunt u zorgen dat voor uw component de stijl van de hoststijl wordt overgenomen.
Divider
Hoewel er geen componentspecifieke klassen zijn voor de dividercomponent, kan de tag <hr>
zelf een stijl krijgen.
U kunt bijvoorbeeld een gestippelde divider maken:
.design-style .scs-divider hr { border-top: 1px dotted #333333; }
Video, YouTube, spacer
Er zijn geen componentspecifieke klassen voor de componenten voor video, YouTube of spacer.