info-Widget - Wie Formatierung beeinflussen?

[starwarsfan]

Hallo miteinander,

gibt es eine Möglichkeit, die Formatierung des InfoWidget zu beeinflussen? Bspw. sieht das bei mir im Moment wie folgt aus:

infoWidget01.png

Der Punkt ist nun, wie ich einerseits die Zeilenumbrüche in der Beschriftung verhindern kann und andererseits wie ich die Werte an den rechten Rand bekomme. Mit dem align-Parameter wird ja nur die Beschriftung verschoben und das sieht dann auch nicht gerade prickelnd aus:

infoWidget02.png

Schlussendlich soll einfach die gesamte Breite ausgenutzt werden, indem die Texte sauber am linken Rand und die Werte am rechten Rand stehen. Übersehe ich etwas oder muss ich dafür tatsächlich das CSS anfassen?

[NetFritz]

Hallo
Ich würde den Text kürzen.
zB. T WQ Eintr.
Mann kann auch ein Text und Info Feld erstellen.
Gruß NetFritz

[starwarsfan]

Hi,

das Modifizieren der Texte wollte ich eigentlich vermeiden, obiges war nur ein Beispiel von vielen. Unabhängig davon, wie bekomme ich den Value des InfoWidget an den rechten Rand?

[peuter]

So ohne weiteres geht das nicht, das align ist eher für das Label gedacht und verschiebt den Wert nicht. Da muss Du schon selbst ran z.B. mit einer eigenen CSS-class für die Widgets, die Du so manipulieren willst.

<info class="value_right">....

Und dann in die custom.css:

.widget.info.custom_value_right > .actor > .value {
    text-align: right;
   width : 50%
}

Damit hättest Du schonmal der Wert des Infowidgets nach rechts verschoben (ist allerdings ungetestet), hilft aber nicht bei Deinem ursprünglichen Problem, denn das Label nimmt weiterhin nur 50% der Breite ein und damit wird der Text immer noch umgebrochen. Und das zu ändern ist alles andere als trivial, ich wüsste jetzt nicht wie.

[starwarsfan]

Hallo Tobias,

danke für den Vorschlag. Hab's so versucht, nur leider ändert sich am Layout gar nichts. Da scheint noch etwas an der CSS-Klasse nicht zu stimmen. Allerdings spreche ich nicht wirklich CSS und kann da im Moment nicht nachvollziehen, was ich da eigentlich mache. Muss mich da mal einarbeiten...

Ist "value_right" nicht etwas anderes als "custom_value_right"? Aber auch wenn ich diese beiden Strings gleich setze, ändert das nichts.

Es ist schon so, dass custom.css des jeweiligen Designs automatisch eingebunden wird, oder?

[LexionTT]

Bei CSS sollte man beachten, dass Änderungen nicht unmittelbar angezeigt werden, da das CSS im Browser gecached wird.

Nach einer Änderung entweder mit Strg+F5 die Seite aktualisieren oder gleich mit den Dev Tools vom Browser (IE Dev Tools, Firebug oder Chrome Dev Tools) arbeiten.
Dort kann man beim Anklicken auch wunderbar die Klassen erkennen und per Flag auf "immer vom Server holen" umstellen. Weiterer Vorteil ist die testweise Anpassung der Werte.

Grüße,
Flo

[peuter]

Ist "value_right" nicht etwas anderes als "custom_value_right"? Aber auch wenn ich diese beiden Strings gleich setze, ändert das nichts.

Da wird intern automatisch ein 'custom_' vorgesetzt, damit man nicht versehentlich den vorhandenen CSS-Klassen in die Quere kommt. Ansonsten Hat Flo recht, der Browsercache ist da meist der Übertäter.

[starwarsfan]

Hallo miteinander,

offenbar hat Chrome einen besonders hartnäckigen Cache. Aktualisieren mit Strg + F5 hat nichts gebracht, erst das komplette Löschen des Browser-Cache hat geholfen.

[Chris M.]

Das Label stammt noch aus der Zeit als wir nur zwei Spalten hatten.
Jetzt mit dem 12 Spalten-Layout kannst Du für's Label natürlich ein einzelnes Text-Widget nutzen und dem Info einfach kein Label geben.