@Ildar_Gabdullin Many thanks for your support !!!
Your guide to card_modās capabilities is amazing
1 Like
thank you very much.
I tried this and it didnāt work - any suggestions?
type: heading
icon: mdi:home-floor-g
heading: Hall
heading_style: subtitle
badges:
- type: entity
show_state: true
show_icon: true
entity: climate.1_ground_landing_and_toilet_neo
state_content:
- current_temperature
- hvac_action
tap_action:
action: more-info
card_mod:
style:
ha-card {
{% if state_attr(āclimate.1_ground_landing_and_toilet_neoā,āhvac_actionā) == āheatingā -%}
color: green;
{%- else -%}
color: red;
{%- endif %}
}
I said āadaptā - which does not mean you should use it āas isā. Use a proper path for elements in your card-mod code.
Thanks. I donāt know how to adapt the language more than I have already done. Sorry, Iām just not that familiar with this all.
I see. Take your prev post with static customized (by card-mod) color; assume it looks like
xxx {
some-icon-color-property: red;
}
and then use a jinja expression ā{% if ā¦ -%} ā¦ {%- endif %}ā from my example.
I am not giving you a ready solution, not easy from a mobile, so it is better for you to create it yourself.
Hi, could anyone help with this?
Iām having this issue with some of the bar graphs going outside the box
Basically i just need to have them fit inside the box or probably resize it to remove the empty space below
wow, thanks! I need to spend some over over this, great stuff!
I want to increase the text size of the tabs on the top of the dashboard, they are too small on the desktop (circled in red)
Here is the mod for the badge icon size in the Heading card.
Just in case someone wants to modify the icon size.
card_mod:
style:
.badges hui-entity-heading-badge $: |
ha-state-icon {
--mdc-icon-size: 18px;
}
Hi everyone, here is my first post:
(sections, type: heading)
I have this, which worked until 2024.10. unfortunately not since 2024.11. Do you know if something has changed since 2024.11 or what could be the reason?
card_mod:
style:
.badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
ha-heading-badge {
{% if is_state('binary_sensor.sensor1', 'on') %}
color: orange !important;
{% else %}
color: white !important;
{% endif %}
}
.badges hui-heading-badge:nth-child(4) hui-entity-heading-badge $: |
ha-heading-badge {
{% if is_state('binary_sensor.kontakt_2', 'on') %}
color: orange !important;
--card-mod-icon: phu:double-window-open !important;
{% else %}
color: white !important;
--card-mod-icon: phu:double-window-closed !important;
{% endif %}
}
.badges hui-heading-badge:nth-child(5) hui-entity-heading-badge $: |
ha-heading-badge {
{% if states('sensor.kohlendioxid') | int <= 1000 %}
color: lightgreen !important;
/*--card-mod-icon: mdi:check-circle !important;*/
{% elif states('sensor.kohlendioxid') | int > 1000 and states('sensor.kohlendioxid') | int <= 2000 %}
color: orange !important;
--card-mod-icon: mdi:cloud-alert !important;
{% else %}
color: red !important;
--card-mod-icon: mdi:alert-circle !important;
{% endif %}
}
.: |
ha-card.type-heading {
font-size: 8px !important;
height: 50px; !important;
padding: 0px; !important;
}
The font size adjustment works, but the icon change and the color change no longer do. As I said, only since 2024.11
Another thread - card-mod-themes.
Thanks! I got it working!
hi, i am brand new and trying to learn. i have this card on my dashboard and would like to increase the font size, remove the border and background. can you tell me what i need to do /code i need?
Posting your working code can help other users.
ok, i think i got it. instead of
.badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
ha-heading-badge
it should now be
.badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
ha-state-icon
should be called.
2 Likes
Iām trying to get my dashboard cleaned up and wanted to have some kind of status display for my appliances (dishwasher, washing machine, tumble dryer)
My goal was to have the icons green when finished and red when running.
This is my code so far:
type: entities
entities:
- entity: input_text.waschmaschine_status
type: custom:multiple-entity-row
name: WƤsche
show_state: false
show_icon: false
entities:
- icon: mdi:washing-machine
state_color: true
card_mod:
style: |
.entities-row div.entity:nth-child(1) {
{% set state = states('input_text.waschmaschine_status') %}
{% if state == 'ready' %}
--state-icon-color: green;
{% else %}
--state-icon-color: red;
{% endif %}
}
- icon: mdi:tumble-dryer
state_color: true
card_mod:
style: |
.entities-row div.entity:nth-child(2) {
{% set state = states('input_text.trockner_status_status') %}
{% if state == 'ready' %}
--paper-item-icon-color: green;
{% else %}
--paper-item-icon-color: red;
{% endif %}
}
- icon: mdi:dishwasher
state_color: true
show_header_toggle: false
state_color: true
Unfortunately it doesnāt work. Can any of you point me in the right direction?
Check for proper styles here: 1st post of this thread ā link at the bottom titled āfantastic postā ā multiple-entity-row
i āfixedā your code to work with template, hope help uā¦
Regrats!
type: custom:mushroom-template-card
icon: mdi:lock
fill_container: false
icon_color: yellow
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
layout: vertical
entity: input_boolean.menu_lock_luzes_piso_01
primary: ""
card_mod:
style: |
ha-card {
content: '';
overflow: visible !important;
box-shadow: none !important;
border: none !important;
transition: all 0s;
}
:host {
position: sticky;
z-index: 4;
top: 0px;
}
ha-card::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 50%;
height: 100%;
box-shadow: 0 0 10px 5px red,0 0 30px 10px red;
z-index: -1;
animation: half-yellow-shadow 5s infinite linear;;
border-radius: 5px;
}
ha-card::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 50%;
height: 100%;
box-shadow: 0 0 10px 5px #0ff,0 0 30px 10px #0ff;
z-index: -1;
animation: half-cyan-shadow 10s infinite ease;;
border-radius: 5px;
}
@keyframes gradient-shadow-card {
0% {
box-shadow: 0 0 10px 5px darkblue,0 0 30px 10px darkblue;
}
25% {
box-shadow: 0 0 10px 5px blue,0 0 30px 10px blue;
}
}
@keyframes boxShadowPulse {
0% {
box-shadow: 0px 0px 10px 6px rgba(var(--rgb-blue), 0.5), 0px 0px 20px 12px rgba(var(--rgb-blue), 0.3);
}
50% {
box-shadow: 0px 0px 15px 8px rgba(var(--rgb-blue), 0.8), 0px 0px 25px 15px rgba(var(--rgb-blue), 0.5);
}
100% {
box-shadow: 0px 0px 10px 6px rgba(var(--rgb-blue), 0.5), 0px 0px 20px 12px rgba(var(--rgb-blue), 0.3);
}
}
@keyframes half-yellow-shadow {
0% {
top: 0;
left: 0;
height: 50%;
width: 50%;
}
16.66% {
top: 0;
left: 0;
height: 50%;
width: 100%;
}
32.32% {
top: 0;
left: 50%;
height: 50%;
width: 50%;
}
49.98% {
top: 50%;
left: 50%;
height: 50%;
width: 50%;
}
66.64% {
top: 50%;
left: 0;
height: 50%;
width: 100%;
}
83.3% {
top: 50%;
left: 0;
height: 50%;
width: 50%;
}
100% {
top: 0;
left: 0;
height: 50%;
width: 50%;
}
}
@keyframes half-cyan-shadow {
0% {
bottom: 0;
right: 0;
height: 50%;
width: 50%;
}
16.66% {
bottom: 0;
right: 0;
height: 50%;
width: 100%;
}
32.32% {
bottom: 0;
right: 50%;
height: 50%;
width: 50%;
}
49.98% {
bottom: 50%;
right: 50%;
height: 50%;
width: 50%;
}
66.64% {
bottom: 50%;
right: 0;
height: 50%;
width: 100%;
}
83.3% {
bottom: 50%;
right: 0;
height: 50%;
width: 50%;
}
100% {
bottom: 0;
right: 0;
height: 50%;
width: 50%;
}
}