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.
1 Like
# 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. 
1 Like
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 {
...
}
1 Like
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.
“wrong” - because it does not work (although a similar syntax does work in some places), check issues about markdown in card-mod Github. A bug probably…
referring to this ? (only open on markdown) Styles in Shadow-DOM are applied inconsistent · Issue #226 · thomasloven/lovelace-card-mod · GitHub
my card-mod Did work, so thats why I asked for a syntax check only here. I wasnt experiencing an issue at all…
anyways, if this is the better syntax, Ill leave it like that.
thanks again
there were at least 2-3 similar issues with the same syntax.
Some of them closed after a fix I proposed to you.
Try like 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 {
{% if is_state(config.entity, 'on') %}
animation: rotation 2s linear infinite;
{% endif %}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
1 Like
1st post - link at the bottom
1 Like
Hi, anyone can help me out here?
This works:
style:
hui-horizontal-stack-card $: |
div#root > :first-child {
width: 75%;
flex: auto;
}
div#root > :last-child {
width: 25%;
flex: auto;
}
This works too:
style: |
ha-card {
border-width: 0px;
}
But how to I combine both?
Perfect, thank you so much
1 Like