Hasshun
February 22, 2021, 2:37pm
1419
Hi Everyone,
I tried to set up a very “easy” thing, namely to change the border color of a state-badge inside a picture elements card. Nothing happens, and I don’t really get what I’m doing wrong.
I’ve added this to raw editor:
- type: state-badge
entity: binary_sensor.window4
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color: #000 !important;
}
.: |
:host {
{% if is_state('binary_sensor.window4', 'Open') %} --label-badge-red: #03A9F4; {% endif %};
{% if not is_state('binary_sensor.window4', 'Closed') %} --label-badge-red: #fd79a8; {% endif %};
color: #fff;
}
I know it’s working for badges at the header, but seems like it’s not the same for every card.
Wrong indentation for the "style" keyword.
Picture elements card has its OWN "style" keyword for an element like “state-badge”. You are not supposed to use this "style" section for "card-mod".
Using the “style” you can do this non-card-mod styling:
- type: picture-elements
style: |
ha-card { height: 120px !important; }
image: /local/images/blue.jpg
elements:
- type: state-badge
entity: sensor.cleargrass_1_co2
style:
color: orange
'--label-badge-text-color': magenta
'--label-badge-red': green
'--label-badge-background-color': yellow
top: 18%
left: 10%
1 Like
Hasshun
February 22, 2021, 10:08pm
1421
Hi Ildar,
Originally, I wanted the color to be red on state-change, but simply trying to overwrite ‘–label-badge-red’ also did not succeed.
Checked in Chrome and Edge.
I just realized that for "binary_sensor" we must use --label-badge-blue instead of --label-badge-red.
badges:
- entity: binary_sensor.updater
name: 'some name'
style: |
:host {
--label-badge-blue: cyan;
}
- entity: sensor.cleargrass_1_co2
name: 'some name'
style: |
:host {
--label-badge-red: cyan;
}
🔹 Card-mod - Add css styles to any lovelace card - #1310 by Ildar_Gabdullin .
Hi @Ildar_Gabdullin
in response to a rather old post of mine on conditional badges, Conditional badge at all possible? was written by @Troon
please add that to the Badge styling options
1 Like
KTibow
February 23, 2021, 8:34pm
1424
What do you mean? thomasloven is the developer of card_mod. Do you mean that they should make an example?
Mariusthvdb:
conditional badges
Thank you for a good idea, here added a couple of examples (+ added a link here ).
Badges: conditional display:
Example 1 - toggle “Show / Hide badge”:
- title: badge
path: badge
badges:
- entity: sensor.cleargrass_1_co2
name: conditional
style: |
:host {
{% if is_state('input_boolean.test_boolean','on') %}
display: inline-block;
{% else %}
display: none;
{% endif %}
}
cards:
- type: entities
entities:
- entity: input_boolean.test_boolean
name: Show badge
Example 2 - show a badge if the sensor is available:
- entity: sensor.cleargrass_1_co2
name: display if available
style: |
:host {
{% if states(config.entity) in ['unavailable','unknown'] -%}
display: none;
{% else %}
display: inline-block;
{% endif %}
}
… one more styling:
Badges: hidden name :
- entity: sensor.cleargrass_1_co2
name: transparent color
style: |
:host {
color: transparent;
}
Update 17.08.23: this fix may not be needed since there is a PR to implement the “show_name” option which is not working this moment.
More examples are described here .
3 Likes
No, see post below yours, above this one
Has anyone figured out how to use backdrop-filter css for cards? The css style is used for popups/more-info (and works great there). I wanted to use this as background for cards, bur couldn’t get it to work. Maybe it’s not possible, or am I missing something?
KTibow
February 24, 2021, 1:23am
1428
Was the background transparent?
Partially, i used background css value rgba(0,0,0,0.5). Background showed fine, but backdrop did nothing.
So this is what I had as the code and screenshot:
Now, these are 4 cards inside a stack-in-card. I do know that you need mod-card to style horizontal-stack card. But I believe stack-in-card is handled differently and doesn’t need mod-card. Hence why I use style option. Btw, the background is completely black with this code, so style options do work. Also the volume slider card itself has no background set (completely transparant). So the black is the background of stack-in-card. If I set ‘–ha-card-background’: none, then the black is completely gone and background of Lovelace shows (so volume slider cards have no background).
Style code:
- cards:
- VOLUME SLIDER CARD
- VOLUME SLIDER CARD
- VOLUME SLIDER CARD
- VOLUME SLIDER CARD
mode: horizontal
keep:
background: true
border_radius: true
margin: true
outer_padding: false
style:
'--ha-card-background': 'rgba(0, 0, 0, 1)'
'--ha-card-box-shadow': none
'--ha-card-border-radius': 20px
'--ha-card-backdrop-filter': blur(17px) !important
'--ha-card-webkit-backdrop-filter': blur(17px) !important
left: 50%
top: 70%
width: 1000px
height: 800px
font-smoothing: none
Btw, this is all setup inside a picture-elemente-card. Which is why I have left/top/width/height variables. To my understanding I need this styling format in order to have positions working. This format
style: |
ha-card {
height: 100vh;
width: 100vw;
}
doesn’t work when styling cards inside a picture-element if you also want to use positions (I believe).
Any idea what I can try?
KTibow
February 24, 2021, 2:33pm
1433
What does it look like when they have no background? What does it look like with a partially transparent one?
I’m struggling to get the icon color changed, after allot of trial and error i have accomplished the code below but the icon color is now black instead of the normal blue color. Is there anyone that have the key to get this working.
type: 'custom:mod-card'
card:
type: horizontal-stack
cards:
- type: entity
entity: climate.vicare_heating
attribute: active_vicare_program
style: |
ha-card {
--state-icon-color: {% if is_state_attr('config.entity', 'reduced') %} #50A14F {% else %} #5591c2 {% endif %};
}
KTibow
February 25, 2021, 2:41pm
1435
Don’t quote config.entity.
Thanks for the reply. Just tested without the quotes but still the icon color stays black.
petro
February 25, 2021, 4:38pm
1437
is_state_attr takes 3 arguments
Thanks Petro. Not to take the easy way but any change to show a example how i can toggle the icon color, i just can’t seem to make it work…
petro
February 25, 2021, 5:18pm
1439
Unfortunately I can’t because I know nothing about your entity or attribute. Do you understand what is_state_attr does?
1 Like
it is rather powerful, and dearly missed in current core Badge usage
