Systemfarbe Vis 2 App anpassen

Benji 0

Hier der Code (bin lernfähig). Weiterhin Danke für deine Unterstützung:

[
  {
    "tpl": "tplJquiButtonState",
    "data": {
      "activeColor1": "",
      "activeColor2": "",
      "activeColor3": "",
      "activeColor4": null,
      "activeColor5": null,
      "activeColor6": null,
      "bindings": [],
      "click_id": "",
      "color1": "",
      "color2": "",
      "color3": "",
      "color4": null,
      "color5": null,
      "color6": null,
      "count": 6,
      "g_common": true,
      "g_css_background": true,
      "g_css_border": true,
      "g_css_font_text": true,
      "g_states-1": true,
      "g_states-2": true,
      "g_states-3": true,
      "g_states-4": true,
      "g_states-5": true,
      "g_states-6": true,
      "icon1": "",
      "icon2": "",
      "icon3": "",
      "icon4": "",
      "icon5": "",
      "icon6": "",
      "image1": "",
      "image2": "",
      "image3": "",
      "image4": null,
      "image5": null,
      "image6": null,
      "oid": "0_userdata.0.Vis_Radio_Preset",
      "onlyIcon1": false,
      "onlyIcon2": false,
      "onlyIcon3": false,
      "onlyIcon4": null,
      "onlyIcon5": null,
      "onlyIcon6": null,
      "open": false,
      "orientation": "vertical",
      "test5": null,
      "test6": null,
      "text1": "Lounge",
      "text2": "Antenne Relax",
      "text3": "Bayern 3",
      "text4": "Rock Antenne",
      "text5": "Sunshine Live",
      "text6": "Arabella",
      "tooltip1": "",
      "tooltip2": "",
      "tooltip3": "",
      "tooltip4": null,
      "tooltip5": null,
      "tooltip6": null,
      "type": "select",
      "value1": "1 Lounge",
      "value2": "2 Relax",
      "value3": "3 Bayern 3",
      "value4": "4 ROCK ANTENNE Bayern",
      "value5": "5 SUNSHINE LIVE",
      "value6": "6 Radio Arabella Bayern",
      "variant": "outlined",
      "widgetTitle": "",
      "test4": null,
      "name": null,
      "comment": null,
      "class": null,
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true
    },
    "style": {
      "bindings": [],
      "background": "",
      "background-color": "Lightgray",
      "top": "275px",
      "left": "58px",
      "width": "181.971px",
      "height": "28px",
      "border-radius": "5",
      "text-align": ""
    },
    "widgetSet": "jqui",
    "_id": "i000001"
  }
]

Benji 0

Wahrscheinlich überspanne ich jetzt den Bogen. Die Combo Box hat auch noch eine grüne Umrandung, sobald man diese auswählt. Vielleicht findest du das auch noch heraus.

OliverIO

@Benji-0

Der erste Block ist die Umrandung
Der zweite Block ist der Hintergrund des ausgewählten Elements.
Da steht jetzt kein mycolor davor, da das wie ein Popup ist was nicht innerhalb der html struktur des dropdaowns angelegt wird.
d,h, diese Einstellung wirkt auf alle Dropdownlisten

.mycolor .Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: red;
}
.MuiList-root li.MuiButtonBase-root.Mui-selected {
    background-color: red;
}

Benji 0

Der Hintergrund im Drop Down ist jetzt gut. Der Rahmen bleibt bei mir leider grün.
Mir fällt auch noch auf, dass der Text im Input Feld weiß ist. Nicht der im Drop Down, der kann gerne weiß bleiben.

OliverIO

@Benji-0

mycolor in den widget attributen eingetragen?

Benji 0

Jetzt eingetragen. Passt auch. Und die weiße Farbe im Input Feld? Irgendeine Idee?

OliverIO

@Benji-0 sagte in Systemfarbe Vis 2 App anpassen:

Und die weiße Farbe im Input Feld?

das habe ich nicht verstanden.
Insbesondere im Kontext:

@Benji-0 sagte in Systemfarbe Vis 2 App anpassen:

Mir fällt auch noch auf, dass der Text im Input Feld weiß ist. Nicht der im Drop Down, der kann gerne weiß bleiben.

Benji 0

Hab's im Bild markiert:

OliverIO

@Benji-0

das habe ich gesehen.
Aber der Text hat mehr oder weniger beschrieben was ich selbst sehe.
Der Rahmen ist grün. Die Schrift ist weiß.
Wo ist den das Problem?
Kann da keine Frage daraus ableiten.
Wenn du Schwierigkeiten beim formulieren hast, kann dir ggfs chatgpt helfen?

Benji 0

Wenn du Schwierigkeiten beim formulieren hast, kann dir ggfs chatgpt helfen?
Sehr lustig - das schaffe ich schon noch selbst

Benji 0

Ich möchte, dass der Text in der gleichen Farbe ist, wie der Text bei dem Button "Schlafen" (schwarz).

OliverIO

@Benji-0

.mycolor .MuiInputBase-root {
    color:blue;
}
.mycolor .MuiSvgIcon-root {
    color:blue;
}
.mycolor .Mui-disabled {
    -webkit-text-fill-color: blue;
}

Benji 0

Wow. Das ist ein sehr erfolgreicher IOBroker Tag für mich heute. Danke.
Hast du noch Geduld?

Benji 0

Wie kann man die Farbe von dem Schieberegler anpassen?```
[
{
"tpl": "tplInventwoWidgetSlider",
"data": {
"bindings": [
"sliderRailActiveColor"
],
"oid": "0_userdata.0.Schlafen_h_Benji",
"minValue": 0,
"g_common": true,
"maxValue": "12",
"step": 0.25,
"orientation": "horizontal",
"showMinMax": false,
"showSteps": false,
"stepMode": "auto",
"stepDisplay": 10,
"sliderRailColor": "rgb(110,110,110)",
"g_attr_group_css_slider_track": true,
"sliderRailActiveColor": "{0_userdata.0.Vis_Col_Active}",
"trackBarType": "normal",
"trackWidth": 5,
"trackBorderRadius": 100,
"trackShadowX": 2,
"trackShadowY": 2,
"trackShadowBlur": 2,
"trackShadowSize": 1,
"trackShadowColor": "rgba(0, 0, 0, 1)",
"sliderThumbColor": "{0_userdata.0.Vis_Col_Active}",
"g_attr_group_css_slider_slider_thumb": true,
"thumbSize": 16,
"thumbBorderRadius": 100,
"thumbShadowX": 2,
"thumbShadowY": 2,
"thumbShadowBlur": 2,
"thumbShadowSize": 1,
"thumbShadowColor": "rgba(0, 0, 0, 0.5)"
},
"style": {
"bindings": [],
"left": 63,
"top": 455,
"width": "228px",
"overflow-x": "visible",
"overflow-y": "visible",
"height": "40px"
},
"widgetSet": "vis-2-widgets-inventwo",
"_id": "i000001"
}
]

OliverIO

@Benji-0

keine code-tags, dieses mal hat es aber dennoch funktioniert
konsistenz ist nicht so dein ding?

.mycolor .MuiSlider-colorPrimary {
    color: red;
}

Benji 0

Prima. Hat funktioniert.

Hm, ich hatte den Code in den vorgesehenen Bereich kopiert. Weiß nicht, was schief gelaufen ist. Aber ja, da ist noch Luft nach oben. Lass es mich noch mit einem anderen Widget probieren.
In dem Widget habe ich zwei Dinge, die mich stören.
A) Wenn ein Wert aktiv ist, wird der Kreis teilweise eingefärbt. Leider auch in grün
B) Der Dialog hierfür ist auch in grün. Zumindest die Zahlen und der Balken

Benji 0

[
  {
    "tpl": "tplMaterial2SimpleState",
    "data": {
      "bindings": [],
      "values_count": 0,
      "g_common": true,
      "oid": "0_userdata.0.A_Alarm_Timer_h",
      "circleSize": 0,
      "noIcon": true,
      "title": "Timer",
      "noCard": true,
      "withNumber": true,
      "withStates": false,
      "colorEnabled": "LightGray",
      "color": "LightGray",
      "unit": "",
      "name": "Ti Alarm",
      "comment": null,
      "class": null,
      "filterkey": null,
      "multi-views": null,
      "locked": null,
      "g_fixed": true,
      "ignored": null,
      "signals-oid-0": null,
      "signals-cond-0": "==",
      "signals-val-0": "true",
      "signals-icon-0": null,
      "signals-smallIcon-0": null,
      "signals-color-0": null,
      "signals-icon-size-0": null,
      "signals-icon-style-0": null,
      "signals-text-0": null,
      "signals-text-style-0": null,
      "signals-text-class-0": null,
      "signals-blink-0": null,
      "signals-horz-0": null,
      "signals-vert-0": null,
      "signals-hide-edit-0": null
    },
    "style": {
      "bindings": [],
      "left": 242,
      "top": 81,
      "width": "121px",
      "height": "84px",
      "position": "absolute"
    },
    "widgetSet": "vis-2-widgets-material",
    "_id": "i000001"
  }
]

OliverIO

@Benji-0

leider wieder anders
da hier im widget so ein knopf vorkommt den wir schon mal woanders einfärben, muss man eine andere cssklasse nehmen, also mycolor1 eintragen

.mycolor1 path[fill="#00af78"] {
  fill: red;
}
@keyframes vis-2-widgets-material-newValueAnimationDark {
	0% {
		color: #800000;
	}
	80% {
		color: #bd0000;
	}
	100% {
		color: #ffffff;
	}
}

Benji 0

Vielen Dank Oliver.

Jetzt sieht meine Grafik schon viel harmonischer aus.
Das hilft dir jetzt persönlich nicht, aber ich spende für deinen Einsatz 20 Euro an das IOBroker Forum.

Wenn ich jetzt noch wüsste, wie sich beim Schließen der Handy Tastatur ein unterer Rand bei der IOBroker App verhindern lässt. Aber hierfür werde ich ein Ticket bei Github öffnen...

Beste Grüße
Benjamin

OliverIO

@Benji-0 sagte in Systemfarbe Vis 2 App anpassen:

Handy Tastatur ein unterer Rand

Das hab ich gelesen.
Eigentlich sollte das nicht passieren, weil das responsive ist.
Als workaround kannst du mal probieren das Handy um 90 grad zu drehen und wieder zurück. Dann sollte der rand weggehen

Community Forum

NEWS

Systemfarbe Vis 2 App anpassen

Support us

572

32.7k

82.4k

1.3m