Widget Zähler

Salut Standak

Von Haus aus wird die gewünschte Möglichkeit leider nicht geboten. Das Zähler-Widget lässt sich jedoch mit etwas CSS entsprechend anpassen.

Ich poste Dir hier bald eine Bastelanleitung.

Bis bald.

Viele Grüsse

elch

Also. Hier bin schon ich wieder 😊, mit einem Lösungsmodell.

1. CSS-Befehl erstellen.

Nehmen wir mal an, Du möchtest in unterschiedlichen Zähler-Widgets «Tage» und «€» anzeigen lassen. Dazu erstellen wir 2 unterschiedliche CSS-Klassen (class).

Gehe zu «Einstellungen» -> «CSS» und füge gemäss Beispiel folgenden Code in das Feld ein …

<style>
.zaehlerTage .zpcounterwidget::after {content: " Tage";} /* Leerschlag vor Wert für Abstand */
.zaehlerEuro .zpcounterwidget::after {content: " €";} /* Leerschlag vor Wert für Abstand */
</style>

Mit «OK» speichern und schliessen.

2. Erstelle das Zähler-Widget an gewünschter Stelle.

Wähle «Darstellung». (Bei diesem Beispiel-Bild wurden die Änderungen vorgängig schon vollzogen!)

Wähle "Spalte".

Im Feld «CSS-Klasse» nach dem bestehenden Wert (z.B. hier c4) einen Leerschlag machen und den Klassen-Wert «zaehlerTage» einfügen.

Gegebenenfalls per «F6» aktualisieren, wenn der Wert in der Vorschau nicht sofort ersichtlich wird.

Jetzt sollte «Tage» hinter den Zahlen angezeigt werden.

Für den Wert «€» wiederholst Du dies bei einem neuen Zähler-Widget mit dem Unterschied, dass Du im Feld «CSS-Klasse» «zaehlerEuro» einfügts.

Zur Verbildlichung hier noch meine Bastelei als erweitertes Beispiel …

    /* IndivCLASS ZählerDeko */
    .zaehlerDeko .zpcounterwidget {background-image: linear-gradient(#614B47 10%, #4E3C39 50%, #614B47 70%, #4E3C39 85%); border: 0px; border-radius: 30%; box-shadow: 0px 0px 20px 4px #000;}
    .zaehlerDeko .zpcounterwidget::after {content: " hPa";} /* end */

Einen schönen Sonntag, viel Erfolg und eine gute Zeit.

Viele Grüsse

elch

Alternativ kannst du auch das Widget Counter Animated verwenden. Der Text wird hier allerdings über oder unter dem Counter dargestellt.