Do not just “guess & try”, open Code Inspector, see a real structure and use real elements.
Is it possible to change the icon color based on value of the sensor?
Use jinja.
{% if … -%}
color: red;
{%- else -%}
color: green;
{%- endif %}
ok so thats great, not sure why i can color the icon but not the value?
card_mod:
style: |
ha-card {
{% set signal = states(config.entity)|int(default=0) %}
--accent-color: gold;
}
.header .name {
font-size: 46px;
}
.header .icon {
--mdc-icon-size: 40px;
{% if signal >= 105 %} color:red
{% elif signal >= 70 %} color:orange
{% elif signal >= 35 %} color:yellow
{% else %} color:green
{% endif %}
}
.info .value {
{% if signal >= 105 %} color:red
{% elif signal >= 70 %} color:orange
{% elif signal >= 35 %} color:yellow
{% else %} color:green
{% endif %}
font-size: 23px;
}
.info .measurement {
font-size: 23px;
}here
I got it, no ; and/or needed the font-size above!
My min/max cell voltages don’t colour when theblowedt/highest cell voltages has matched.
- square: false
type: grid
cards:
- type: grid
cards:
- type: markdown
content: |2-
<center><font color="#18f50c"><font size=3>01. {% if
states('sensor.accu_bms0_max_cell_voltage') == '1' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_1') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'1' %} <font color="orange">{{
states('sensor.accu_bms0_cell_1') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_1') }} V {% endif %}
<br>
02. {% if
states('sensor..accu_bms0_max_cell_voltage') == '2' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_2') }}
V</font> {% elif states('sensor.jk_bms_min_voltage_cell') ==
'2' %} <font color="orange">{{
states('sensor.accu_bms0_cell_2') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_2') }} V {% endif %}<br>
03. {% if
states('sensor..accu_bms0_max_cell_voltage') == '3' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_3') }}
V</font> {% elif states('sensor..accu_bms0_min_cell_voltage') ==
'3' %} <font color="orange">{{
states('sensor.accu_bms0_cell_3') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_3') }} V {% endif %}
<br>
04. {% if
states('sensor..accu_bms0_max_cell_voltage') == '4' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_4') }}
V</font> {% elif states('sensor..accu_bms0_min_cell_voltage') ==
'4' %} <font color="orange">{{
states('sensor.accu_bms0_cell_4') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_4') }} V {% endif %}
<br>
05. {% if
states('sensor..accu_bms0_max_cell_voltage') == '5' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_5') }}
V</font> {% elif states('sensor..accu_bms0_min_cell_voltage') ==
'5' %} <font color="orange">{{
states('sensor.accu_bms0_cell_5') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_5') }} V {% endif %}
<br>
06. {% if
states('sensor..accu_bms0_max_cell_voltage') == '6' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_6') }}
V</font> {% elif states('sensor..accu_bms0_min_cell_voltage') ==
'6' %} <font color="orange">{{
states('sensor.accu_bms0_cell_6') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_6') }} V {% endif %}
<br>
card_mod:
style: |
ha-card {
box-shadow: none;
background: rgba(0,0,0,0);
border: white solid 1px !important;
}
You completely missed the point provided by Ildar in the other thread for the same EXACT issue.
Your entity ID has an extra . multiple times in your code.
Please avoid cross-posting as a way to resolve your issue!
1 Like
Stupid by me, caused by copy paste, but still not working.
- square: false
type: grid
cards:
- type: grid
cards:
- type: markdown
content: |2-
<center><font color="#18f50c"><font size=3>01. {% if
states('sensor.accu_bms0_max_cell_voltage') == '1' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_1') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'1' %} <font color="orange">{{
states('sensor.accu_bms0_cell_1') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_1') }} V {% endif %}
<br>
02. {% if
states('sensor.accu_bms0_max_cell_voltage') == '2' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_2') }}
V</font> {% elif states('sensor.jk_bms_min_voltage_cell') ==
'2' %} <font color="orange">{{
states('sensor.accu_bms0_cell_2') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_2') }} V {% endif %}<br>
03. {% if
states('sensor.accu_bms0_max_cell_voltage') == '3' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_3') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'3' %} <font color="orange">{{
states('sensor.accu_bms0_cell_3') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_3') }} V {% endif %}
<br>
04. {% if
states('sensor.accu_bms0_max_cell_voltage') == '4' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_4') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'4' %} <font color="orange">{{
states('sensor.accu_bms0_cell_4') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_4') }} V {% endif %}
<br>
05. {% if
states('sensor.accu_bms0_max_cell_voltage') == '5' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_5') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'5' %} <font color="orange">{{
states('sensor.accu_bms0_cell_5') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_5') }} V {% endif %}
<br>
06. {% if
states('sensor.accu_bms0_max_cell_voltage') == '6' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_6') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'6' %} <font color="orange">{{
states('sensor.accu_bms0_cell_6') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_6') }} V {% endif %}
<br>
card_mod:
style: |
ha-card {
box-shadow: none;
background: rgba(0,0,0,0);
border: white solid 1px !important;
}
- type: markdown
content: |2-
<center><font color="#18f50c"><font size=3>07. {% if
states('sensor.accu_bms0_max_cell_voltage') == '7' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_7') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'7' %} <font color="orange">{{
states('sensor.accu_bms0_cell_7') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_7') }} V {% endif %}
<br>
08. {% if
states('sensor.accu_bms0_max_cell_voltage') == '8' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_8') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'8' %} <font color="orange">{{
states('sensor.accu_bms0_cell_8') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_8') }} V {% endif %}<br>
09. {% if
states('sensor.accu_bms0_max_cell_voltage') == '9' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_9') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'9' %} <font color="orange">{{
states('sensor.accu_bms0_cell_9') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_9') }} V {% endif %}
<br>
10. {% if
states('sensor.accu_bms0_max_cell_voltage') == '10' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_10') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'10' %} <font color="orange">{{
states('sensor.accu_bms0_cell_10') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_10') }} V {% endif %}
<br>
11. {% if
states('sensor.accu_bms0_max_cell_voltage') == '11' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_11') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'11' %} <font color="orange">{{
states('sensor.accu_bms0_cell_11') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_11') }} V {% endif %}
<br>
12. {% if
states('sensor.accu_bms0_max_cell_voltage') == '12' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_12') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'12' %} <font color="orange">{{
states('sensor.accu_bms0_cell_12') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_12') }} V {% endif %}
<br>
card_mod:
style: |
ha-card {
box-shadow: none;
background: rgba(0,0,0,0);
border: white solid 1px !important;
}
- type: markdown
content: |2-
<center><font color="#18f50c"><font size=3>13. {% if
states('sensor.accu_bms0_max_cell_voltage') == '13' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_13') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'13' %} <font color="orange">{{
states('sensor.accu_bms0_cell_13') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_13') }} V {% endif %}
<br>
14. {% if
states('sensor.accu_bms0_max_cell_voltage') == '14' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_14') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'14' %} <font color="orange">{{
states('sensor.accu_bms0_cell_14') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_14') }} V {% endif %}<br>
15. {% if
states('sensor.accu_bms0_max_cell_voltage') == '15' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_15') }}
V</font> {% elif states('sensor.accu_bms0_cell_15') ==
'15' %} <font color="orange">{{
states('sensor.accu_bms0_cell_15') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_15') }} V {% endif %}
<br>
16. {% if
states('sensor.accu_bms0_max_cell_voltage') == '16' %} <font
color="#3090C7">{{ states('sensor.accu_bms0_cell_16') }}
V</font> {% elif states('sensor.accu_bms0_min_cell_voltage') ==
'16' %} <font color="orange">{{
states('sensor.accu_bms0_cell_16') }} V</font> {% else %}
{{ states('sensor.accu_bms0_cell_16') }} V {% endif %}
<br>
card_mod:
style: |
ha-card {
box-shadow: none;
background: rgba(0,0,0,0);
border: white solid 1px !important;
}
Post your updated code in the other thread as this in not card mod related. I’ll take a look from there…
1 Like
Which thread?
Hi @KTibow maybe you can help me please.
I’m trying to add the custom:layout-card with card-mod overflow-x: auto and unfortunately I can’t get it to work.
This is my attempt:
type: custom:layout-card
layout_type: custom:grid-layout
card_mod:
style:
layout-card:
$:
grid-layout:
$: >
#root {
justify-content: start !important;
overflow-x: auto !important;
-ms-overflow-style: none;
scrollbar-width: none;
scroll-snap-type: x mandatory !important;
}
#root::-webkit-scrollbar {
display: none !important;
}
#root > * {
scroll-snap-align: start;
}
It just won’t work, the cards always reach over the edge.
Here are the layout options for the layout card:
layout:
grid-template-columns: repeat(auto-fit, max-content)
grid-template-rows: auto
grid-auto-columns: max-content
grid-auto-flow: column
margin: "-4px -4px -8px -4px"
I’m at a loss and hope you can help, or someone else 
if they have a solution? Many thanks in advance.
I’m trying to set the background of this markdown-card (inside a browser-mod pop-up) to none, but can’t figure out, where and to which element I have to apply the style. Nothing of what I tried, worked so far.
Could someone please tell me, where to add the background: none style to this config?
type: button
entity: light.lavalampe
icon: mdi:lava-lamp
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
size: normal
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__container {
height: auto;
--ha-dialog-border-radius: var(--ha-card-border-radius) !important;
}
div.mdc-dialog div.mdc-dialog__scrim {
backdrop-filter: blur(5px);
background: transparent;
}
title: Lavalampe
content:
type: markdown
content: |
Jetzt {{ 'einschalten' if
states('light.lavalampe') == 'off' else 'ausschalten'
}}?
right_button: "Yes"
left_button: "No"
right_button_action:
service: light.toggle
data:
entity_id: light.lavalampe
use mod card to edit css layout-card.
type: custom:mod-card
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
grid-auto-flow: column
grid-auto-columns: calc(50% - 20px * 2)
grid-template-rows: minmax(150px, 1fr)
grid-gap: 10px
cards:
- &button
show_name: true
show_icon: true
type: button
entity: light.christmas_tree_lights
icon_height: 200px
- *button
- *button
card_mod:
style:
.: |
layout-card$grid-layout$:
.: |
#root {
overflow-x: scroll;
}
1 Like
type: button
entity: light.bed_light
icon: mdi:lava-lamp
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
size: normal
style: >
ha-dialog {
--vertical-align-dialog: center !important;
--dialog-surface-margin-top: 0px !important;
--dialog-box-shadow: 0 0px 16px 4px rgba(101,115,134, .15), 0 16px 64px 32px rgba(101,115,134, .5) !important;
--dialog-backdrop-filter: blur(5px) brightness(0.3);
--mdc-theme-surface: transparent !important;
--ha-card-background: none !important;
}
title: bed_light
content:
type: markdown
content: |
Jetzt {{ 'einschalten' if
states('light.bed_light') == 'off' else 'ausschalten'
}}?
right_button: "Yes"
left_button: "No"
right_button_action:
service: light.toggle
data:
entity_id: light.bed_light
Many thanks for the quick help! It works. 
Could you explain to me why mod-card works and assigning card-mod directly does not?
everything is described in the readme. why the Ha-card element is not in the layout-card, I don’t know…
Ah okay, I understand (now). Thanks for your feedback.
Thank you! Using --ha-card-background: none !important; did the trick. Though, I’m pretty sure I tried that before. But maybe it was a cache issue and the css didn’t load properly then.
card_mod:
style:
ha-dialog$: |
div.mdc-dialog div.mdc-dialog__container {
height: auto;
--ha-card-background: none !important;
--ha-dialog-border-radius: var(--ha-card-border-radius) !important;
}
div.mdc-dialog div.mdc-dialog__scrim {
backdrop-filter: blur(5px) brightness(0.7);
}