Image-Gadget: Titel ausblenden

Seit dem 17.09.2013 muss man im Image-Gadget einen Titel eintragen, sonst kann man das Gadget nicht speichern. Für das freie Gestalten der Sidebar ist das sehr störend. Da die Änderung offenbar nicht zurück genommen wird, notiere ich hier, was man tun kann, damit über einem bestimmten Image-Gadget oder sämtlichen Image-Gadgets kein Titel erscheint.

---

Kein Titel - aber Raumeinnahme

Trägt man als Titel den HTML-Code für ein Leerzeichen ein, dann kann man das Gadget speichern. Es erscheint kein Titel, aber die Raumeinnahme für den Titel ist vorhanden.

Ein möglicher HTML-Code für ein Leerzeichen:  

Kein Titel und keine Raumeinnahme

Trägt man einen Titel ein, blendet ihn aber per CSS aus, dann sieht man ihn nur unter Layout, aber nicht in der Sidebar. Außerdem verhindert das Ausblende-Kommando auch die Raumeinnahme durch einen Titel. Das CSS-Kommando trägt man unter Vorlage > Anpassen > Erweitert > CSS hinzufügen ein.

Titel eines bestimmten Image-Gadgets ausblenden

Will man nur den Titel eines bestimmten Image-Gadgets ausblenden, dann muss man die Gadget-ID des ensprechenden Image-Gadgets im Quelltext ausfindig machen. Die ID findet man da, wo das Gadget anfängt, also über dem Titel. Folgend ist das Ausblendekommando für den Titel des Gadgets mit der ID Image2 notiert:

/* Titel des Image-Gadgets Image2 ausblenden */
#Image2 h2 {
display:none;
}

Titel aller Image-Gadgets ausblenden

Will man grundsätzlich alle Titel der Image-Gadgets ausblenden, braucht man keine ID, sondern muss die Klasse der Gadgets nutzen. Man kann den Titel aller Image-Gadgets mit dem folgenden CSS-Code ausblenden:

/* Titel aller Image-Gadgets ausblenden */
.Image h2 {
display:none;
}

Abstand des Image nach oben korrigieren

Wer für seine Gadgets eine Hintergrundfarbe, ein Hintergrundbild oder einen Rahmen nutzt, der braucht nun ggf. zusätzlich ein Abstandskommando für das Image bzw. die Images nach oben; denn durch die fehlende Titel-Raumeinnahme steht das Bild nun direkt am oberen Gadget-Rand bzw. dichter am oberen Rand als nach unten hin.

Bild-Abstandskommando in bestimmtem Image-Gadget

/* Image-Gadget Image2: Abstand des Images darin nach oben erhöht */
#Image2 img {
margin-top:10px;
}

Bild-Abstandskommando in sämtlichen Image-Gadgets

/* Image-Gadgets: Abstand der Images darin nach oben erhöht */
.Image img {
margin-top:10px;
}

Ute Ziemes, sg.utez.de, 2014-07-31