config.entity should never be wrapped in quotes.
Unfortunately, that didnāt work. If I remove the quotes around config.entity, it appears to remove all the remaining styling on the card.
Hereās the full styling I tried:
style: |
ha-card {
height: 100%;
font-size: 4em;
--primary-text-color: {% if is_state(config.entity+'_phone', 'on') %} red {% else %} green {% endif %};
}
Removing the quotes makes the card look like this
When it should look like this
I guess I should also mention that this glance card is part of a larger grid layout card as well. Not sure if that makes a difference.
Hereās my full card configuration:
- card:
columns: 1
show_header_toggle: true
show_icon: false
show_state: false
style: |
ha-card {
height: 100%;
font-size: 4em;
--primary-text-color: {% if is_state('config.entity' +'phone', 'on') %} red {% else %} green {% endif %};
}
type: glance
filter:
exclude:
- state: 'off'
- state: unavailable
include:
- group: group.voice
options:
tap_action:
action: toggle
gridcol: 1
gridrow: 2
show_empty: true
sort:
method: name
type: 'custom:auto-entities'
well you still have it in quotes. And it may not work because thereās no configured entity. Try it outside the auto-entities card first.
The glance card doesnāt have an entity. Youāll have to set the style on each entity instead, using options: in the filter.
1 Like
Can someone please point out how to get this working with two functions.
If I only do it with āālabel-badge-background-colorā or "display: " it works, but not togheter(?)
views:
- badges:
- entity: sensor.weather_temp_reel_feel
style: |
:host {
--label-badge-background-color:
{% set temp = states('sensor.weather_temp_reel_feel') | float %}
{% if temp <= -50 %} #0000AC
{% elif temp <= -35 %} #000088
{% elif temp <= -30 %} #0000A0
{% elif temp <= -25 %} #0000B8
{% elif temp <= -20 %} #0000CF
{% elif temp <= -15 %} #0000E7
{% elif temp <= -10 %} #0000FF
{% elif temp <= -5 %} #3131FF
{% elif temp <= -3 %} #6262FF
{% elif temp <= -1 %} #9393FF
{% elif temp <= 0 %} #C4C4FF
{% elif temp <= 1 %} #F5F5FF
{% elif temp <= 3 %} #FFFFD2
{% elif temp <= 5 %} #FFFF7E
{% endif %};
display:
{% if states('sensor.weather_temp_reel_feel') | float > 5 %}
none;
{% endif %}
}
UPDATE:
Had to do this:
display:
{% set temp = states('sensor.weather_temp_reel_feel')|float %}
{% if temp > 4 %}
none;
{% endif %}
on the picture-entity is it possible to change the font size?
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: picture-entity
image: /local/lampada_rgb_piloty.jpg
entity: light.yeelight_color1_286c07ae4140
tap_action:
action: toggle
style: |
ha-card {
background: rgba(0, 0, 0, 0.7);
border-radius: 25px;
border: solid 3px rgb(255,152,0);
width: 95%;
height: 100%;
- type: picture-entity
image: /local/barw.jpg
entity: light.yeelight_strip1_286c078614cc
tap_action:
action: toggle
style: |
ha-card {
background: rgba(0, 0, 0, 0.7);
border-radius: 25px;
border: solid 3px rgb(255,152,0);
width: 95%;
height: 100%;
}
add font-size: 90000px
he donāt change with this
Thatās a typical case of advanced usage. Use your browsers inspector to find the DOM path, and step through it until you find the right place.
Hi @thomasloven,
I love this plugin, i use and abuse of it for months now, thanks !
One thing i would like to do is set a display:none to state-badge of various input_select, input_datetime or other input_* cards.
Below is a composed ācardā for my adaptive target sensor/target temp scheduler NodeRed thermostat.
On mobile the 2 input_select donāt have enough space to be well displayed because of state-badges which are useless in my case.
Here is the best iāve achieved with negative padding/margin ( 
) and iāve been constraint to put input_ elements on the left of the card(absolutely not my preference):
Iāve hardly tried to set display:none to state-badge(not just set empty icon) but iāve never succeed in reaching it for input_ cards
Would you have any tips ?
Inputs arenāt cards, theyāre rows, so they donāt have a ha-card.
Card-mod can apply styles to them though, but only if they are in an entities card:
type: entities
entities:
- entity: input_select.home_mode
style: |
state-badge{
display: none;
}
Outside of an entities card it depends on how you use it, but with mod-card it should be possible.
1 Like
Your example was exactly what i was using and didnāt worked on my system but your screenshot lead me look elsewhere and i quickly found the source of my issue:
I was using an obsolete version of card-mod not managed by Hacs(Arff)ā¦ after updated it that works far better now !!
Many thanks @thomasloven !
I am getting a lot of errors in my console many of which refer at the top level to card-mod.
Would you mind taking a look and telling me if you think they do relate to this card, if they are anything to worry about and if you have a suggestion to avoid them?
Thanks.
I believe youāre using fold-entity-row with style: set for either a header or some items. Could you please show me your configuration for that?
Indeed I am:
#=== Schedule 2
- type: custom:fold-entity-row
head:
type: custom:restriction-card
row: true
card:
entity: input_boolean.guest_mode_schedule_2
style: |
:host {
--restriction-regular-lock-color: red;
}
entities:
- input_text.guest_mode_schedule_2_name
- input_select.guest_mode_schedule_2_day
- input_datetime.guest_mode_schedule_2_start_time
- input_number.guest_mode_schedule_2_duration
Please tell me, what am I doing wrong?
I needed to place (on a common card) horizontally 3 pictures of different sizes, 60% 20% 20% wide.
The code below results in a 100% CPU-load and inability to load HA-interface. Code that uses only ā%%ā does not work:
- type: custom:mod-card
style: |
ha-card { background: white; }
card:
type: custom:layout-card
layout: horizontal
min_columns: 3
column_width: [60%, 20%, 20%]
cards:
- type: picture
image: /local/pic-1.png
style: |
ha-card { background-color: red; }
- type: picture
image: /local/pic-2.png
style: |
ha-card { background-color: green; }
- type: picture
image: /local/pic-3.png
style: |
ha-card { background-color: blue; }
And all the same, I achieved the correct result - everything began to work perfectly, as I need - I had to add an extra column of 1px, but I understand that this is not the correct code:
- type: custom:mod-card
style: |
ha-card { background: white; }
card:
type: custom:layout-card
layout: horizontal
min_columns: 4
column_width: [59%, 20%, 20%, 1px]
cards:
- type: picture
image: /local/pic-1.png
style: |
ha-card { background-color: red; }
- type: picture
image: /local/pic-2.png
style: |
ha-card { background-color: green; }
- type: picture
image: /local/pic-3.png
style: |
ha-card { background-color: blue; }
Is it possible to make a badge (or the badge icon) and a entity icon in a card to blink?
If so please, share the code.
Can I set an icon color template for a whole card based on a specific attribute? Iām trying, but Iām unsuccessful in combining the various examples, hereās my failed attempt:
style: |
:ha-card {
--paper-item-icon-color:
{% if state_attr(config.entity,'1 Dag') < 0 %}
#ff0000
{% else %}
#00cc00
{% endif %}
;
}
entities:
- entity: sensor.dnb_health_care_n
secondary_info: '[[ {entity}.attributes.Dato ]], [[ {entity}.attributes.1 Dag ]]%'
type: 'custom:secondaryinfo-entity-row'
- entity: sensor.dnb_norge_indeks_a
secondary_info: '[[ {entity}.attributes.Dato ]], [[ {entity}.attributes.1 Dag ]]%'
type: 'custom:secondaryinfo-entity-row'
- entity: sensor.dnb_teknologi_n
secondary_info: '[[ {entity}.attributes.Dato ]], [[ {entity}.attributes.1 Dag ]]%'
type: 'custom:secondaryinfo-entity-row'
show_header_toggle: false
title: Fond
type: entities
If possible, I would also like to apply the color to the state and/or the percent part of the secondary info line.
Maybe something like this?
style: |
@keyframes blinker { 50% { opacity: 0; } }
ha-card { animation: blinker 1s linear infinite; }
Tried your code, and the code in the documentation, without luck.