Iāll try to find a card that isnāt dynamic and see if that has any effect. So far Iāve tried the default weather card, custom expander card, and default thermostat card and have the same issue in that first card slot. Iāll try some other cards and see if I can find one that doesnāt lose its styling. Thanks for the help. I would assume that most cards are going to be dynamic (or have some kind of scaling) when using the HA companion app?
No idea. Only a few stock cards (weather, markdown, ???) have dynamic classes added. Other cards have dynamic sizes (as expected) (and letās not talk about sectionsā¦).
Yes, you can. But donāt put the hex color between quotes (even if it works) because it is not the standard. Do it like this:
rgb(from #98878f r g b / 0)
Yes, you need to separate any color by spaces, that is because you can do this:
rgb(from #98878f r 25 50)
So, it will take the red from #98878f (0x98 = 152) and the blue and red as 25 and 50.
1 Like
Iāve been playing around trying to customise some climate tiles for a wall display dashboard to primarily control a heat pump
Unfortunately I have been unable to locate examples to understand how to achieve what I want - any assistance with the following appreciated
See below photos - I was hoping to be able to customise inactive and active colours for the HVAC mode and fan speed buttons on the climate tile card
I was also hoping to replace the icons with text āHeatā āCoolā etc
Any help with how to reference the buttons and achieve the above would be appreciated
Cheers
Waz
1 Like
I have been struggling with this for 2 days, and I need to know if it is even possible (so I can stop if it isnāt)ā¦ I have really tried to avoid asking someone to think for me, but I have failedā¦ Please help, I need to sleep!
I have a default sections dashboard with a couple of tabs (calendar and shopping list). Iāve tried to show the code with as little as possible whilst showing enoughā¦
I am successfully placing an image from my template in the background of the custom:week-planner-card (as shown with the first card_mod), but I want the image in the background behind that (and the other) cards, basically the background of the dashboardās tab.
I have tried so many versions of the second card_mod shown below to get the image behind the card (in ha-sortable or hui-view or hui-view-container, I canāt get anything in the card_mod slot of those)ā¦
kiosk_mode:
views:
- title: Calendar
sections:
- type: grid
cards: ...
- type: grid
cards:
- type: custom:week-planner-card
calendars: ...
...
card_mod:
style: |
ha-card {
background: url('{{ states('sensor.unsplash_random_image') }}') no-repeat center;
background-size: 100%;
}
- type: grid
cards: ...
card_mod:
style: |
ha-sortable: {
background: url('{{ states('sensor.unsplash_random_image') }}') no-repeat center;
background-size: 100%;
}
cards: []
type: sections
...
badges: ...
I have also tried DOM navigation using things like the below:
ābody home-assistant $ home-assistant-main $ ha-drawer partial-panel-resolver ha-panel-lovelace $ hui-root $ #view hui-view hui-sections-view $ ha-sortableā:
But, I think I just donāt get itā¦
Please, can someone tell me how to do this, or tell me it canāt be done. Either way, end my misery!
Thanks,
Matthew
nice, and great explanation, something for Ildarās cookbook overview I would think!
fwiw, my complete mod now, well, my complete type: map view even, is
title: Kaart
path: kaart
icon: mdi:map
type: panel
cards:
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/7530
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/7551
- type: map
# can Not use entity as object because of the card_mod
hours_to_show: 48
entities:
- person.me
- etc
-
card_mod:
style:
ha-map $:
ha-entity-marker $: |
{% for entity in config.entities %}
{% set id = entity.split('.')[1] %}
{% set activity = states('sensor.' ~ id ~ '_activity') %}
{% set afstand = states('sensor.thuis_' ~ id ~ '_distance')|int(-5) %}
{% set thresholds =
[(300,0.5),(200,1),(150,1.5),(100,2),(50,2.5),(30,3),(20,3.5),(10,4)] %}
{% set pix =
thresholds|selectattr('0','<=',afstand)
|map(attribute='1')|list|first|default(8) %}
{% set t = ((1 / 150) * afstand + 1)|round(1) %}
{% if activity in ['Automotive','Cycling','Walking'] %}
:host([entity-id='{{entity}}']) .marker {
outline: solid {{pix}}px var(--warning-color);
animation: resizing_outline calc( {{t}}s ) linear infinite;
border: var(--warning-color) {{pix}}px dashed;
}
{% endif %}
{% endfor %}
@keyframes resizing_outline {
0% {outline-offset: 0;outline-color: rgb(from var(--warning-color) r g b / 1);}
25% {outline-offset: 5px}
50% {outline-offset: 10px}
75% {outline-offset: 15px}
100% {outline-offset: 20px;outline-color: rgb(from var(--alert-color) r g b / 0.1);border-color: transparent;}
}
and has been working perfectly with the latest adjustments
leaves me with just 1 challenge: how to mod this on a single entity in a Map config like:
type: map
entities:
- entity: person.me
name: Me in map
focus: false
card_mod:
style:
ha-entity-marker $: | ??
its different because of the path, and because of the fact its now using an entity object (opposed to the entity in the posted config above)
I would like the text and the icon to turn red when the window is open and green when it is closed. Unfortunately, my code is not working. Could someone please help me?
type: heading
heading_style: subtitle
heading: "BĆ¼ro "
badges:
- type: entity
entity: binary_sensor.fenster_buro_tur_2
style: |
:host {
color: {{ states('binary_sensor.fenster_buro_tur_2') == 'on' ? 'var(--error-color)' : 'var(--success-color)' }};
}
- type: entity
entity: sensor.rauchmelder_buro_reinheit
icon: mdi:desk
1st post ā link at the bottom titled āfantasticā ā Heading
i use
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
still struggling to read code, please make it look like this:
type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
style: |
ha-card {
{% if is_state('sun.sun','above_horizon') %} background: red;
{% else %} background: green;
{% endif %}
}
this works, so just replace with your template
Note you didnt use an āelseā which makes the template doing noting in that case, probably your issue.
btw, myself I rather use this syntax:
card_mod:
style: |
ha-card {
background:
{% if not is_state('sun.sun','above_horizon') %} red
{% else %} green
{% endif %};
}
or even shorter with the inline notation
card_mod:
style: |
ha-card {
background:
{{ 'red' if not is_state('sun.sun','above_horizon') else 'green' }}
}
to avoid as much duplicate code as possible, matter of taste. Same goes for the positioning of the delimiting ;
Note: background-color is almost always replacable with background and again is less yaml 
same goes for the !important. Only really required if you need to override another (global) setting in the local card, and in this case, not required.
1 Like
I canāt seem to get it to work, unfortunately.
type: heading
icon: mdi:desk
heading: BĆ¼ro
badges:
- type: entity
show_state: true
show_icon: true
entity: binary_sensor.fenster_buro_tur_2
- type: entity
entity: sensor.rauchmelder_buro_reinheit
heading_style: subtitle
card_mod:
style: |
.badges hui-heading-badge:nth-child(1) hui-entity-heading-badge {
color:
{% set s = states('binary_sensor.fenster_buro_tur_2') %}
{% if s == 'off' %} green;
{% else %} red;
{% endif %}
}
the icon should be colorized according to you state-colors in the theme, are they not changing at all?
note you need to set
color: state
on the badges you want colorized
Because you copy/pasted the example in a wrong way, compare your code & the example.
I have added a custom card mod to change to width and height of my camera view, but I get āno card type configuredā. What am I doing wrong ?
- type: conditional
conditions:
- entity: input_select.dashboard_view
state: 'camera'
card:
- type: custom:mod-card
view_layout:
grid-area: panel
style: |
ha-card {
width: 350px !important;
height: 200px !important;
}
card:
type: vertical-stack
cards:
- type: picture-entity
entity: camera.deurbel_profile_name
camera_image: camera.deurbel_profile_name
camera_view: live
show_state: false
show_name: false
Iām applying the following styling to 8 cards in my dash, while the only difference between the 8 are the --icon-color: and --shape_color: directives.
How can I simply re-use the majority of the styling, while still being able to set those two color lines per card? Iāve been looking into yaml anchors, but fail to understand how to apply that in this use case/
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -47px;
left: -150px;
overflow: visible !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -49px;
left: -150px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -32px;
top: 105px;
--icon-color: rgb(128, 199, 149) !important;
--shape-color: rgba(128, 199, 149, 0.2) !important;
}
.: |
ha-card {
background: none;
}
:host {
--mush-icon-size: 140px;
}
Ok, thank you for your help, but I just donāt understand it. Iāve tried a few more times now, but I just canāt get it right.
type: heading
icon: mdi:desk
heading: BĆ¼ro
badges:
- type: entity
show_state: true
show_icon: true
entity: binary_sensor.fenster_buro_tur_2
card_mod:
style:
.badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
state-display {
{% set s = states('binary_sensor.fenster_buro_tur_2') %}
color:
{% if s == 'off' %} green;
{% else %} red;
{% endif %};
}
- type: entity
entity: sensor.rauchmelder_buro_reinheit
heading_style: subtitle
Check the docs for conditional card. Your problem is likely with that part of the code, not card-mod.
Conditional card takes a dictionary not a list.
1 Like
The condition is working ā¦
Meaning what? My post helped, didnāt help, you still get the same error? Bit cryptic honestly.
1 Like
sorry, misread what you typed.
So you mean the ātypeā cannot be a custom mod card ?
your post helped