never have to do anything special for views, I simply click the refresh top right corner
nice trick indeed, will save me even more lines, in addition to the use of yaml anchors per include.Coming to think of it, it might be even better than rely on the card-mod classes. hmm have to test that.
Probably depends on how you keep your views’ code.
My method is “1 view = 1 yaml” (sometimes with included yamls for cards), “1 dashboard = 1 yaml with included yamls for views”.
So, editing a view’s file, a file for decluttering/button-card template does not cause rebuilding a UI - need to mark a dashboard file as changed.
yes, I have that same organization:
a dashboard:
button_card_templates: !include_dir_merge_named ../button_card_templates
decluttering_templates: !include_dir_named ../decluttering_templates
kiosk_mode: !include ../kiosk-mode/kiosk-mode.yaml
views:
- !include ui-data/view_data_Energy.yaml #0
- !include ui-data/view_data_Solar.yaml #1
- !include ui-data/view_data_Climate.yaml #2
- !include ui-data/view_data_Water.yaml #3
- !include ui-data/view_data_Presence.yaml #4
- !include ui-data/view_data_Computer_netwerk.yaml #5
- !include ui-data/view_data_Light.yaml #6
- !include ui-data/view_data_Summary_groups.yaml #7
- !include ui-data/view_data_Floorplan.yaml #8
- !include ui-data/view_data_Time.yaml #9
and a view:
title: Computer & Network
path: computer_network
icon: cil:desktop-mac
type: custom:horizontal-layout
layout:
max_cols: 2
cards:
- !include /config/dashboard/includes/include_path_switch.yaml
- !include /config/dashboard/buttons/buttons_shortcut_menu.yaml
- !include /config/dashboard/includes/include_netwerk_devices.yaml
- !include /config/dashboard/includes/include_computers.yaml
# - !include /config/dashboard/includes/include_bluetooth_devices.yaml
- !include /config/dashboard/includes/include_synology_dsm.yaml
- !include /config/dashboard/includes/include_synology_dashboard.yaml
- !include /config/dashboard/includes/include_servers_hubs.yaml
- !include /config/dashboard/includes/include_printer_dashboard.yaml
- !include /config/dashboard/includes/include_audio_video_devices.yaml
they are nicely refreshed no matter what is changed.
Exactly same structure.
Hmmm, I usually use F5, not the HA refresh button. May be this is a reason.
its there for a reason 
and its super fast these days
Hi,
I tried all sorts of your suggestions in your link past few days. None of the card-mod would work, I am kind of stuck. What I would really want to do is to make Garage Door and the Laundry Lock turn “Red” color with glowing animation if the door is open or the lock is unlocked. Is card-mod not working in horizontal-stack or stack-in-card? I pasted the code. Can you please see how I can modify to make it work? Hope you or someone can help me? Much appreciated. Thanks in advance.
type: vertical-stack
cards:
- type: custom:stack-in-card
title: null
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: sensor
entity: sensor.processor_use
name: CPU%
- type: sensor
entity: sensor.cpu_temperature
name: CPU Temp
- type: sensor
entity: sensor.memory_use_percent
name: Memory%
- type: custom:stack-in-card
title: null
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: button
entity: switch.garage_door
icon: mdi:garage-variant
- type: button
entity: binary_sensor.laundry_door_contact
name: Laundry Door
- type: button
entity: lock.laundry_lock
icon: mdi:lock
card_mod: null
style: |
ha-card {
background: var(--background-card-color);
}
#states div:nth-of-type(1) {
--paper-item-icon-color: [[ if(lock.laundry_lock == "unlocked", "red", "green")]];
}
I am again struggling to find the correct place to make my changes. Could someone please explain to me how to make these work?
"#view>hui-view>hui-masonry-view$#columns>div>hui-card-options>hui-horizontal-stack-card$#root>hui-picture-elements-card:nth-child(1)"
Here, the --stack-card-margin needs to be changed.
type: horizontal-stack
cards:
- type: picture-elements
card-mod:
style:
hui-picture-elements-card $: |
div#root {
--stack-card-margin: 0;
}
elements:
- type: image
Has anyone figured out how to make a card’s outline go away with 2022.11.0? It looks like the HA team changed it to not use box-shadow anymore, but I’ve spent 20 minutes trying to guess what it is instead with no luck, and I’ve never been able to find any documentation of the css style sheets they use.
# Example configuration.yaml entry
frontend:
themes:
No Borders:
ha-card-border-radius: 1px ## or 0 “ or what you want it to look like “
ha-card-border-color: rgba(0,0,0,0) ## transparent
Mushroom:
# Nothing here as it's the default HA theme since 2022.11
modes:
light: {}
dark: {}
ha-card-border-width: "0px"
I’m trying to change the icon based on hub mode status. What am I missing in my syntax that won’t let this work? TIA
- type: custom:mushroom-entity-card
entity: select.hub_mode
name: Mode
primary_info: none
layout: vertical
icon_type: icon
icon_color: grey
card_mod:
style: |
mushroom-shape-avatar {
{% if is_state('sensor.hub_mode','Day') %}
icon: mdi:white-balance-sunny;
{% elif is_state('sensor.hub_mode','Evening') %}
icon: mdi:weather-sunset-down;
{% elif is_state('sensor.hub_mode','Night') %}
icon: mdi:weather-night;
{% else %}
icon: mdi:home-export-outline;
{% endif %}
}
@vinzcenzo Hi Vincent,
Thank you for your example, that helped me very much! I am working on changing al my dashboards now. 
Hi, I’m going around in circles trying to apply this style, and so hoping someone can point me in the right direction.
I need to replace display: flex with display: block in the #root level shown below.
I have tried multiple ways of coding this, but nothing seems to work. Below is my current attempt that is applied within the card.
Thanks for any help/advice!
card_mod:
style:
ha-card:
div:
hui-vertical-stack-card:
$: |
div.root {
display: block !important;
}
so Ive adapted the original Watchman repo’s suggestion to:
- type: markdown
card_mod:
style: |
ha-card.type-markdown {
overflow-y: scroll;
height: 450px;
}
ha-markdown:
$: |
ha-markdown-element:first-of-type hr{
border-color: #303030;
}
content: >-
<h2> <ha-icon icon='mdi:shield-half-full'></ha-icon> Watchman report<h2>
<h3>Missing Entities: {{ states('sensor.watchman_missing_entities') }} </h3>
{%- for item in state_attr('sensor.watchman_missing_entities','entities') %}
<hr> <table><tr> <td>
<ha-icon icon='mdi:
{%- if item.state=='missing'-%}cloud-alert'
{%- elif item.state=='unavail' -%}cloud-off-outline' {%- else-%}cloud-question'
{%- endif -%} ></ha-icon>
{{ item.id }} [{{item.state}}] <a title='{{item.occurrences}}'>
{{item.occurrences.split('/')[-1].split(':')[0]}}</a>
</td></tr></table>
{%- endfor %}
but can not help but wonder if this card-mod should be written in a better way.
it colors alright and also scrolls just nicely (bit hard to see in this dark theme, but believe me it does):
would appreciate an extra eye on the mod please, thanks!
This is a wrong syntax.
Use:
card_mod:
style:
xxx $: |
yyy {
...
}
.: |
ha-card {
...
}
Wrong.
Instead of:
card_mod: null
style:
...
use
card_mod:
style:
...
The button card does not have this “#states div:nth-of-type(1)” element.
Probably you copy-pasted a code from another card.
The “--paper-item-icon-color: [[ if(lock.laundry_lock == "unlocked", "red", "green")]]” is not valid.
The “[[…]]” is not used for card-mod templates, use “{{ … }}” (also “{% … %}” if needed).
The “if(...)” construction is wrong. Probably you wanted to use “iif(...)” construction (BTW, some people do NOT recommend to use it since it may give inconsistent results - search here in the Community).
The “lock.laundry_lock == "unlocked"” is wrong - you should use “states("lock.laundry_lock") == on” (or “is_state("lock.laundry_lock","on")”).
Thank you. I will try again
Hi all, I’m kind of new to this whole customization thing.
I’m trying to get the fan icon of an entity card spinning, but with no luck.
What I managed to do is getting the fan spinning in an entities card with this:
type: entities
- entity: timer.dehumidifier
icon: mdi:fan
style:
hui-generic-entity-row:
$: |
state-badge {
{% if is_state('timer.dehumidifier', 'active') %}
color: gold;
animation: rotation 1.5s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
state_color: true
I suppose that I have to change “hui-generic-entity-row:” into something more suitable, but so far, I am unsuccessful. I’d be thankful if someone could give me a hint on how to achieve this (I’d take a solution, too ).
I am trying to animate an icon in the picture element card using card-mod, but am not seeming to be able to get it to work, does anyone see anything I may be overlooking in this?:
type: picture-elements
image: /hacsfiles/customassets/floorplan.svg
elements:
- type: state-icon
entity: switch.living_room_heater
icon: mdi:fan
tap_action:
action: more-info
double_tap_action:
action: toggle
style:
top: 37%
left: 15%
'--mdc-icon-size': 40px
'--paper-item-icon-active-color': '#f92aad'
card_mod:
style:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('switch.living_room_heater', 'on') %}
animation: rotation 2s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
thanks Ildar,
however, I must be doing it wrong still, because with that syntax:
- type: markdown
card_mod:
style: |
ha-markdown $: |
ha-markdown-element:first-of-type hr{
border-color: #303030;
}
.: |
ha-card.type-markdown {
overflow-y: scroll;
height: 450px;
}
the scroll no longer works.
wait
edit
- type: markdown
card_mod:
style:
ha-markdown $: |
ha-markdown-element:first-of-type hr{
border-color: #303030;
}
.: |
ha-card.type-markdown {
overflow-y: scroll;
height: 450px;
}
does work, had the | still on the style:
now need to understand why my first working syntax was wrong as you say, and this is correct.