Benutzerstile

Benutzerstile sind gewöhnliche CSS-Stile, die im Dropdown-Menü der Sitecake-Symbolleiste aufgelistet werden, damit der Editor sie auswählen und anwenden kann.

Wenn ein Designer eine Website gestaltet, definiert er eine Reihe von gut aussehenden, konsistenten visuellen Stilen für Text, Bilder, Listen und alles andere. Manchmal ist es nützlich, eine Reihe alternativer Stile zu entwerfen, die der Website-Editor (Kunde) bei Bedarf anwenden kann. Diese Art von Stilen nennen wir Benutzerstile.

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

Genug Theorie, hier einige Beispiele:

Beispiele

Wenn Sie die grundlegende HTML-Seitenstruktur wie folgt haben:

wären folgende gültige Benutzerstile:

Beispiel 1

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

definiert zwei Varianten (blau und rot) 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) des ul-Tags im sidebar-Container.

Beispiel 3

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

definiert den red-Benutzerstil für Absätze in beiden Containern sidebar und main.

Beispiel 4

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

definiert die outlined-Stilvariante für benutzerdefinierte HTML-Elemente im main-Container (ausgewählt über seine ID).

Was nicht funktioniert

Stil ohne Eltern-Element in der Deklaration:

p.red { color:red; }

Wenn Sie das Eltern-Element nicht angeben, weiß Sitecake nicht, für welchen Container dieser alternative Stil angeboten werden soll.