I have been trying to stylize the input select ( I’m using the custom:mushroom-select-card) without any luck, I want to make it look a bit better by rounding the corners, setting a different color for the arrow and maybe removing the gray background.
Can anyone help me out with this? You can see on the left one of my attempts to figure out the CSS selectors, but nothing works.
I dont like posting this over and over because it feels like i am advertising, but perfect example of something that is covered with my guide here:
It might not cover everything you mentioned, but it will certainly put you in the right direction 
@GTunney also applies to your question
Thanks I have tried to apply different styling options but it ignores anything I try to do with the font size or colour.
Not true. Look at my examples .
Thank you very much for that, but i cant seems to find what I need to change, I’m able to figure out the border around the input select, but I cant change the input select itself. i have dotted the border for you to understand what I mean, check the picture
The input select stays over the border. i want the input select to be rounded and it’s background to be white. Do you know how to achieve this?
Select Card Guide and Selection Value Section:
So:
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$: |
.mdc-select__anchor{
background: white !important
border-radius: 20px !important;
}
Just careful with setting it to white because on dark theme the text then wont be visible
And if you also wanted to change the color of the dropdown icon:
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$: |
.mdc-select__anchor{
background: white !important;
border-radius: 12px !important;
}
.mdc-select__dropdown-icon {
fill: red !important
}
That worked!! Thank you so much!!! Much appreciated.
Btw: do you know what that black line at the bottom of the selectors is? I want to get rid of that
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$: |
.mdc-select__anchor{
background: white !important;
border-radius: 12px !important;
}
.mdc-select__dropdown-icon {
fill: red !important
}
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
You’re amazing! Thank you very much!
Apologies I had some formatting wrong, I’ve changed it over and it’s now working.
Thanks very much for your help.
thats an really awesome guide! thanks a lot. 
to bad its very confusing to find information like that since its all over the thread. it should be pinned somewhere. 
–
i still have the problem that the card is aligned to the left:
i’d like to create a stack-in-card and use the mushroom icons as buttons. i’d like to archive that it looks like the default buttons of the cover card, but they are all not centered:
[TOP]: default cover card with buttons / [BOTTOM] Grid card with mushroom icons
square: false
type: grid
columns: 3
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:arrow-up-bold
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: fit-content;
background: none;
border: 1 !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:pause
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:arrow-down-bold
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:blinds-horizontal
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:sun-thermometer-outline
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:blinds-horizontal-closed
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
}
i tried “align-items: center;” for ha-card but this doesn’t work. any idea whats the problem?
is there also a way to get the hover effect when putting the mouse arrow over a card like with the default tile cards?
this should center the entire thing no matter what you set the width of the card to.
mushroom-state-item {
display: grid;
justify-items: center !important;
}
you can add a hover effect, but it certainly wont be as fancy as the tile card. the tile card has a ripple built in, the mushroom card does not.
full example:
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: 100px;
height: 40px !important;
background: none;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
}
ha-card:hover {
background: red !important;
}
mushroom-state-item {
display: grid;
justify-items: center !important;
}
but you are right. i have updated the guide to include an index with links to each post 
its still on the left for me:
what i am doing wrong? 
type: custom:mushroom-template-card
entity: ''
primary_info: none
secondary_info: none
icon: mdi:test-tube
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: 100px;
height: 40px !important;
background: none;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
}
ha-card:hover {
background: red !important;
}
mushroom-state-item {
display: grid;
justify-items: center !important;
}
Nothing wrong. but sorry i just assumed you meant you wanted to center the contents of the card not the card itself on the view.
easiest way to center a single card would be to just add margin. but i think what you want is each card centered neatly inside of the grid card. without starting to use something like the mod card its really difficult to try and do, so i would just replicate the buttons like this with sizing them right:
type: grid
square: false
cards:
- type: custom:mushroom-template-card
primary: null
secondary: null
icon: mdi:home
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: 120px;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
left: 8px;
}
ha-card:hover {
background: red !important;
}
mushroom-state-item {
display: grid;
justify-items: center !important;
}
- type: custom:mushroom-template-card
primary: null
secondary: null
icon: mdi:home
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: 120px;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
left: 4px;
}
ha-card:hover {
background: red !important;
}
mushroom-state-item {
display: grid;
justify-items: center !important;
}
- type: custom:mushroom-template-card
primary: null
secondary: null
icon: mdi:home
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
width: 120px;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
mushroom-state-item {
display: grid;
justify-items: center !important;
}
i tried it and it looked good:
but when i viewed it from mobile things got messy (even when i used % instead of px):
wouldnt it be better to style the icon-shape as a button instead of the ha-card?
actually probably better to just use Chips instead. then you can set the chip container to justify content and they will work on different screen sizes
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:home
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:arrow-up
card_mod:
style: |
ha-card {
width: 118px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
- type: template
icon: mdi:square
card_mod:
style: |
ha-card {
width: 118px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
- type: template
icon: mdi:arrow-down
card_mod:
style: |
ha-card {
width: 118px !important;
height: 40px !important;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
alignment: justify
card_mod:
style:
mushroom-template-chip:nth-child(1)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(2)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
mushroom-template-chip:nth-child(3)$:
mushroom-chip$: |
ha-card {
display: grid !important;
justify-items: center !important;
}
.: |
ha-card {
padding: 0px 10px 10px 10px
}
thanks, but somehow it looks different at my side and spacing is very strange.
will this even work on different screen sizes if the ha-card with and height is defined as pixels?
You are right. i was just saying that using the chip card as a base will ensure it works on all screen sizes. but you still need to figure out how to size the width chips themselves dynamically. the height being set shouldnt matter at all.
i found that this code works courtesy of @eMeF
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:home
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:arrow-up
card_mod:
style: |
ha-card {
justify-content: center;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
- type: template
icon: mdi:square
card_mod:
style: |
ha-card {
justify-content: center;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
- type: template
icon: mdi:arrow-down
card_mod:
style: |
ha-card {
justify-content: center;
border: 1 !important;
box-shadow: none !important;
transition: 1s;
border-radius: 10px !important;
background: rgba(var(--rgb-disabled), 0.2) !important;
}
ha-card:hover {
background: red !important;
}
alignment: justify
card_mod:
style: |
mushroom-template-chip {
width: 100%;
}
div.chip-container {
justify-content: space-evenly;
flex-wrap: nowrap;
}
ha-card {
margin: 0px 12px 12px;
--chip-spacing: 12px !important;
}
Hello!
I have just updated to the latest version. But now my navigation bar is up top instead of at the bottom.
Can someone help me with what I should write in the theme file to move it back down again?