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?
No i dont, and dont worry about it, a thanks is more than sufficient
FYI should now be fixed
Great work 
thank you so much for this. Would have saved me so much time had I had this a year ago. One struggle I have is that I use horizontal layout with the icon and the brightness or percentage control which collapses when not on so i can see the full name of the entity ie Bedroom. But when on the slider truncates it to Bed… or whatever. I can use vertical but that doesnt work with my overall layout, too high. Id rather have the name either in front over the top of the slider or right under neath it making the slider a little more narrow to accomodate the name in a smaller font.
Something like this:
type: custom:mushroom-light-card
entity: light.bedroom_main_light
show_brightness_control: true
layout: horizontal
use_light_color: true
show_color_control: false
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider {
height: 24px !important;
}
.: |
mushroom-state-info {
width: 200px !important;
}
mushroom-light-brightness-control {
position: absolute;
width: 230px !important;
height: 24px !important;
right: 10px !important;
top: 33px;
}
Or like this?
type: custom:mushroom-light-card
entity: light.bedroom_main_light
show_brightness_control: true
layout: horizontal
use_light_color: true
show_color_control: false
card_mod:
style: |
mushroom-state-info {
width: 200px !important;
z-index: 1;
}
mushroom-light-brightness-control {
position: absolute;
width: 230px !important;
right: 10px
}
Or maybe even something like this? (My favourite out of these 3)
EDIT: updated code below to make the friendly name of the entity dynamic with a template rather than user input. Can still be changed to a different name if you just write content: "Your Name Here"; instead of the template that is there currently.
type: custom:mushroom-light-card
entity: light.bedroom_main_light
show_brightness_control: true
layout: horizontal
use_light_color: true
show_color_control: false
name: ' '
card_mod:
style: |
mushroom-light-brightness-control {
position: absolute;
width: 280px !important;
height: 20px;
right: 10px
}
mushroom-light-brightness-control:after {
content: "{{state_attr(config.entity,'friendly_name')}}";
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: var(--card-primary-text-color);
font-weight: bolder;
top: -29px;
right: 0px;
width: 120px;
height: 16px;
font-size: 12px;
pointer-events: none;
}
Ty Ty Ty. I love the 3rd one. You read my mind. Only issue is when turned off there is no name. If i add a name: then it shows twice wehn its turned on, in the brightess control and behind it.
on a smaller screen like my phone it doesnt matter because the brightness slider covers it all
How about this?
disregard that my light changed color, i have adaptive lighting turned on for that light
type: custom:mushroom-light-card
entity: light.bedroom_main_light
show_brightness_control: true
layout: horizontal
use_light_color: true
show_color_control: false
name: ' '
collapsible_controls: true
card_mod:
style: |
mushroom-light-brightness-control {
position: absolute;
width: 65% !important;
height: 20px;
right: 10px
}
mushroom-light-brightness-control:after {
content: "{{state_attr(config.entity,'friendly_name')}}";
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: var(--card-primary-text-color);
font-weight: bolder;
top: -29px;
right: 1%;
width: 65%;
height: 16px;
font-size: 14px;
pointer-events: none;
}
{% if states(config.entity) == 'off' %}
mushroom-state-info:before {
content: "{{state_attr(config.entity,'friendly_name')}}";
font-size: 14px;
color: var(--card-primary-text-color);
font-weight: bolder;
}
{% else %}
{% endif %}
of course feel free to adjust the text color in the slider to make it more visible, i only use that var because then it works on both light and dark mode technically.
again thanks. just the brightness control does not adapt to different sizes, ie if i have 2 cards in a 2 column grid the brightness control is longer than the card.
just updated the code to use %'s instead of px’s try and use that. there is always going to be scaling issues though as you scale the card down
perfecto. you win the coolest dude on the internet today
How would I change the font size for chips? It certainly doesn’t respond to
--card-primary-font-size: 30px;
Check the text styling section of the chip guide.
Ugh, how did I miss that??? Thank you!
I’d like to increase the entire icon size for the template cards. They are too small to be readable on my hub. However, the CSS listed in post #13 for template cards doesn’t seem to work. What am I missing?
For reference, this is what it looks like right now, and I’d like the icons to be readable from at least a couple feet away.
Definitely should work.
card_mod:
style: |
/* changes size of icon itself */
ha-state-icon {
--icon-symbol-size: 80px;
}
/* changes background size */
mushroom-shape-icon {
--icon-size: 100px;
}
Hi!
I have modded the follow code, but i don’t understand when am i wrong. I am not skilled in HA…
Someone help me?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
primary: Trash
card_mod:
style: |
mushroom-shape-icon$: |
ha-icon {
clip-path: inset(26% 0 0 0);
}
- type: custom:mushroom-template-card
icon: mdi:trash-can
icon_color: green
card_mod:
style: |
mushroom-shape-icon$: |
ha-icon {
--icon-animation: lid 1s ease infinite;
clip-path: inset(0 0 75% 0);
transform-origin: 50% 25%;
}
@keyframes lid {
0%, 50%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-5px) rotate(-37deg); }
20% { transform: translateY(-5px) rotate(31deg); }
30% { transform: translateY(-5px) rotate(-25deg); }
40% { transform: translateY(-5px) rotate(19deg); }
60% { transform: translateY(-3px); }
}
.shape {
--shape-color: none;
top: 0.3px;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
Please dont crosspost. I already answered your question in the mushroom thread.
Hi, I have edit the code, but it is wrong and I don’t understand what I must change for the correct execution.
I’am sorry.