Cookie-Hinweis Smartphone

27.10.2014

Mehr Einstellmöglichkeiten für die Blog-Beschreibung ermöglichen

Für die Blog-Beschreibung besteht im Blogger-Vorlagendesigner üblicherweise nur die Möglichkeit, die Farbe einzustellen. In der Vorlage Reise/Travel bewirkt das nicht mal etwas.

Mit zwei Änderungen im HTML kann man die Einstellmöglichkeiten für die Blog-Beschreibung erweitern und dafür sorgen, dass sie funktionieren. Im Ergebnis wird man für die Blog-Beschreibung nicht nur erfolgreich die Schriftfarbe, sondern auch die Schriftgröße und vor allem auch die Schriftart wählen können.

Das sind die Standards

Blog-Beschreibung - Einstellmöglichkeiten im Designer - Standard


Dass es nur diese eine Eintragsmöglichkeit gibt, liegt daran, dass im HTML unter der Group "Blog Description" nur eine Variable für Farbe eingetragen ist.
Blog-Beschreibung - Group-Variable im HTML - Standard
Unter "value" wird in der Variable festgehalten, was man im Designer zuletzt eingestellt und gespeichert hat.



Damit dieses "value" aber auch tatsächlich im Blog Wirkung zeigt, braucht es noch einen passenden CSS-Eintrag, der im Style-Bereich des HTML zu finden ist. Das Dollarzeichen deutet immer darauf hin, dass ein CSS-Kommando auf eine Variable zugreift.
Blog-Beschreibung - Style-Kommandos im HTML - Standard


Hier sieht man ein Beispiel dafür, dass Chaos bezüglich der Blog-Beschreibung in den Blogger-Vorlagen herrscht. Es wird hier auf Schriftgröße zugegriffen, die jedoch gar nicht als Variable hinterlegt ist, weshalb man sie im Designer nicht einstellen kann. In der Vorlage Reise/Travel fehlt sogar außerdem die Zeile für den Zugriff auf "color", weshalb man die Farbe im Designer zwar einstellen kann, das CSS aber auf die Einstellung nicht zugreift. Die Einstellung im Designer bleibt deshalb in dieser Vorlage ohne Effekt.

Das muss man ändern

Vorbemerkung: Bevor man unter "HTML bearbeiten" etwas ändert, sollte man vorsichtshalber immer eine aktuelle Backup-Datei der Vorlage runterladen. (Link oben rechts unter "Vorlage".)

Man braucht also noch eine weitere Variable, um die Einstellmöglichkeit für Schriftart und Schriftgröße im Designer zu haben und man benötigt das CSS-Kommando, das auf diese Variable zugreift.

Ich habe mir behelfsmäßig angesehen, was für den Blog-Titel eingetragen ist und habe die jeweiligen Einträge für "font" kopiert und den Namen der Variable darin geändert. In der Variable habe ich auch die Voreinstellung der Schriftgröße verringert.  Je nach Vorlage ist eine andere Schriftart im Blog-Titel voreingestellt, deshalb trifft das folgende Beispiel nur auf die Vorlage zu, aus der ich die Variable kopiert hatte.

Um die Stelle zu finden, an der man die variable eintragen kann, muss man nach Blog Description suchen

Folgend ist die Variable, die ergänzt werden muss und die für Schriftart und Schriftgröße zuständig ist, gelb markiert. Ich habe sie oberhalb der Variable für die Farbe eingefügt.


<Group description="Blog Description" selector=".header .description">
<Variable name="description.font" description="Font" type="font"
default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

<Variable name="description.text.color" description="Description Color" type="color"
default="#777777" value="#000000"/>
</Group>

Um die Stelle zu finden, an der man das CSS eintragen kann, das auf die Variable zugreift, muss man nach .description suchen.

Im CSS habe ich den Zugriff auf das nicht vorhandene "font-size" entfernt und statt dessen den Code für den Zugriff auf das umfassendere und nun tatsächlich als Variable vorhandene "font" eingefügt. Auch das ist hier gelb markiert und ich habe es oberhalb der Zeile für den Zugriff auf die Farbe eingetragen. Ich habe den Eintrag für die Farbe orange markiert, weil Nutzer der Vorlage Reise/Travel auch diese Zeile benötigen.

.Header .description {
font: $(description.font);
color: $(description.text.color);
}

Nach den Änderungen auf "Vorlage speichern" klicken und warten bis das erledigt ist. Dann auf "Zurück" klicken.

Ergebnis der Änderung


Im Blogger-Vorlagendesigner sieht es nun für die Blog-Beschreibung wie folgt aus:

Blog-Beschreibung - Einstellmöglichkeiten - nach Änderung im HTML

Das Bild zeigt, dass bereits Einstellungen vorgenommen wurden und man sieht, dass die Einstellungen tatsächlich Effekt zeigen.


Ute Ziemes, sg.utez.de,

1 Kommentar:

  1. danke!
    ich habe eine Travel-Vorlage und bei mir haben die Tipps funktioniert. Die Änderungen klingen komplizierter, als sie sind. Du hast es perfekt beschrieben!

    AntwortenLöschen