Komponentenspezifische Formatierung

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.