Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Glasfaser]

@Almixx

Button zu und auf bekommen CSS UiStyle

Button Stop bekommen CSS UiStyle1

damit du siehst was ich meine ... nimm mal das

.UiStyle {
 background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
}

.UiStyle1 .ui-button {
 background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
}

[Almixx]

@Glasfaser
das habe ich auch so gemacht. Funktioniert aber nur eingeschränkt. Border funktioniert, Background Farbverlauf auch, aber Größe und Textposition nicht. Nur der toggle Button von jqui lässt sich problemlos umgestalten, state und nav dagegen nicht, bzw. nur eingeschränkt.
Habe folgende CSS Einträge:

.UiStyle1 .ui-button
    {
        height: 40px !important;
    	width: 100px !important;
    	text-align: center !important;
        vertical-align: middle !important;
    	font-size: 22px !important;
    	background: #383838 !important;
        background: -webkit-linear-gradient(bottom, #383838, #A4A5A5) !important;
        background: -moz-linear-gradient(bottom, #383838, #A4A5A5) !important;
        background: linear-gradient(to top, #383838, #A4A5A5) !important;
    }

in der Vis kommt folgendes raus:

Die Ecken sind noch rund, der Farbverlauf passt nicht wegen der Größe und der Text ist nicht mittig..

[Glasfaser]

@Almixx
Lade mal bitte das Aktuelle runter

damit ich bei mir sehen kann ,wie du die CSS Anweisung gemacht hast

[Glasfaser]

@Almixx sagte in Border in 3D Optik:

background: #383838 !important;
background: -webkit-linear-gradient(bottom, #383838, #A4A5A5) !important;
background: -moz-linear-gradient(bottom, #383838, #A4A5A5) !important; 
background: linear-gradient(to top, #383838, #A4A5A5) !important;

Du hast 4 x eine background CSS Anweisung drin ... für einen Button CSS ... warum ???

[Almixx]

@Glasfaser
hatte ich aus nem Generator rauskopiert, hab 3Zeilen gelöscht...
aktuelle Widget:

[{"tpl":"tplMfdShutter","data":{"oid":"shelly.0.SHSW-25#69397C#1.Shutter.Position","g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","asButton":false,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"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,"min":"0","max":"100","show_active":false,"invert_icon":false,"iconColor":"#ffffff","iconColor0":""},"style":{"left":"324px","top":"124px","width":"140px","height":"156px","z-index":"1"},"widgetSet":"jqui-mfd"},{"tpl":"tplFrame","data":{"visibility-cond":"==","visibility-val":1,"title":"Rollo Büro","title_color":"black","title_top":"5","title_left":"5","header_height":"30","header_color":"#47aaff","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":"1","signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"visibility-groups-action":"hide","name":"Rollo Büro","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"DD.MM.YYYY hh:mm:ss","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,"title_font":"","gestures-swipeRight-limit":"7","gestures-swiping-minimum":"-3","gestures-rotateRight-limit":"0","gestures-rotating-delta":"2"},"style":{"left":"106px","top":"125px","width":"351px","height":"243px","font-family":"Verdana, Geneva, sans-serif","font-style":"normal","font-variant":"normal","font-weight":"bold","font-size":"large","z-index":"0","background":"","border-width":"5px","border-style":"solid","border-color":"#9f9d9d","border-radius":"4px","opacity":"","background-color":"","box-shadow":"4px 4px 4px rgba(4, 4, 4, 4)"},"widgetSet":"basic"},{"tpl":"tplValueFloat","data":{"oid":"shelly.0.SHSW-25#69397C#1.Shutter.Position","visibility-cond":"==","visibility-val":1,"is_comma":false,"factor":"1","html_append_singular":" %","html_append_plural":" %","is_tdp":false,"gestures-offsetX":0,"gestures-offsetY":0,"digits":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"visibility-groups-action":"hide","html_prepend":"Rollostand: ","name":"","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},"style":{"left":"163px","top":"175px","width":"151px","height":"21px","color":"white","text-align":"center","font-family":"Verdana, Geneva, sans-serif","font-style":"normal","font-variant":"normal","font-weight":"bold","font-size":"small","z-index":"1","border-width":"1px","border-style":"none","border-color":"white","border-radius":"0px"},"widgetSet":"basic"},{"tpl":"tplJquiButtonState","data":{"oid":"shelly.0.SHSW-25#69397C#1.Shutter.Pause","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","buttontext":"Stop","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"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,"value":"true","class":"UiStyle1"},"style":{"left":"233px","top":"247px","width":"100px","height":"40px","z-index":"1","font-family":"Verdana, Geneva, sans-serif","border-width":"3px","border-style":"outset","border-color":"{wert:shelly.0.SHSW-25#69397C#1.Shutter.Pause; wert==\"true\" ? \"#47aaff\" : \"silver\" }","border-radius":"7px"},"widgetSet":"jqui"},{"tpl":"tplJquiToogle","data":{"oid":"shelly.0.SHSW-25#69397C#1.Shutter.Close","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"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,"class":"UiStyle","label":"Zu"},"style":{"left":"348px","top":"249px","width":"114px","height":"47px","background-color":"   ","border-color":"{wert:shelly.0.SHSW-25#69397C#1.Shutter.Close; wert==\"true\" ? \"#47aaff\" : \"silver\" }","text-align":"","font-weight":"","font-family":"","border-width":"3px","border-radius":"5px","border-style":"outset","z-index":"1"},"widgetSet":"jqui"},{"tpl":"tplJquiToogle","data":{"oid":"shelly.0.SHSW-25#69397C#1.Shutter.Open","g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"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,"class":"UiStyle","label":"Auf"},"style":{"left":"119px","top":"247px","border-color":"{wert:shelly.0.SHSW-25#69397C#1.Shutter.Open; wert==\"true\" ? \"#47aaff\" : \"silver\" }","border-width":"3px","border-style":"outset","border-radius":"5px","z-index":"1"},"widgetSet":"jqui"},{"tpl":"tplJquiRadioList","data":{"oid":"shelly.0.SHSW-25#69397C#1.Shutter.Position","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","values":"25;50;75","texts":"25%; 50%; 75%","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"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,"class":"UiStyle2"},"style":{"left":"170px","top":"310px","font-family":"","font-variant":"","font-weight":"","z-index":"1","height":"","width":"236px","border-width":"2px","border-style":"outset","border-color":"silver","border-radius":"5px","position":"","color":""},"widgetSet":"jqui"},{"tpl":"tplValueFloatBar","data":{"oid":"shelly.0.SHSW-25#68EF25#1.Shutter.Position","visibility-cond":"==","visibility-val":1,"factor":"1","color":"#47aaff","min":"0","max":"100","orientation":"horizontal","gestures-offsetX":0,"gestures-offsetY":0,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"visibility-groups-action":"hide","name":"","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,"comment":"","reverse":false,"border":""},"style":{"left":"135px","top":"209px","width":"200px","height":"16px","border-color":"white","border-radius":"5px","border-width":"1px","border-style":"solid","z-index":"1"},"widgetSet":"basic"}]

aktuelle CSS:

.UiStyle
    {
        height: 40px !important;
    	width: 100px !important;
    	line-height: 2px !important;
        text-align: center !important;
        vertical-align: middle !important;
    	font-size: 22px !important;
    	border-radius: 7px !important;
    	border-width: 3px !important;
    	border-style: outset !important;
    	background: -webkit-linear-gradient(bottom, #383838, #A4A5A5) !important;
    }
    
.UiStyle1 .ui-button
    {
        height: 40px !important;
    	width: 100px !important;
    	text-align: center !important;
        vertical-align: middle !important;
    	font-size: 22px !important;
        background: -webkit-linear-gradient(bottom, #383838, #A4A5A5) !important;
    }
    
.UiStyle2 .ui-button
    {
        height: 40px !important;
    	width: 80px !important;
    	text-align: center !important;
        vertical-align: middle !important;
        background: -webkit-linear-gradient(bottom, #383838, #A4A5A5) !important;
    }    
    

[Glasfaser]

@Almixx

So sieht es dann bei mir aus :

.

Was mir auffällt :

{wert:shelly.0.SHSW-25#69397C#1.Shutter.Close; wert=="true" ? "#47aaff" : "silver" }

heißt der Datenpunkt wirklich so ?

nicht so

shelly.0.SHSW-251.Shutter.Close

weil dort ein Farbwert drin ist im Datenpunktname

#69397C

[Almixx]

@Glasfaser
die Shellys sind alle so bezeichnet

Und bei Auf/Zu funktioniert es ja, Stop ist das Problem (state button)

[Glasfaser]

@Almixx

War ja nur eine Frage , da ich keine Shelly habe , dann ist ja alles gut !

Und was funktioniert jetzt nicht , damit ich es weiter bei mir testen kann !?

siehe den Screenshot von mir oben ....

[Almixx]

@Glasfaser
State und nav Buttons kann ich nicht richtig anpassen. Farbverlauf passt nicht, da irgendwie die Größe nicht passt, obwohl ich die deklariere. Dieser ist auch runder wie die toggle buttons.
Zudem ist derText nicht positionierbar

[Glasfaser]

@Almixx

Das was du mit den Buttons vorhast ... ist nicht mal eben ... !!!!
Tausche das mal gegen das .UiStyle

.UiStyle  .vis-view, .vis-view .ui-widget

    {

        height: 40px !important;
    	width: 100px !important;
    	line-height: 2px !important;
        text-align: center !important;
        vertical-align: middle !important;
    	font-size: 22px !important;
    	border-radius: 7px !important;
    	border-width: 3px !important;
    	border-style: outset !important;
    	background: -webkit-linear-gradient(bottom, #383838, #A4A5A5) !important;

    }

Ich würde dir eigentlich sehr empfehle , mal sich die material Widgets anzuschauen .

https://forum.iobroker.net/topic/25374/neuer-vis-adpater-material-design-widgets

da hast du viele mehr möglichkeiten , die schon von vornherein in den Widgeteinstellungen vorhanden sind .

Aber wenn du weitermachen willst , dann versuche es mal selber .

über die rechte Maustaste .... das Element untersuchen .

Aber VORSICHT ... mit einer falschen CSS Anweisung, kannst du dir alles zerschießen !!!