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);
}
Is it possible to avoid card’s black background flash just after clicking or refreshing the card or to turn on or off the specific automation ?
Black background flash shown when refresing the card:
Transparent background shown after loading the card:
After clicking or refresihing the card, the transparent background is loaded correctly, but when loading the card the black background is flashed. Is it possible to avoid the black flash whenever a click is made to turn on or off the automation ?
The following is my card code, used for different types of fields:
---
custom_card_numslctstyle:
variables:
var_num_slct_entity: '[[[ return null ]]]'
styles:
card:
- box-shadow: "none"
- border: "none"
- padding: "0px"
- background-color: "transparent"
- overflow: "visible" ## allows "select" dropbox not to be cut ##
grid:
- grid-template-areas: "'numslct'"
- grid-template-columns: "1fr"
- grid-template-rows: "ifr"
custom_fields:
numslct:
card:
type: "entities"
entities:
- type: '[[[ if (variables.var_num_slct_entity.includes("timer.")) return "attribute" ]]]'
entity: '[[[ return variables.var_num_slct_entity ]]]'
attribute: '[[[ if (variables.var_num_slct_entity.includes("timer.")) return "duration" ]]]'
suffix: '[[[ if (variables.var_num_slct_entity.includes("timer.")) return " Duration" ]]]'
secondary_info: "last-triggered"
card_mod:
style:
ha-time-input $ ha-base-time-input $ ha-textfield $: |
.mdc-text-field {
height: 22px !important;
}
ha-time-input $ ha-base-time-input $: |
ha-textfield:nth-of-type(1) {
width: 25px;
margin-right: -2px;
}
ha-textfield:nth-of-type(2) {
width: 25px;
margin-left: 0px;
}
ha-date-input:
$:
ha-textfield $: |
.mdc-text-field__input {
align-self: center;
}
hui-generic-entity-row ha-date-input $:
ha-textfield $: |
span#label {
display: none;
}
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
display: none;
}
.text-content {
font-size: 14px;
}
ha-textfield $: |
.mdc-line-ripple::before, .mdc-line-ripple::after {
border-bottom-style: none !important;
}
.mdc-text-field {
height: 20px !important;
}
.mdc-text-field__input {
align-self: center;
}
span#label {
display: none;
}
ha-select $: |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
.mdc-select__anchor {
height: 25px !important;
}
.mdc-select__selected-text-container {
align-self: start;
}
span#label {
display: none;
}
ha-select $ mwc-menu $: |
mwc-list {
max-height: 400px;
}
.: |
ha-select {
height: 25px;
}
:host {
--mdc-menu-item-height: 60px;
--secondary-text-color: var(--primary-text-color);
--paper-item-icon-color: silver;
--mdc-text-field-fill-color: transparent;
--mdc-select-fill-color: transparent;
--mdc-text-field-idle-line-color: transparent;
--mdc-text-field-hover-line-color: transparent;
--mdc-select-idle-line-color: transparent;
--mdc-select-hover-line-color: transparent;
}
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
background-color: transparent;
}
Many thanks !