Neue Variablen und Styles - Download

Hier kann man einzelne Abschnitte kopieren oder die kompletten Änderungen runterladen.

Testpost für Links in der Mobilversion

Hiermit habe ich getestet, welche Zeilenhöhe und Abstände zwischen Links in der mobilen Version des Blogs benötigt werden, um ihre treffsichere Antippbarkeit zumindest geringfügig zu verbessern. Unter der mobilen Version dieses Posts kann man die Unterschiede zwischen dem ursprünglichen Standard und dem Resultat, das aus den folgenden Kommandos resultiert, sehen.

Nutzen Sie ebenfalls die Vorlage TEKKA?

Falls Sie ebenfalls ein Blog mit der Vorlage TEKKA betreiben oder ein solches entdeckt haben, würde ich mich freuen, wenn Sie hier die Adresse des Blogs eintragen würden.

Gadget-Ausblendungen wirken auch unter Layout

Bei der klassischen Vorlage TEKKA wirken Gadget-Ausblendungen für die Weversion via Style/CSS, die unter Vorlage > HTML bearbeiten oder unter Vorlage > Anpassen > Erweitert > CSS hinzufügen eingetragen wurden, nicht nur im Blog, sondern auch unter Layout.

Die Klasse namens clear

Neben der Möglichkeit nach einem gefloateten Bild via <div style="clear:both;"></div> das Floating zu beenden, um folgenden Inhalt nicht neben dem Bild stehen zu haben, kann man standardmäßig in der TEKKA-Vorlage auch die Klasse namens clear nutzen. Vorteil der Klasse: Der Abstand zum Folgeinhalt ist normal.

Ute Ziemes, , vorlagetekka.blogspot.com

Individuelle Änderungen

Was ich hier im Blog zusätzlich an individuellen Änderungen vorgenommen habe, liste ich in diesem Post auf.

Mehrfarbiger Hintergrund gewünscht?

Man kann auch Variablen eintragen, mit deren Hilfe man für einen Bereich einen mehrfarbigen Hintergrund zuordnen kann. Jede einzelne Farbe, die in dem Hintergrund vorkommen soll, kann man über den Vorlagendesigner eingeben. Die Idee und Anleitung dafür habe ich von dort: http://bloggerillustrated.blogspot.ch/2012/07/how-to-add-support-for-blogger-template-designer-in-custom-templates.html. Ich habe es nur mit alternativen Namen und Werten gefüllt.

Hintergrundbild

Wenn man ein Hintergrundbild haben will, kann man eines mittels Eintrag im Stylebereich des HTML oder unter "CSS hinzufügen" einbinden. Das geht nach folgendem Muster:

Gadgets in der Webversion

Die Gadgets Kopfzeile, Seiten, Profil, Blog-Archiv, Attribution sind vorinstalliert. Ich habe zusätzlich die sonst noch üblichsten Gadgets getestet (Labels, Bild, Text, HTML/JavaScript, Abonnieren, Followers) und kann berichten, dass man sie in der Vorlage nutzen kann. Man kann sie im Layout auch wie gewohnt überall dort hin ziehen, wo noch Platz im Layout ist und sie werden dort jeweils angezeigt. Allerdings gibt es keine Styleangaben für den Footer, sondern man muss selbst Außen- oder Innenabstände für den Bereich oder die Gadgets darin angeben.

Mobile Version der Vorlage

Wenn man ein paar Styleänderungen vorgenommen hat, lohnt es sich, die mobile Version der Vorlage TEKKA zu nutzen, statt einer der anderen. Dazu muss man zunächst unter Vorlage > Mobil auf "Benutzerdefiniert" stellen und das speichern.

Neue Variablen und Styles - Dokumentation

Ich habe bei den Variablen so viel ergänzt, wie mir persönlich erforderlich erschien. Dazu gehörte, die separate Änderbarkeit des Font (Schriftart, Schriftgröße und Schriftgewicht) für jeden einzelnen Bereich sowie eine separate Hintergrundfarbe für die Page-Liste. Bei den Styles war mir vor allem wichtig, dass die Großbuchstaben des Blogtitels und die Einrückung der ersten Zeilen deaktiviert wird. Außerdem habe ich die Breitenangaben des Main-Containers und des Sidebar-Containers geändert und Außenabstände für sie festgelegt, so, dass die Sidebar in jeder Screen-Breite angezeigt wird. Bei sehr schmalem Screen ist der Inhalt dann nicht mehr gut lesbar und man schaltet besser auf "Mobil" um. Für die Mobilversion habe ich Kommandos eingetragen, die die Sidebar ausblenden und den Hauptbereich in voller Breite anzeigen. Wirken können die Mobil-Kommandos nur, wenn man seine Mobilvorlage auf "Benutzerdefiniert" gestellt hat.

Folgend habe ich den Variablen- und Stylebereich des HTML eingefügt, wie er nach meinen Änderungen aussieht, ohne die Styles, die ich zusätzlich für die Mobilvorlage und meine individuellen Bedarfe eingetragen habe.

Ursprüngliche Variablen und Styles

Hier im Post habe ich die Variablen und Style-Kommandos festgehalten, wie sie ursprünglich im HTML der Vorlage stehen.

Änderbarkeit des Designs

Grundsätzlich steht im Vorlagendesigner nur der Bereich unter "Erweitert" zur Verfügung. Viele vorgefertigte Änderungsmöglichkeiten hat man in der ursprünglichen Fassung aber auch dort nicht. Es wird im Vorschaufenster auch nicht angezeigt, welcher Bereich gerade bearbeitet wird. Unter "CSS hinzufügen" kann man aber alles ändern. Die Änderungen sieht man im Vorschaufenster.