Größe und Anordnung der Labels in der Wolke

Im Gadget namens "Labels" kann man die Labels, statt als Liste untereinander, auch in einer Wolke anzeigen lassen. Sie stehen dann nebeneinander bis sie durch einen automatischen Zeilenumbruch eine neue Zeile beginnen. Das spart nach unten hin Platz in der Spalte. Leider passt aber das Standard-Design der Wolke und der Labels darin nicht zu jedem Zweck.

---

Standardmäßig ist die Ausrichtung des Wolkeninhalts auf Blocksatz (justify) gesetzt, wodurch unnötig größere Lücken zwischen Labels enstehen können. Die Labels erscheinen außerdem in unterschiedlicher Größe, je nachdem wieviele Posts mit ihnen jeweils markiert wurden, sehr groß oder sehr klein. Das ist jedoch nur dort von Interesse, wo die Menge der Posts zu einem Label irgend eine Wichtigkeit hat. Da die Labels standardmäßig nicht fett angezeigt werden, fallen so die großen Labels sehr ins Auge und die kleinen übersieht man leicht.

Man kann das Erscheinungsbild der Wolke und der Labels durch Kommandos, die man unter Design/Pfeil > Vorlage > Anpassen > Erweitert > CSS hinzufügen einträgt, beeinflussen.

Mögliche Einträge

Am Beispiel, wie ich es in diesem Blog hier gemacht habe.
(Die Werte in den Kommandos kann man so ändern, wie man es gerne hätte.)

Ausrichtung des Inhalts und Angabe des Schrift-Gewichts :

.cloud-label-widget-content { text-align:left; font-weight:600; }

Erläuterung:

Da bei der Standard-Ausrichtung (text-align:justify;) vorgegebene Abstände nach rechts nicht wie gewünscht wirken, richte ich den Wolkeninhalt links aus (text-align:left;). Außerdem gebe ich grundsätzlich Fettschrift für den Bereich vor (font-weight:600;).

Abstände der einzelnen Labels nach rechts:

Das folgende Kommando ersetzt das, was bis zum 20.02.2013 hier eingetragen war. Damit funktioniert der Abstand nun auch im Internet Explorer ansehnlich. Zwar fehlt der Abstand jetzt jeweils neben dem gerade aktivierten Label, weil es in dem Zustand kein Link (a) mehr ist, die Beeinträchtigung ist aber deutlich geringer als die vorige, zumal die Abgrenzung zum Nachbar-Label schon dadurch realisiert ist, dass ein aktiviertes Label eine besondere Farbe annimmt.

.cloud-label-widget-content span a { margin: 0 10px 0 0; }

Erläuterung:

Durch den Abstand sind die Labels deutlicher voneinander abgegrenzt und schneller einzeln wahrnehmbar.

Höhe der einzelnen Zeilen:

span.label-size { line-height: 1.2; }

Erläuterung:

Die Zeilenhöhe (line-height) habe ich wie im Standard gelassen. Ich führe das Kommando hier aber an, weil man nur mit ihm den Abstand der einzelnen Labels nach oben und unten erfolgreich regeln kann.

Größe der einzelnen Labels-Klassen

span.label-size-1 { font-size: 100%; }
span.label-size-2 { font-size: 100%; }
span.label-size-3 { font-size: 100%; }
span.label-size-4 { font-size: 100%; }
span.label-size-5 { font-size: 100%; }

Erläuterung:

Die Labels-Klasse "label-size-5" ist die Klasse mit den meisten Posts, die Klasse "label-size-1", ist die Klasse mit den wenigsten Posts. Ich habe hier alle auf die gleiche Größe gestellt.

Ute Ziemes, sg.utez.de, 21.11.2012, Änderung:21.02.13