Vorlage Wasserzeichen: Tabs rechts außen klickbar machen

In der Vorlage Wasserzeichen (Watermark) liegt rechts außen ein transparentes oder gar unsichtbares Feld als eine Schicht auf dem Tabbereich. Je nach Tableistenbreite einerseits und Bildschirmbreite andererseits kann es dazu kommen, dass dieses Feld die letzten Tabs bedeckt und verhindert, dass diese angeklickt werden können. Das ist eine - seit ewigen Zeiten - bekannte Fehlkonstruktion der Vorlage, die bisher jedoch nicht korrigiert wurde. Man kann das per CSS aber selbst korrigieren.

---

In den folgenden Bildern bedeckt das Feld einen Link namens X, der deshalb nicht klickbar ist:

Ausschließlich in der Variante "flower" der Vorlage Wasserzeichen, der grün-blauen, hat das Feld eine Funktion. Dort wird mit Hilfe des Feldes das Bild der Pusteblumen eingebunden. Man muss dafür also ein Kommando wählen, das die Pusteblumen nicht entfernt. Bei den drei anderen Varianten der Vorlage erfüllt das Feld keine Funktion. Dort kann man es deshalb auch ganz wegblenden, wenn man will.

Links klickbar machen über "CSS hinzufügen"

Kommando, das in allen Varianten wirkt:

Es gibt ein CSS-Kommando, das in allen vier Varianten dazu führt, dass die Links klickbar werden und dass in der grün-blauen Version der Vorlage zudem die Einblendung der Pusteblumen bewahrt bleibt.

Das Kommando sorgt dafür, dass das Feld um eine Schicht tiefer gelegt wird. Es bedeckt dann nicht länger die Links, sondern umgekehrt überlagern die Links das Feld und sind deshalb klickbar.

Das Kommando kann man unter Vorlage > Anpassen > Erweitert > CSS hinzufügen eintragen und dann auf "Auf das Blog anwenden" klicken, um es zu speichern.

/* Alle Varianten der Vorlage Wasserzeichen - Durchsichtiges Feld, das die Links rechts außen bedeckt, eine Schicht tiefer gelegt, so dass die Links klickbar sind. */
.main-cap-top .cap-left {
z-index: -1;
}

Ergebnisbeispiel

vorher

nachher

Kommandos, die nur in den Varianten "birds", "navigator" und "bubblegum" Sinn machen:

Für die Varianten der Vorlage, in denen das Feld keine Funktion hat, kann man statt dessen andere Kommandos einsetzen, wenn man das will. Z.B. kann man da den Abstand des Feldes nach unten erhöhen und es dadurch hochschieben oder die Höhe des Feldes auf Null stellen, damit es ganz weg ist.

Also unter Vorlage > Anpassen > Erweitert > CSS hinzufügen entweder das eine Kommando oder das andere eintragen:

/* Durchsichtiges Feld, das die Links rechts außen bedeckt, durch mehr Abstand nach unten, etwas nach oben geschoben, so dass die Links klickbar sind. */
.main-cap-top .cap-left {
bottom: 50px;
}

/* Durchsichtiges Feld, das die Links rechts außen bedeckt, auf 0px Höhe gestellt, so dass es weg ist und die Links klickbar sind. */
.main-cap-top .cap-left {
height:0px;
}

Links klickbar machen über "HTML bearbeiten"

Falls man das gewünschte Kommando lieber unter Vorlage > HTML bearbeiten eintragen möchte, kann man alternativ dort nach .cap-left suchen und dann unter .main-cap-top .cap-left das gewählte Kommando eintragen.

Aber Achtung, über "HTML bearbeiten", haut einem das die benutzerdefinierte Mobilvorlage raus. Dieser Weg ist also nur dann eine Option, wenn man ausschließlich die Webvorlage anbietet oder an der gewählten Mobilvorlage keinesfalls etwas ändern will.

So sieht es da ursprünglich aus:

So sieht es da aus, wenn man die Zeile z-index:-1; ergänzt hat:

So sieht es da aus, wenn man die Zeile margin-bottom:50px; ergänzt hat:

So sieht es da aus, wenn man die Zeile height:245px; in height:0px; geändert hat:

Weiterführender Link

• Vorlagenvarianten bei Blogger: Wasserzeichen Web | Mobil

Ute Ziemes, sg.utez.de, 27.06.2014