Thanks so much for your help and patience. You were right. I changed the two colors below in my custom themeā¦ that did the trickā¦
card-background-color: rgba(28, 28, 28, .9) #<-- directly affected the drop-down menu background color.
ha-card-background: rgba(115, 115, 115, 0.1)
Is there a way to use card-mod for text-divider-row?
The text below is what I have so far. Iām not very familiar with CSS and the variables to use for different cards.
type: custom:text-divider-row
text: Smoke and CO Detectors
card_mod:
style: |
:host {
--text-divider-font-size: 28px !important;
}
Thanks!
So, looking at the page source for that page, it is Javascript returning the data. Not an html table. I donāt believe you can do that.
It has been years since I had to deal with this. I am sure someone will correct me if something has changed.
Hi,
Is anyone aware if itās possible to add a gradient fill to a Statistics Graph Card?
Itās possible to change the color of the graph by using this:
card_mod:
style: |
ha-card {
--graph-color-1: #5F03F2;
--graph-color-2: #1CE222;
--graph-color-3: #FF9E13;
}
But is there any way to add a gradient fill for the graphs itself?
No any possible way)))
Starting point:
1st post - link at the bottom - text-divider-row
Thanks a lot for the great examples and documentation. Iām really happy with my ācompactā energy-distribution card and stack:
(Left the apex chart out of the code below)
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 60% 40%
margin: 0px 0px 0px 0px
cards:
- type: energy-distribution
link_dashboard: false
card_mod:
style: |
ha-card {
height: 375px;
}
.spacer {
display: none;
}
.row {
justify-content: center !important;
}
.circle-container.solar {
display: flex;
position: absolute;
top: 10px
}
.circle-container.grid {
display: flex;
position: absolute;
top: 145px;
left: 18px;
}
.circle-container.grid span.label {
display: flex !important;
position: relative !important;
top: -100px;
}
.lines.high {
display: flex;
position: absolute;
top: 110px;
}
.circle-container.home {
display: flex;
position: absolute;
top: 145px;
right: 18px;
}
.circle-container.gas {
display: flex;
position: absolute;
top: 235px;
left: 14px;
}
.circle-container.gas span.label {
display: flex !important;
position: relative !important;
top: 100px;
}
.circle-container.water {
display: flex !important;
position: absolute !important;
top: 255px !important;
right: 14px;
}
.circle-container.gas svg {
display: none;
}
.circle-container.water svg {
display: none;
}
- type: vertical-stack
cards:
- type: energy-grid-neutrality-gauge
card_mod:
style: |
.name {
overflow: hidden;
max-width: 0ch;
white-space: nowrap;
}
- type: custom:mod-card
card:
type: markdown
content: Net grid
card_mod:
style: |
ha-card {
background: none;
}
ha-markdown {
padding: 0px !important;
display: flex;
justify-content: center;
}
card_mod:
style: |
:host {
top: -35px;
position: relative;
height: 0px !important;
margin: 0px !important;
}
- type: energy-solar-consumed-gauge
card_mod:
style: |
.name {
overflow: hidden;
max-width: 0ch;
white-space: nowrap;
}
- type: custom:mod-card
card:
type: markdown
content: Solar-consumed
card_mod:
style: |
ha-card {
background: none;
}
ha-markdown {
padding: 0px !important;
display: flex;
justify-content: center;
}
card_mod:
style: |
:host {
top: -35px;
position: relative;
height: 0px !important;
margin: 0px !important;
}
- type: energy-self-sufficiency-gauge
card_mod:
style: |
.name {
overflow: hidden;
max-width: 0ch;
white-space: nowrap;
}
- type: custom:mod-card
card:
type: markdown
content: Self-suffiency
card_mod:
style: |
ha-card {
background: none;
}
ha-markdown {
padding: 0px !important;
display: flex;
justify-content: center;
}
card_mod:
style: |
:host {
top: -35px;
position: relative;
height: 0px !important;
}
looks very cool. thanks for sharing.
stolen some code from you here but i am not able to put the energy lines and the āHomeā to their place.
What could be wrong with my code?
thanks in advance
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 65% 36%
margin: 0px px px 0px
cards:
- type: energy-distribution
link_dashboard: false
card_mod:
style: |
ha-card {
height: 375px;
}
.spacer {
display: none;
}
.row {
justify-content: center !important;
}
.circle-container.solar {
display: flex;
position: absolute;
top: 10px
}
.circle-container.grid {
display: flex;
position: absolute;
top: 145px;
left: 18px;
}
.circle-container.grid span.label {
display: flex !important;
position: relative !important;
top: -100px;
}
.lines.high {
display: flex;
position: absolute;
top: 110px;
}
.circle-container.home {
display: flex;
position: absolute;
top: 145px;
right: 18px;
}
- type: vertical-stack
cards:
- type: energy-grid-neutrality-gauge
card_mod:
style: |
.name {
overflow: hidden;
max-width: 0ch;
white-space: nowrap;
}
- type: custom:mod-card
card:
type: markdown
content: Net grid
card_mod:
style: |
ha-card {
background: none;
}
ha-markdown {
padding: 0px !important;
display: flex;
justify-content: center;
}
card_mod:
style: |
:host {
top: -35px;
position: relative;
height: 0px !important;
margin: 0px !important;
}
- type: energy-solar-consumed-gauge
card_mod:
style: |
.name {
overflow: hidden;
max-width: 0ch;
white-space: nowrap;
}
- type: custom:mod-card
card:
type: markdown
content: Solar-consumed
card_mod:
style: |
ha-card {
background: none;
}
ha-markdown {
padding: 0px !important;
display: flex;
justify-content: center;
}
card_mod:
style: |
:host {
top: -35px;
position: relative;
height: 0px !important;
margin: 0px !important;
}
- type: energy-self-sufficiency-gauge
card_mod:
style: |
.name {
overflow: hidden;
max-width: 0ch;
white-space: nowrap;
}
- type: custom:mod-card
card:
type: markdown
content: Self-suffiency
card_mod:
style: |
ha-card {
background: none;
}
ha-markdown {
padding: 0px !important;
display: flex;
justify-content: center;
}
card_mod:
style: |
:host {
top: -35px;
position: relative;
height: 0px !important;
}
I see you are using a nested vertical-stack, perhaps this gets in the way. Otherwise, try to suffix !important
iāve copied(copy/paste) the exact code shared by you but no positive effect.
Removed also the ā!Importanceā option from code.
The view settings were changed from Masonry to Grid/vertical/horizontal layout but same effect.
Sadly as i liked it much and wanted on my dashboard.
What I meant is that you have (1 extra ālevelā of vertical-stack):
type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:layout-card
...
While I have:
type: vertical-stack
cards:
- type: custom:layout-card
...
Second, I actually meant to suffix !important to the .lines.high class, like:
.lines.high {
display: flex !important;
position: absolute !important;
top: 110px !important;
}
You could try whether you need !important for all attributes or not. Otherwise Iām not sure whether I can help you 
iāve took the exact code from original post and checked that i have exactly begininning code mentioned by you above but no luck 
nevertheless, thanks for work and sharing! 
Hi,
Iām trying to set the mushroom template card border radius to 40px.
I have this card (which is animated so that the āFanā image spins when the state is ON and it stops when the state is OFF):
type: custom:mushroom-template-card
primary: Fan
secondary: |-
{% if states(config.entity)=='on' %}
On
{% else %}
Off
{% endif %}
icon: ''
icon_color: ''
entity: switch.fan
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
badge_color: ''
badge_icon: ''
picture: |-
{% if states(config.entity)=='on' %}
/local/Custom_Icons/Mushroom/V0/FAN_ON.png
{% else %}
/local/Custom_Icons/Mushroom/V0/FAN_OFF.png
{% endif %}
card_mod:
style:
mushroom-shape-avatar$: |
img {
{% if states(config.entity)=='on' %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
And I have this piece of code which Iām using in all other mushroom template cards and itās working:
ha-card {
border-radius: 40px;
}
This is how the card is at the moment:
This is how all my other cards look and what I would like it to be:
Please help me merge the two pieces of code so that the āFanā card borders are rounded.
Thank-you
First post, link at the bottom, link to topic " Combining ā$:ā styles and ānot $:ā styles"
It works! (I know it shouldnāt be a surprise but for someone who canāt code like me itās an achievement 
)
card_mod:
style:
mushroom-shape-avatar$: |
img {
{% if states(config.entity)=='on' %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.: |
ha-card {
border-radius: 40px;
}
Thank you!
U are welcome. And esp. such achievements without giving the final solution directly will help you in the future. 
Example for customizing a color printer card:
posted here
Actually, this is an example of adding an outline for an icon, like here:
havent really done much in the way of CSS modding before now but think ive found someting that my use case might require it
The new Tile Alarm card has a number of baked-in modesā¦of which I am using Home, Away, Custom (night) and Disarmed
it currently looks like this by default
Iād like to change the colour and icon on a couple of statesā¦so right now when Home is set it is green, and that is all goodā¦but the image above is showing in night mode which Iād like in blue with a crescent moon icon on the sheil.
Away/Armed is the correct icon but Id like to change it to redā¦
Is this even something I can do with CSSā¦Iām thinking yes, but Iād be guessing at how Iād even get that done.
Did manage to change the background colour pretty easily but to impact individual elements of a card seems to be a bit more complexā¦happy to read up and play if someone can point me in the right directionā¦TIA
Hi all, Iām trying to stylize the person badgesā¦
I want to colorize the badges depending on state (home, away, etc) like example 1 (left one), with the badge container border in color (lime = home, orange = away, etc), but the best I can do is like example 2 (right one), gray container border, only the circular border with color. Donāt know how integrate āha-label-badge:ā into the āifā states.
Here is my code of example 1 and 2 , any help is appreciated. Thx!
- entity: person.lainol
name: Lainol
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge {
border-color: lime;
background-color: 1c1c1c;
}
.badge-container .label-badge .value {
color: lime;
}
.badge-container .label-badge .label span {
border-style: solid;
border-color: lime;
color: white;
background-color: #1c1c1c;
}
.badge-container .title {
color: white;
}
- entity: person.lainol
name: Lainol
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .label span {
border-style: solid;
border-color: gray;
background-color: #1c1c1c;
}
.: |
:host {
{% if is_state('person.lainol','home') %} --label-badge-red: lime;
{% else %} --label-badge-red: red;
{% endif %}
}
Why do you put it here?
It is misplaced.
Use examples from ā1st post ā link at the bottom ā badgesā as a starting point.
When you build a proper DOM path - then you will see how to āintegrate āha-label-badge:ā into the āifā statesā.