Is it possible to have for the fan card
To have fan direction button?
Really would love that
Instead of oscilate…
Thank You…
I am trying to create a template card but I need to style both the card dimensions and icon/shape sizes. When putting both in separately it works but when combining the 2 parameters into the same card one of them just stops working. It seems like one of the parameters requires a vertical line after style: and one does not. How can I fix this? (I put large numbers in the icons size area to show that it was not changing anything.
Thanks!
type: custom:mushroom-template-card
primary: ALL OFF
secondary: ''
icon: mdi:lightbulb-group
card_mod:
style: |
mushroom-shape-icon$: |
.shape {
--icon-symbol-size 10000px;
--icon-size: 25000px;
}
ha-card {
height: 50px !important;
width: 150px;
}
@dimitri.landerloos whoever you are, wherever you are, can I just say you are an amazing human being for putting this guide together.
I am literally a nobody wannabe novice not-even-a-coder but just dinking around with Home Assistant so I can look cool and show off to my friends, and I am infinitely better at it by being able to refer back to this guide and insert lines of code that I would otherwise never have been able to figure out - making my dashboard look amazing, even to me.
I will, of course, brag and claim I knew all this coding all along. I mean, what else is a dashboard for after all, really? 
JK sorta. Not one of us is actually going to save any time with the automations and dashboard we create, by getting to use it vs. the time we spent creating it lol So it isn’t for any efficiency purposes… so…
But for the record, its all you buddy. This guide is fantastic, can’t say it enough. Merci!
P.S. Can you make some more of these guides? Like maybe one for Node Red or something that I can’t figure out even after watching several very long and boring tutorial videos Or even just a guide that explains what Node Red actually is…
…Or just keep at this guide here, it’s still great!
2 Likes
Should the Vacuum card, border coding info you provided have a semi-colon after “blue”?
card_mod:
style: |
ha-card {
border: 2.5px outset blue
}
refer to the top 1st post of the guide.
What the $ and .: | symbols do
if after reading that you still need some assistant we can go from there
2 Likes
on its own, no.
if there was another line of code bellow then, yes
You cannot modify the function of an existing button (other than the regular tap actions) with either mushroom directly or with card mod.
you would need to create a fork of the mushroom cards and modify the code yourself.
@dimitri.landerloos or anyone who has a moment to spare, I have come across something I can’t find a solution for in this manual… strangely.
So when I use this code:
- type: custom:mushroom-vacuum-card
entity: vacuum.roborock_q5_pro
name:
layout: vertical
icon_animation: false
fill_container: false
commands:
- on_off
- start_pause
- stop
- locate
- clean_spot
- return_home
style:
left: 70%
top: 90%
width: 30%
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: #780000;
--card-secondary-color: white;
--card-secondary-font-size: 12px;
--card-primary-font-size: 16px;
flex-direction: row !important;
align-items: baseline;
gap: 8px;
margin-top: -10px;
}
mushroom-vacuum-commands-control$:
mushroom-button:nth-child(1)$: |
.button ::slotted(*) {
--card-mod-icon-color: rgba(255,255,255,1);
}
.button {
--bg-color: #780000;
}
mushroom-button:nth-child(2)$: |
.button ::slotted(*) {
--card-mod-icon-color: rgba(1,1,1,1);
}
.button {
--bg-color: white;
}
mushroom-button:nth-child(3)$: |
.button ::slotted(*) {
--card-mod-icon-color: rgba(1,1,1,1);
}
.button {
--bg-color: white;
}
mushroom-button:nth-child(4)$: |
.button ::slotted(*) {
--card-mod-icon-color: rgba(1,1,1,1);
}
.button {
--bg-color: white;
}
mushroom-button:nth-child(5)$: |
.button ::slotted(*) {
--card-mod-icon-color: rgba(1,1,1,1);
}
.button {
--bg-color: white;
}
mushroom-shape-icon$: |
.shape {
shape-color: rgba(255,255,255,0); !important;
box-shadow: 0px 0px 0px 0px rgba(255,255,255,0) !important;
icon-symbol-size: 0px;
icon-size: 0px;
padding-bottom: 50px;
padding-top: 50px;
margin-top: 35px;
margin-bottom: 35px;
}
.: |
ha-card {
background-color: rgba(1,1,1,.6);
font-variant: small-caps;
border: 1.35px solid white;
border-radius: 6px;
padding-bottom: -10px;
padding-top: -10px;
}
ha-state-icon {
color: white;
--icon-symbol-size: 55px;
padding-bottom: -50px;
height: 0px;
margin-top: -65px;
margin-bottom: -05px;
}
I get:
The secondary text colour and the icon colour are both set to white in the coding, and primary text colour (card colour) is set to a red colour from your manual.
When I change the background though, from entirely opaque (rgba 255, 255, 255,0) to the semi-transparent black (rgba 1,1,1,0.6), the container appears to be overtop of the text, changing the white text to appear grey, and the red text to appear very dark (black), the icon as well went from white to grey.
Is there a way to put the ha card container behind the text like it normally is with other cards I believe? I tried changing the coding so the ha-card and icon coding went above the container coding (not sure if that is actually a thing to do, but it seemed worth trying), but it didn’t do anything.
Would anyone have a moment to explain to me what I have done wrong, or if it is a glitch in the card that can or can’t be worked around?
Thanks so much in advance!
EDIT: Sorry, I should add, this only happens when it is on the Swipe card. When it is on the main picture elements card, in the same position on the page, the text does not change colours ,so it shouldn’t have anything to do with the transparency of the background of the mushroom card.
Okay, I re-read the documentation thoroughly, regarding what the $ and .: | symbols do. I am new to this so I don’t fully understand. When I delete the first pipe ( | ) I get an error with the card sizing and margin adjustment. When I take the card sizing and margin adjustment parameters out, the icon adjustment then works. I am still not understanding. Thank you for the response.
Thank You for Clarifying Dimitri!
I fixed your code but didn’t realise you had an extreme icon size lol made my whole dashboard go grey couldn’t workout what was wrong lol… anyway this is the correct way from the guide. as you have read it along with this code maybe you have a better understanding.
type: custom:mushroom-template-card
primary: ALL OFF
secondary: ''
icon: mdi:lightbulb-group
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size 10px;
--icon-size: 25px;
}
.: |
ha-card {
height: 50px !important;
width: 150px;
}
2 Likes
Oh my gosh, I’m so sorry about the icon size! I didn’t realize it would be that large ! Thank you so much for rewriting my code, I did not expect that. I think I now have a better understanding of how it works. My problem was formatting the characters in the right places. Also, I didn’t understand that the .: and | went together. I sincerely thank you again for going out of the way and helping me. Have a great day Frosty!
1 Like
In the main part of the instructions, it says the below. Is this missing an image, or is the image supposed to be the black background?
an image is being displayed, it is just dark as it happened that the album cover was quite dark. plus overlay makes it darker when using a dark card background (like when in dark mode).
here is a better example from the media card i actually use:
2 Likes
I tried following the guide on the fan card, specifically changing the slider, I have encountered two issues, no matter what I was trying with the slider and the inspection I did within developer tools of my browser the slider color won’t change, with the help of chatgpt and Claude I’ve managed to change the icon shape color and icon color though. Second issue are the custom sliders I’ve created, the background color doesn’t appear most of the time unless I use the actual slider.
here is my code, I would appreciate any kind of help
type: vertical-stack
in_card: true
cards:
- type: custom:mushroom-fan-card
entity: fan.xiaomi_smart_fan
name: Smart Fan
icon_animation: true
fill_container: true
show_percentage_control: true
show_oscillate_control: false
double_tap_action:
action: none
hold_action:
action: more-info
collapsible_controls: false
layout: horizontal
card_mod:
style: |
ha-state-icon {
color: white !important;
}
mushroom-shape-icon {
--shape-color: rgb(160,196,233) !important;
}
"mushroom-card .actions mushroom-fan-percentage-control$": |
mushroom-slider {
--main-color: red !important;
--bg-color: #d1eced !important;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
- type: horizontal-stack
cards:
- type: custom:button-card
entity: script.ventilator_links
icon: mdi:arrow-left-bold
styles:
icon:
- height: 22pt
- width: 22pt
- color: white
img_cell:
- width: 26pt
- height: 26pt
- background: rgb(160,196,233)
- border-radius: 103px
card:
- background: transparent
- border: transparent
- height: 50px
- margin-top: 5px
show_icon: true
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.ventilator_links
- type: custom:button-card
entity: script.ventilator_rechts
icon: mdi:arrow-right-bold
styles:
icon:
- height: 22pt
- width: 22pt
- color: white
img_cell:
- width: 26pt
- height: 26pt
- background: rgb(160,196,233)
- border-radius: 103px
card:
- background: transparent
- border: transparent
- height: 50px
- margin-top: 5px
show_icon: true
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.ventilator_rechts
- type: custom:button-card
entity: fan.xiaomi_smart_fan
icon: mdi:arrow-left-right
styles:
icon:
- height: 22pt
- width: 22pt
- color: white
img_cell:
- width: 26pt
- height: 26pt
- background: rgb(160,196,233)
- border-radius: 103px
card:
- background: transparent
- border: transparent
- height: 50px
- margin-top: 5px
show_icon: true
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.ventilator_links
- type: custom:button-card
entity: input_boolean.toggle_natural_mode
icon: mdi:leaf
styles:
icon:
- height: 18pt
- width: 18pt
- color: white
img_cell:
- width: 26pt
- height: 26pt
- background: rgb(160,196,233)
- border-radius: 100px
card:
- background: transparent
- border: transparent
- height: 50px
- margin-top: 5px
show_icon: true
show_name: false
tap_action:
action: toggle
state:
- value: 'on'
styles:
icon:
- color: white
- value: 'off'
styles:
icon:
- color: '#898C94'
- type: custom:bubble-card
card_type: separator
- type: horizontal-stack
card_mod:
style: |
:host {
justify-content: flex-end;
}
cards:
- type: custom:button-card
entity: input_number.ventilator_winkel
icon: mdi:arrow-left-right
layout: icon_state
show_state: true
show_icon: true
name: ' '
styles:
icon:
- height: 22pt
- width: 22pt
- color: white
img_cell:
- width: 26pt
- height: 26pt
- background: rgb(160,196,233)
- margin-left: 30%
- border-radius: 100px
state:
- margin-left: 40%
card:
- width: 81pt
- height: 40px
- background: none
- type: custom:my-slider-v2
entity: input_number.ventilator_winkel
styles:
container:
- border-radius: 100px
- overflow: visible
card:
- height: 40px
- padding: 0
- width: 170px
- background: white
- right: '-120px'
- border-radius: 10px
track:
- overflow: visible
- background: none
progress:
- background: rgb(160,196,233)
- left: '-0px'
- border-radius: 10px
thumb:
- background: none
- top: 10px
- right: '-1px'
- width: 7px
- height: 20px
- border-radius: 7px
- type: horizontal-stack
card_mod:
style: |
:host {
justify-content: flex-end;
}
cards:
- type: custom:button-card
entity: input_number.ventilator_timer
icon: mdi:timer-outline
layout: icon_state
show_state: true
show_icon: true
name: ' '
styles:
icon:
- height: 21pt
- width: 21pt
- color: white
img_cell:
- width: 26pt
- height: 26pt
- background: rgb(160,196,233)
- margin-left: 30%
- border-radius: 100px
state:
- margin-left: 15%
card:
- width: 81pt
- height: 40px
- background: none
- type: custom:my-slider-v2
entity: input_number.ventilator_timer
label: Fan
icon: mdi:fan
styles:
container:
- border-radius: 100px
- overflow: visible
card:
- height: 40px
- padding: 0 0px
- width: 170px
- background: white
- right: '-120px'
- border-radius: 10px
- margin-bottom: 10px
track:
- overflow: visible
- background: none
progress:
- background: rgb(160,196,233)
- left: '-0px'
- border-radius: 10px
thumb:
- background: none
- top: 10px
- right: '-1px'
- width: 7px
- height: 20px
- border-radius: 7px
Under the Vacuum card, you wrote:
Changes the radius of the corners. this is set to 0. so sharp corners.
card_mod:
style: |
ha-card {
border-radius: 0px;
}
Are there supposed to be those extra spaces before “border-radius: 0px;”? I’m having a really hard time following some of these instructions because the results I am getting isn’t what I’m seeing on here. I’ve heard people mention about breaking the card, and I wonder if I’ve done that. How would I know?
No, there are not meant to be 2 spaces. will remove. spotted them in a few more entries too now actually. but it shouldnt make a difference to how the code is applied. it will work just the same.
not sure what you mean by breaking? you shouldnt really be able to do that with just card mod. you might be adding too much card mod to your dashboard, but it would just start to run slow.
2 Likes
Take a look at the section in the first post about what .: | and $ do.
but here is how it should be:
type: custom:mushroom-fan-card
entity: fan.xiaomi_smart_fan
name: Smart Fan
icon_animation: true
fill_container: true
show_percentage_control: true
show_oscillate_control: false
double_tap_action:
action: none
hold_action:
action: more-info
collapsible_controls: false
layout: horizontal
card_mod:
style:
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: red !important;
--bg-color: #d1eced !important;
}
.: |
ha-state-icon {
color: white !important;
}
mushroom-shape-icon {
--shape-color: rgb(160,196,233) !important;
}
Funny you said that, I was just reading through that section now. When I came across this manual, I skipped to the sections that I was working on but I didn’t really have a good grasp of the $ and .
symbols, I was just copying and pasting code I found elsewhere. But I’ve just been reading through what you wrote here on this, super helpful! Thanks again for all this work! This must have taken you a long time.