Sie können bestimmte Stile auf Bilder, Schaltflächen, Dokumente, Absätze, Titel, Karten und andere Komponenten anwenden.
Bildkomponente
Die Bildkomponente weist die folgende CSS-Klassenstruktur unter der Klasse scs-component-content
auf:
scs-image-container scs-image-link scs-image-image scs-image-caption
Die Klasse scs-image-image
wird auf das <img>
-Tag selbst angewendet. Die Klasse scs-image-caption
wird zum Formatieren der Bildunterschrift verwendet, falls vorhanden.
Die Klasse scs-image-link
ist nur vorhanden, wenn dem Bild ein Link zugeordnet ist. In der Regel erfordert weder diese Klasse noch die Klasse scs-image-container
benutzerdefinierte Stile.
Standardmäßig wird die Bildunterschrift als halbdurchsichtige Überlagerung entlang der unteren Bildkante gerendert.
.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; }
Um die Bildtexte oben im Bild zu platzieren und Farben zu ändern, fügen Sie einen zusätzlichen Stil für die Bildkomponente in der Datei design.json
hinzu, und definieren Sie dann CSS dafür in der Datei 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; }
Schaltflächenkomponente
Die Schaltflächenkomponente weist die folgende Klassenstruktur auf:
scs-button-button scs-button-text
Die Klasse scs-button-button
ist das anklickbare <div>
-Tag, das wie eine Schaltfläche formatiert wird. Mit der Klasse scs-button-text
wird der Text in der Schaltfläche formatiert.
Beispiel: Testen Sie verschiedene Look-and-Feels für die Schaltflächenkomponente, indem Sie einen zusätzlichen Stil in der Datei design.json
hinzufügen und dann CSS dafür in der Datei design.css
definieren.
.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
Die Dokumentkomponente weist die folgende Klassenstruktur auf:
scs-document-container scs-document-cap scs-document-title scs-document-desc
Die Klasse scs-document-container
wrappt den Dokument-Viewer und wird in der Regel nicht formatiert.
Galerie
Die Galeriekomponente weist eine einzelne Klasse auf, die die zugrunde liegende JSSOR-Schiebereglerkomponente wrappt:
scs-gallery-container
Der JSSOR-Schieberegler verwendet mehrere Klassen, die Sie ebenfalls formatieren können:
jssorb14 (navigator) jssora02l (left arrow) jssora02r (right arrow) jssort07 (thumbnails)
Galerieraster
Die für die Galerierasterkomponente verwendeten Klassen sind vom Layout und Zuschnitt abhängig, die im Bereich Einstellungen ausgewählt werden:
scs-gallerygrid-container scs-gallerygrid-layout scs-gallerygrid-cell scs-image (multiple)
Je nach den für das Galerieraster ausgewählten Zuschnitts- und Layouteinstellungen lautet der Wert von layout
"stretch", "crop", "fit" oder "flowing".
Die Klasse scs-gallerygrid-cell
ist nur für Spaltenlayouts vorhanden.
Social-Leiste
Die Social-Leistenkomponente weist die folgende Klassenstruktur auf:
scs-socialbar-container scs-socialbar-icon
Die Klasse scs-socialbar-icon
wird auf jedes <img>
-Tag in der Social-Leiste angewendet.
Absatz
Die Absatzkomponente weist eine einzelne Klasse auf, die den eigentlichen Absatztext wrappt:
scs-paragraph-text
Beispiel: Um Text, der in der Absatzkomponente abgesendet wird, wie in Metall eingraviert aussehen zu lassen, fügen Sie eine zusätzliche Stilklasse in der Datei design.json
hinzu, und definieren Sie dann CSS dafür in der Datei 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; }
Sie können auch einen ausgefalleneren Stil wie den Folgenden verwenden.
.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
Die Titelkomponente weist ebenfalls nur eine einzelne Klasse auf, die den eigentlichen Text wrappt:
scs-title-text
Karte
Die Kartenkomponente weist eine einzelne Klasse auf, die die Kartenformatvariante wrappt:
scs-map-content
Diese Klasse wird in der Regel nicht formatiert.
Benutzerdefinierte lokale Komponente
Die benutzerdefinierte lokale Komponente weist nur eine einzelne Klasse auf, die die eigentliche Komponente wrappt:
scs-custom-component-wrapper
Sie haben die volle Kontrolle über die CSS-Stile, die Sie zum Rendern einer benutzerdefinierten Ansicht für Ihre benutzerdefinierte lokale Komponente benötigen. Eine lokale Komponente wird inline gerendert. Das heißt, Sie können im Theme oder in der Datei design.css
definierte CSS-Stile direkt anwenden.
Benutzerdefinierte Remotekomponente
Die benutzerdefinierte Remotekomponente weist nur eine einzelne Klasse auf, die den zugehörigen iFrame wrappt:
scs-app-iframe-wrapper
Sie können nicht nur in der benutzerdefinierten Remotekomponente definierte CSS-Stile anwenden, sondern auch das Sites-SDK verwenden, um eine design.css
-Datei von der Hostsite abzurufen.
// 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); } } });
So kann Ihre Komponente Stile vom Hoststil erben.
Trennlinie
Auch wenn es keine komponentenspezifischen Klassen für die Trennlinienkomponente gibt, kann das <hr>
-Tag selbst formatiert werden.
Sie können z.B. eine gepunktete Trennlinie erstellen:
.design-style .scs-divider hr { border-top: 1px dotted #333333; }
Video, YouTube, Abstandhalter
Es gibt keine komponentenspezifischen Klassen für Video-, YouTube- oder Abstandhalterkomponenten.