Monatsrückblick Januar/Februar 2026 ist online!

[Kuddel]

Hallo zusammen,

ich überarbeite gerade meine Instanz-Übesicht in der VIS und möchte gerne aus aktuell zwei Widgets pro Instanz ein Widget machen:

IST:

Jetzt habe ich ein paar Probleme

1. Leider bekomme ich es nicht hin, dass der Text unter dem Icon angezeigt wird
2. Ich bekommen den graußen Hintergrund nicht weg
3. Mit dem Icon soll die Instant aktiviert / deaktiviert werden. Funktionieert leider auch nicht

So sehen die DPs für das Widget aus:

Hier noch der Export vom Widget

Spoiler

[{"tpl":"tplHqButton","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":true,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","oid":"system.adpter.{0_userdata.0.instanz-infos.Instanz_3.Instanz-Name}.alive","min":"true","max":"false","signals-cond-0":"==","signals-val-0":"0","signals-icon-0":"{0_userdata.0.instanz-infos.Instanz_3.Icon}","signals-icon-size-0":"40","signals-blink-0":true,"signals-horz-0":"10","signals-vert-0":"10","signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":"1","signals-icon-1":"{0_userdata.0.instanz-infos.Instanz_3.Icon}","signals-icon-size-1":"40","signals-blink-1":false,"signals-horz-1":"10","signals-vert-1":"10","signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":"2","signals-icon-2":"{0_userdata.0.instanz-infos.Instanz_3.Icon}","signals-icon-size-2":"40","signals-blink-2":true,"signals-horz-2":"10","signals-vert-2":"10","signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"name":"Instanz_3_Icon","signals-oid-0":"0_userdata.0.instanz-infos.Instanz_3.Status","signals-oid-1":"0_userdata.0.instanz-infos.Instanz_3.Status","signals-oid-2":"0_userdata.0.instanz-infos.Instanz_3.Status","g_center":true,"iconName":"","btIconWidth":"0","offsetAuto":true,"leftOffset":"","topOffset":"100","g_leftRight":false,"timeAsInterval":"true","infoLeftFontSize":"12","infoFontRightSize":"12","infoLeftPaddingLeft":"15","infoLeftPaddingRight":"50","infoRightPaddingRight":"15","caption":"{0_userdata.0.instanz-infos.Instanz_3.Anzeigename}","captionOn":"{0_userdata.0.instanz-infos.Instanz_3.Anzeigename}","g_styles":false},"style":{"left":"289px","top":"422px","width":"50px","height":"50px","border-width":"3px","border-style":"solid","border-color":"{wert:0_userdata.0.instanz-infos.Instanz_3.Status; wert==0 ? \"red\" : wert==1 ? \"#41f316\" : wert==2 ? orange : \"white\"}","border-radius":"10px","color":"{wert:0_userdata.0.instanz-infos.Instanz_3.Status; wert==0 ? \"red\" : wert==1 ? \"white\" : wert==2 ? orange : \"white\"}","text-align":"center","font-size":"large","font-weight":"bolder","z-index":"0","background-color":""},"widgetSet":"hqwidgets"}]

[Negalein]

@kuddel sagte in Hilfe bei Widget benötigt:

Leider bekomme ich es nicht hin, dass der Text unter dem Icon angezeigt wird

Ich bekommen den graußen Hintergrund nicht weg

[Kuddel]

@negalein danke dir für die schneller Antwort.

Mit dem "Offset links" kann ma den Text zwar verschieben, aber je nach Länge des Instanz-Names muss da ja ein anderer Wert rein.

Zentrieren geht ja leider nicht

EDIT: Da schalten der Instanz über das Widget funzt jetzt auch. Habe mich beim DP vertippt.

Bleibt also nur noch das Zentrieren des Namens

[Homoran]

@kuddel sagte in Hilfe bei Widget benötigt:

Zentrieren geht ja leider nicht

wieso nicht?
text - align - center

[Negalein]

@homoran sagte in Hilfe bei Widget benötigt:

text - align - center

nicht bei dem Widget

[DJMarc75]

@kuddel sagte in Hilfe bei Widget benötigt:

Bleibt also nur noch das Zentrieren des Namens

Ohne CSS wird das nicht easy gehen:

.mitte2{
        float: right;
        display: flex;

    align-items: center; /* vertikal*/

    justify-content: center; /* horizontal */
    text-align: center;
    vertical-align: central;
    font-size: 40px;
    font-weight: bold;
    font-family: RobotoCondensed-Light;
    color:white;
    text-shadow: rgba(0, 0, 0, 0.9) 3px 3px 4px;
}

grad mal eins geschrieben und folgendes Ergebnis:

Widget hab ich da auf dem Bild nicht angepasst sondern nur das CSS "mitte2" (sorry für den einfallslosen Namen) oben im Widget unter CSS-Klasse eingetragen.

Edit:

für die CSS eigentlich nur folgendes interessant:

.mitte2{
        float: right;
        display: flex;

    align-items: center; /* vertikal*/

    justify-content: center; /* horizontal */
    text-align: center;
    vertical-align: central;
}

[Kuddel]

@djmarc75 funktoniert bei mir irgendwie nicht so ganz

Ich hab mir mal irgendwo das Material Design von Uhula per CSS importert, deswegen ist bei mit im CSS Reiter sehl viel enthalten.

CSS:
css.txt

Skripte
css.txt

Da ich von CSS keine Ahnung habe, weiß ich nicht, was genau da nicht passt.