CSS-Tags für Layouts anpassen

Wenn Sie den Vorlagendesigner mit dem CSS-Code in der Vorlage Ihres Blogs verwenden möchten, sollten Sie sich an einige Richtlinien halten.

Variablen einrichten

Im <head>-Abschnitt des Codes muss ein Paar der Tags <b:skin> </b:skin> enthalten sein.

Die CSS-Stildeklarationen werden zwischen diesen Tags eingefügt, ebenso wie die Variablennamen, durch die Ihr Design mit der Seite "Schriftarten und Farben auswählen" zusammenarbeiten kann.

Beispiel

<head>

    

    ...

    <b:skin>

     <style type='text/css'>

     /*

      * Variablendefinitionen:

      *  <Variable name='bgcolor' description='Hintergrundfarbe für Seite'

          type='color' default='#fff'/>

      */

     body {

       background: $bgcolor;

       margin: 0;

       padding: 40px 20px;

     }

     </style>

    </b:skin>

    </head>

Der CSS-Code innerhalb der Kommentar-Tags /* und */ wird in Ihrem Blog nicht angezeigt.

Hier finden Sie eine Liste von Variablen, wobei es jeweils eine Variable für jede der Schriftarten und Farben gibt, die über den Tab "Schriftarten und Farben auswählen" bearbeitbar sein sollen. Zu jeder Variablen müssen die im Beispiel oben dargestellten und nachstehend beschriebenen Informationen angegeben werden:

name – Kann Buchstaben oder Zahlen enthalten. Jeder Name in der Vorlage darf nur einmal vergeben werden.
description – Fügen Sie eine Beschreibung hinzu, die im Abschnitt "Schriftarten und Farben auswählen" angezeigt werden soll.
type – "Font" (Schriftart) oder "color" (Farbe).
default – Der Standardwert. Bei Farben sollte dies ein hexadezimaler Farbcode sein, z. B. #FF0066. Bei Farben ist dies eine Liste im Format "font-style font-weight font-size font-family".

Variablen verwenden

Wenn Sie die Variablen eingerichtet haben und den Wert einer Variablen verwenden möchten, geben Sie im CSS-Code b:skin $variable_name ein.

Variablentypen

Im Vorlagendesigner wird das Bearbeiten von bestimmten CSS-Variablentypen unterstützt. So legen Sie den Variablentyp fest:

Farbvariablen stellen eine Farbpalette zum Auswählen von Farben im Vorlagendesigner bereit.
Durch Schriftartenvariablen wird im Vorlagendesigner eine Auswahl von Schriftarten mit Optionen für Größe sowie Fett- und Kursivdruck bereitgestellt.

Im Beispiel oben sehen Sie eine Variable mit dem Namen bgcolor, die auf Weiß (#fff) festgelegt ist. Im folgenden Code steht background: $bgcolor. Hiermit wird der Hintergrund weiß dargestellt und Sie können ihn im Abschnitt "Schriftarten und Farben auswählen" ändern.

Hinweis: Für andere Typen von CSS-Attributen müssen Sie keine Variablen erstellen. Diese können wie üblich (wie die Attribute margin: und padding: im Beispiel oben) in den CSS-Code eingeschlossen werden.

Weitere Informationen zu CSS