SS4 Config » Eigene CSS-Stile

css editor

Für alle individuellen Gestaltungsideen steht ein einfacher CSS-Editor bereit unter: Einstellungen CSS. Hier kann beliebig mit CSS gestaltet werden. Die Ausgabe dieses Editorfeldes wird als letzte CSS-Datei geladen, daher können bestehende Eigenschaften überschrieben oder zusätzlich erstellt werden.

Eigene CSS Deklarationen

Bsp: Die in der Grundkonfiguration formatierten Titel sind Blau. Soll nur der Haupttitel "h1" Rot, mit Schatten und in SmallCaps formatiert werden, kann eine eigene Regel in das Editorfeld gesetzt werden:

h1 {
  color: #f00;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
  font-variant: small-caps;
}

Der blaue Titel wird durch die Farben unter Einstellungen > Farbe formatiert, der rote Titel wird durch die CSS-Deklaration im Editorfeld überschrieben:

h1 vergleich

Bestehende Klassen und ID's verwenden

Jede Seite hat eine eigene ID, es wird jeweils das verwendete URLSegment der Seite im Container ausgegeben. Das URLSegment jeder Seite setzt sich aus dem Titel zusammen und wird oben im Editor angezeigt. Bsp: Die Seite "CSS" besitzt die ID="css", Die Seite "Navigation" die ID="navigation". Sie wird jeweils dem Inhalts-Container angehängt.

<div class="container" id="css">

Mit dieser ID ist jede Seite individuell. Wird nur der Titel der Seite CSS neu formatiert, ist dies über den Selektor "#css h1" möglich.

#css h1 {
  color: #f00;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
  font-variant: small-caps;
}

Eine eigene CSS-Klasse setzen

Mit dem Editor kann für jedes beliebige Element eine Klasse oder ID gesetzt werden. Für den roten und den blauen Absatz wurde eine individuelle Klasse direkt in den Editor geschrieben. Die CSS-Deklaration unter Einstellungen > CSS eingefügt.

<p class="rotertext"> ... </p>
<p class="blauertext"> ... </p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.rotertext {
   color:#f00;
}
.blauertext {
   color:#4b6fd8;
}

Inline CSS im Editor einfügen

Mit dem Editor kann mit der Ikone "Quelltext <>" jederzeit der Quelltext angezeigt und editiert werden. In jedem HTML-Element kann eine Klasse oder eine ID direkt geschrieben werden.

<span style="color: #f00;">"Quelltext &lt;&gt;"</span>

quelltext fenster