Got it working with this.
sonnen_battery_charging:
friendly_name: Laddar
icon_template: 'mdi:battery-charging'
value_template: '{{ states.sensor.json_sonnen.attributes["BatteryCharging"] }}'
But the color on the icon is standard yellow thou…
If i do this:
- entity: binary_sensor.sonnen_battery_charging
icon: 'mdi:battery-charging'
style: |
:host {
--paper-item-icon-color: {% if is_state(config.entity, 'on') %} green {% else %} red {% endif %};
}
Then it will turn red when off but yellow when on
Copy the same thing, and paste it again, but under --paper-active-item-color.
Got it to work with this:
- entity: binary_sensor.sonnen_battery_charging
icon: 'mdi:battery-charging'
style: |
:host {
--paper-item-icon-active-color: {% if is_state(config.entity, 'on') %} green {% else %} null {% endif %};
}
Thanks for helping me!
Im trying to change the color slider in the HA thermostat card.
The color of the slider is --heat-color but using
- type: thermostat
entity: climate.home
style: |
ha-card {
--heat-color: #62e3c8;
}
name: Home
is not working, any ideas please.
Try !important
Thank you , that solved it but I cant find anything documented on using ‘!important’ so can you tell me what does it do for future reference. Regards.
You should probably learn CSS
https://www.w3schools.com/css/default.asp
but for what it actually does:
ha-card {
color: red;
color: blue !important;
}
The second one will override the first one. You can use this to override default styles.
Thats great, I will look into that. thanks again.
Hi,
is it possible to change the color of only the values in an entity card?
24.7ºC, 48.6%, etc.
Thanks.
Yes it is, do you mean entities instead of entity?
Yes, entities cards. I want to change the color of the values text, 24.7ºC, 48.6%…
And keep the color text as it is (T.Dorm, H.Dorm).
I’m also trying to reduce the space between the icon and the text…
Do you know how can I achieve both changes?
Thanks in advance.
style:
hui-sensor-entity-row:
$: |
text-content {
--primary-text-color: blue;
}
should work.
Hi,
thanks for the info, but I’m not able to place it properly. This is my current entities card definition:
- type: entities
style: |
#states > * {
margin: -14px -12px !important;
box-shadow:none;
}
ha-card {
background: rgba(28,28,28,1);
box-shadow: none;
color: rgba(225,224,224,1);
margin-right: -6px
}
entities:
- entity: variable.temp_dorm
- entity: variable.humidity_dorm
style: |
:host {
--paper-item-icon-margin: 0px 0px !important:
--paper-item-icon-color:
{% if states(config.entity)|int < 40 or states(config.entity)|int > 70 %}
red
{% else %}
rgba(68,115,158,1)
{% endif %}
;
}
- entity: variable.temp_nanos
- entity: variable.humidity_nanos
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity)|int < 40 or states(config.entity)|int > 70 %}
red
{% else %}
rgba(68,115,158,1)
{% endif %}
;
}
- entity: variable.temp_terraza
- entity: variable.humidity_terraza
- entity: variable.aire_terraza
show_header_toggle: false
state_color: false
gridrow: 2 / 2
gridcol: 1 / 2
Where shoudl I add that style?
style:
other stuff here i already posted
.: |
#states > * {
margin: -14px -12px !important;
box-shadow:none;
}
ha-card {
background: rgba(28,28,28,1);
box-shadow: none;
color: rgba(225,224,224,1);
margin-right: -6px
}
This way?
- type: entities
style:
hui-sensor-entity-row:
$: |
text-content {
--primary-text-color: blue;
}
.: |
#states > * {
margin: -14px -12px !important;
box-shadow:none;
}
ha-card {
background: rgba(28,28,28,1);
box-shadow: none;
color: rgba(225,224,224,1);
margin-right: -6px
}
Because it’s not working, the color remains the same. I’ve tried also chaging to hue-text-entity-row, but no luck
Swap out
text-content {
--primary-text-color: blue;
}
with
.text-content {
color: blue !important;
}
Make sure to reindent, and change blue to whatever color you want.
Finally I made it work! With your last advice and hue-text-entity-row it worked.
style:
hui-text-entity-row:
$: |
.text-content {
color: blue !important;
}
.: |
#states > * {
margin: -14px -12px !important;
box-shadow:none;
}
ha-card {
background: rgba(28,28,28,1);
box-shadow: none;
color: rgba(225,224,224,1);
margin-right: -6px
}
Thanks!
I don’t know if I can achieve this with card-mod:
The media-player-card has the progressbar which gets hidden at a certain breakpoint.
I like to prevent that and have the progressbar always shown.
I tried many different combinations of selectors with display: block !important; but nothing has worked so far.
The complete path is
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > hui-masonry-view").shadowRoot.querySelector("#columns > div > hui-conditional-card:nth-child(7) > hui-media-control-card").shadowRoot.querySelector("ha-card > div.player > paper-progress")
Is this possible and if yes, can someone push me in the right direction?