benutzerstile

Benutzerstile sind gewöhnliche CSS-Stile, die im Sitecake-Symbolleisten-Dropdown aufgelistet werden, damit Bearbeiter sie auswählen und anwenden können. Sie geben Kunden kuratierte Formatierungsoptionen, ohne den Code anzufassen.

Wenn ein Designer eine Website erstellt, definiert er eine Reihe konsistenter visueller Stile für Text, Bilder, Listen und alles andere. Manchmal ist es sinnvoll, alternative Stile zu entwerfen, die der Website-Bearbeiter (Kunde) bei Bedarf anwenden kann. Wir nennen diese Benutzerstile.

Um einen Benutzerstil zu erstellen, muss eine spezifische CSS-Regel in einem externen Stylesheet definiert werden — entweder eine .css-Datei, die über <link> eingebunden wird, oder ein Inline-Stil, der über <style> definiert wird.

Beispiele

Gegeben diese einfache HTML-Struktur:

<div class="sc-content sidebar">
  ...
</div>

<div id="main-column" class="sc-content main">
  ...
</div>

Wären folgende gültige Benutzerstile:

Beispiel 1

.sidebar p.red { background-color: red; }
.sidebar p.blue { background-color: blue; }

Definiert zwei Varianten (Rot und Blau) des p-Tags im Sidebar-Container.

Beispiel 2

.sidebar ul.red-dot {
  padding: 5px;
}

.sidebar ul.red-dot li {
  background: url(../images/red-dot.png);
}

.sidebar ul.blue-dot li {
  background: url(../images/blue-dot.png);
}

Definiert zwei Stile (red-dot und blue-dot) für ul-Tags in der Sidebar.

Beispiel 3

.sidebar p.red, .main p.red {
  ...
}

Definiert einen red-Benutzerstil für Absätze sowohl im sidebar- als auch im main-Container.

Beispiel 4

#main-column > div.sc-html.outlined {
  outline: solid 1px red;
}

Definiert einen outlined-Stil für benutzerdefinierte HTML-Elemente im main-Container.

Was nicht funktioniert

Ein Stil ohne den übergeordneten Container in der Deklaration:

p.red { color: red; }

Wenn Sie den übergeordneten Container nicht angeben, weiß Sitecake nicht, für welchen Container der Stil angeboten werden soll.