Someone here, who have the problem as well with map card, which removes all card_mod on every edit-open in the UI and perhaps a fix for this?
Do not recall the issue with the Map, with some other cards see it practically always.
Not surprised with the fact that it happens with the Map.
How can I change this icon size and icon color?
I have the necessary styling but I canāt apply them alltogether properly (or they are not respected):
icon size:
:host {
--mdc-icon-size: 60px;
}
icon color:
ha-state-icon:
$: |
ha-svg-icon {
color: green;
}
Full (but minimum/reduced) card:
type: custom:mod-card
card:
type: grid
columns: 1
square: false
title: ''
cards:
- type: markdown
title: ''
content:
[ REMOVED IRRELEVANT CONTENT ]
- type: vertical-stack
cards:
- type: grid
columns: 2
square: false
title: ''
cards:
- type: button
[ REMOVED IRRELEVANT CONTENT ]
- type: custom:auto-entities
card:
type: entities
title: ''
state_color: true
show_header_toggle: false
card_mod:
style: |
ha-card {
text-align: center;
letter-spacing: 1px;
font-weight: bold;
border-width: 2px;
padding: 0px;
background: default;
}
filter:
include:
- entity_id: sun.sun
options:
name: S p r a c h s t e u e r u n g
icon: mdi:account-voice
tap_action:
action: assist
start_listening: true
card_mod:
style:
ha-state-icon:
$: |
ha-svg-icon {
color: green;
}
hui-generic-entity-row:
$: |
.text-content:not(.info) {
display: none;
}
.info.pointer {
#color: red;
font-size: 18px;
}
exclude: null
show_empty: false
unique: true
sort: []
- type: custom:simple-clock-card
[ REMOVED IRRELEVANT CONTENT ]
card_mod:
style:
hui-grid-card:
$: |
.card-header {
#width: max-content;
#margin: 0 auto;
}
ha-card {
#margin-bottom: -15px;
margin-top: -2px;
}
EDIT: solved at
But this is then from the parser (changes) of one of the HA updates and we have to live with it or fixable from Thomas or someone else in Card Mod?
did you test it in a yaml dashboard?
if you did and the Map cards remain as is, than this would indeed be a UI bug, and should be filed in the repo as such.
I didnt check yet but maybe someone else already reported it? (letās have a look)
Personally, I had sizing issues with iframe card, and not the map card. I couldnt get the iframe to fill the full width under a fold anymore.
I managed to fix it setting the mod on the fold itself, and no longer on the iframe.
Maybe the issue you experience is related? or do you experience other trouble.
Unfortunately, no. There are no problems. Only the complete code lines of card-mod are deleted on every edit-open for the card. Not nested or anything else.
Edit: And whyever I cannot re-produce it anymore today. It was always the case in the last weeks/months.
Hey everyone, Iām creating a dashboard thorugh YAML mode and Iām using card_mod a lot. I wonder if there is a way to create smooth angles for the cards, as the ones you configure via UI.
Is it possible to adjust the height of the individual timelines in a history-graph card in timeline view?
I often use the option to open the more-info dialog. Doing this on a touchscreen is a bit difficult because the graphs are so narrow and close together.
I am struggling hard to format the buttons in footer of an entities card. I want to format the buttons at bottom - I tried to work out the DOM selector for hours nowā¦
Chrome:
and:
Here is where I am currently stuck:
card_mod:
style: |
ha-card {
background-color: var(--primary-background-color);
padding: 0px;
border-width: 0px !important;
color: var(--prim-text-color);
}
.card-header {
font-size: 24px;
padding: 0px 4px 0px 18px;
border-bottom: 1px solid var(--divider-color);
margin-bottom: 10px;
font-size: 1.2em;
font-weight: 450;
background: var(--primary-background-color);
border: 0px;
}
.card-content {
font-size: 14px;
text-transform: uppercase;
padding: 0px 6px 4px 8px;
#border-radius: var(--ha-card-border-radius, 12px);
border: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
background: var(--card-bg-color);
}
.header-footer {
background-color: var(--card-bg-color);
border-bottom: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
border-right: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
border-left: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
#Trying to find the right DOM ;)
# Works
.header-footer hui-buttons-header-footer{
#border: 1px solid green;
#display: block;
}
# Does not work
.header-footer hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
$: |
ha-assist-chip {
border: 1px solid green !important;
}
I read the previous suggestions in this thread on formatting the buttons - they all dont work for meā¦ Anyone with an Idea?
I made these mods in my card-mod-theme, maybe that can help:
card-mod-card-yaml: |
hui-buttons-header-footer $ hui-buttons-base:
$ : |
.ha-scrollbar {
justify-content: space-evenly;
height: 50px;
align-content: center;
margin: -8px 0px 0px 0px;
}
hui-buttons-header-footer $ hui-buttons-base $: |
ha-assist-chip {
border: 1px solid var(--primary-color);
border-radius: var(--ha-card-border-radius);
/*--ha-assist-chip-filled-container-color: yellow;*/
--secondary-text-color: var(--primary-color);
--primary-text-color: var(--primary-color);
--_label-text-weight: bold;
}
ha-assist-chip state-badge {
justify-content: space-between;
margin-left: 4px;
}
to do things like this
the icons change their active color, but that is not set in these mods
1 Like
Thanks for chiming in.
I tried - but no luck. My code misses the hui-butotns-base.
Can you share how you generated the buttons? via footer type:buttonss?
yes:
footer:
type: buttons
entities:
- entity: script.turn_on_cameras
name: Cameras aan
icon: mdi:record
- entity: switch.cameras
name: Cameras
- entity: script.turn_off_cameras
name: Cameras uit
icon: mdi:stop
did you add the code to the theme and Reload themes?
1 Like
I just tried it on a fresh dashboard - and your code works. So the mistake is with me. Thanks once again!
I implement the code directly in the raw configuration editor in my build-and-test dashboard, before i then copy it over into my yaml mode configged live dashboard that is live on the ipads on the walls.
Is there a better workflow/way to implement.
nope, what ever works best for you 
I do have 2 test dashboards, one in yaml, and one using the UI. If they work, I directly copy them over in my main dashboards.
this particular mod is in my themes, I only have those globally set, so always testing inside the production system. Nothing breaks, and if it does, itās an easy revert. commandZ a few times and weāre good.
1 Like
I got it to work thanks to you - massive kudos to you! Appreciate your help!
1 Like
wow that was long agoā¦
because of helping Laineg above, I was reminded I also had those icons changing, and checked the mods in the thread. I can not for the life of me create a correct mod on the button entities them selves or in the footer section as is described there.
all I can do is set this global mod for the entities card containing the footer buttons:
- type: entities
card_mod:
class: class-header-margin
style:
hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
ha-assist-chip:
.: |
ha-assist-chip:nth-child(2) {
--card-mod-icon: mdi:{{'stop' if is_state('script.play_tune','on')
else 'play'}}
when the footer config is:
footer:
type: buttons
entities:
- entity: input_boolean.loop_tune
name: Loop tune
- entity: script.play_tune
name: Speel tune
I did try this too but they fluke so I commented them so I wont forgetā¦
footer:
type: buttons
# card_mod:
# style:
# hui-buttons-base $: |
# ha-assist-chip:nth-child(2) {
# {% if is_state('script.play_sound_bite','on') %}
# --card-mod-icon: mdi:stop;
# {% else %}
# --card-mod-icon: mdi:play;
# {% endif %}
entities:
- entity: input_boolean.loop_sound_bite
name: Loop soundbite
- entity: script.play_sound_bite
name: Speel soundbite
# card_mod:
# style: |
# :host {
# --card-mod-icon:
# {% if states('script.play_sound_bite') == 'on' %} mdi:stop
# {% else %} mdi:play
# {% endif %};
if you see an obvious error that might fix it, please dont hold back
btw, this IS a nice option to use the iif syntax:
.: |
ha-assist-chip:nth-child(2) {
--card-mod-icon:
mdi:{{iif(states('script.play_tune') == 'on','stop','play')}}
}
I have another issue: the group of buttons in the footer of my entities card breaks nicely on screen resolutions > 450px. At exactly 450px the lines of buttons jump into one line and overflew left and right of the footer.
Anyone with an idea why this is happening and how I can prevent it? Tried to find breakpoint defintions in the theme but couldnt find itā¦
Hi,
i hope this is the right place for this. I do have a little problem: i set up some colored icons on my dashboard using card-mod. On the browser this is working more or less ok (sometimes the color is not showing, sometimes the code gets changed by itself and i donāt know why) but thatās not the thing.
Those colors are working on the browser on different PCās but in my companion app those colored icons not showing, instead they are showing as standard blue icons and the seems not to get the configuration.
My config or code does nothing really exiting. Just coloring the icons on temperature change (this works)
I already googled this issue, did not find a solution. I am pretty new to Home Assistant in general so any advise would be appreciated! Let me know if you need more info, pictures or whatever
Post a SHORT properly formatted code demonstrating the issue.
Thanks for your answer!
This is one part which stays always the same and does not get changed by itself:
type: entities
entities:
- entity: switch.wohnzimmer_licht_schalter
card_mod:
style: |
:host {
{% if is_state('switch.wohnzimmer_licht_schalter' , 'on') %}
--card-mod-icon-color: green;
{% elif is_state('switch.wohnzimmer_licht_schalter' , 'off') %}
--card-mod-icon-color: red;
{% endif %}
}
This one here is an example of one that gets changed:
How it should look:
- entity: sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung
card_mod:
style: |
:host {
{% if states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') | float(0) > 75 %}
--card-mod-icon-color: red; --card-mod-icon: mdi:alert-decagram;
{% elif states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') | float(0) > 50 %}
--card-mod-icon-color: yellow;
{% elif states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') | float(0) <= 50 %}
--card-mod-icon-color: green;
{% endif %}
}
How it gets changed:
- entity: sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung
card_mod:
style: >
:host {
{% if
states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') |
float(0) > 75 %}
--card-mod-icon-color: red; --card-mod-icon: mdi:alert-decagram;
{% elif
states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') |
float(0) > 50 %}
--card-mod-icon-color: yellow;
{% elif
states('sensor.192_168_178_23_amd_gpu_gpu_amd0_prozessorauslastung') |
float(0) <= 50 %}
--card-mod-icon-color: green;
{% endif %}
}
I am using Dahsboard ā Edit ā Edit Card ā Code-Editor ā Paste Code