ignore me, found an issue. it was | after style
1 Like
Another one - how do you apply styling to all cards in the Grid card vs. going one by one? e.g if you have a Grid of Mushroom Entity cards
You would have to have a standard style set in your theme yaml. But that will apply to all cards in your dashboard. Not just in that specific grid.
Otherwise you will have to go one by one.
hmmm… can you talk more about how to do it in theme.yaml? I am thinking that 99% of my cards have:
card_mod:
style: |
ha-card {
background: none;
border-width: 0;
}
So if I can have that and then just adapt for outlier cards within lovelace then it will simplify things drastically
My theme is super simple for now, planning to get to it a bit later:
Absolute:
# Global
primary-background-color: "#ffffff" # systemGray5 light mode
secondary-background-color: rgba(255, 255, 255, 0.9)
mdc-theme-surface: var(--primary-background-color)
Try and find this section:
card-mod-card-yaml: |
.: |
ha-card {
background: red;
}
And then do your styling in there. Should work 
Remember to reload your HA as theme changes dont take effect on a simple browser refresh.
1 Like
You can reload your themes when you do a change without an HA restart, there’s a service:
service: frontend.reload_themes
2 Likes
thank you. not so familiar with themes as i do all my styling in cards. so appreciate the input
1 Like
nothing happened… but this one worked through Themes.yaml:
ha-card-border-width: 0px
ha-card-border-color: transparent
Just gave you an example of where to put your card_mod styling. Not how to do it.
I am honestly not super familiar with editing themes.
now I have reverse challenge - cannot amend a couple of cards to show the border :)))
Try and use !important after what you have written. Tends to help for border styling
So something like:
border: 1px blue dashed !important;
1 Like
now this worked a charm - thanks! just need to choose a good color now
1 Like
Hi Dimitri
Badge Icon Styling. N/A Template Card does not have badge icons.
This is not correct. The template card do have a badge icon.
True! thank you for pointing that out. i will correct that soon
Thank you so much ! 
Hello everyone!
How can I combine ha-card modifications as well as mushroom shape icon modifications?
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2.5px outset green
}
I only manage to get ha-card working. However, I want to change the font size in ha-card (which worked flawlessly) as well as put a conditional border around the chip, e.g: If it is hotter than 30°C I want a red border.
The template and conditions I can try to figure out myself. I am struggling with modifying the border at all.
Thanks for your support =)
Use .: | to reset you back to style: | like this.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2.5px outset green
}
.: |
ha-card {
--color: blue;
}
3 Likes
Thank you for your incredibly fast reply!!
I cannot seem to make the border work. Even if I only put in the “mushroom-shape-icon” part, no border shows up.
Would you mind helping out one more time?
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.fitnessstudio
icon: mdi:dumbbell
content: >-
{{ states('sensor.fitnessstudio', with_unit=True,
rounded=true) }}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border: 2.5px outset green
}
Sure. As you can see from my chips section applying styles to a chip tends to be a bit trickier than normal cards. But you are in luck. For borders they are actually simpler than even the icon shape of a normal card 
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.fitnessstudio
icon: mdi:dumbbell
content: '{{ states(''sensor.fitnessstudio'', with_unit=True, rounded=true) }} '
card_mod:
style: |
ha-card {
border: 2.5px outset green !important;
}
Just put the card mod under the specific chip you want to style. Keep in mind that this does break the visual editor so you cant use that after adding these styles. So i would add all your chips first and then style them after
If you want to style something that isnt the chip itself (like the icon of the chip for example) you will need to go a bit deeper like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.fitnessstudio
icon: mdi:dumbbell
content: '{{ states(''sensor.fitnessstudio'', with_unit=True, rounded=true) }} '
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
color: red !important;
}
nth-child(1) being the chip number that the chip you are trying to style is. Note that i have written mushroom-template-chip this will need to change to whatever chip type you are styling instead.
If you have a conditional chip that shows another chip and you want to style the chip being shown by the condition you can do this:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: switch.office_screen_left
state: 'off'
chip:
type: template
entity: sensor.fitnessstudio
icon: mdi:dumbbell
content: '{{ states(''sensor.fitnessstudio'', with_unit=True, rounded=true) }} '
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
color: red !important;
}
That was super helpful. I was still struggling for a moment there because the border I set was at “custom:mushroom-chips-card” level and it was a rectangle without rounded corners. But when using card mod at “type: template” level it worked and has rounded corners, as intended.
Yay With your examples I can continue working on styling everything again. Thank you so much again! Do you have a link so I could buy you a beer/coffee?