It’s the title card or a template card. Browse the available cards, you will find most of what you need.
Hi All,
Hopefully looking for some help with the below, I’ve been looking over the past day at Rhys’ excellent code examples and I’m trying to build my own room card. I have the basics pretty much there but there are a few things I’d like to potentially change if anybody can advise how?
I’d like if possible to make the hallway text larger and maybe bold, I’d also like to change the colour of the temp and humidity text if possible? I have tried adding font-size under the .primary but it doesn’t seem to have any effect on the size.
Thanks
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Hallway
secondary: >-
{{ states('sensor.sonoff_a44001d0c1_temperature') | round (0) }} °C | {{
states('sensor.sonoff_a44001d0c1_humidity') | round (0) }} %
icon: mdi:tree
entity: light.hallway_lamp
tap_action:
action: toggle
hold_action:
action: navigation
navigation_path: hallway
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 4px 4px 3px rgba(var(--rgb-disabled), 0.8);
}
.: |
:host {
background: url('/local/images/hallway.PNG') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.4);
--mush-icon-size: 0px;
height: 220px;
margin-left: -15px !important;
margin-top: -70px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.front_door
state: 'on'
chip:
type: template
icon_color: grey
icon: mdi:door-open
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: lock.front_door
state: unlocked
chip:
type: template
icon_color: grey
icon: mdi:lock-open-variant
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -10px;
}
card_mod:
style: |
ha-card {
height: 180px;
width: 180px;
{% if is_state('light.hallway_lamp', 'on') %}
box-shadow: 0 0 10px rgba(245, 173, 66, 0.6);
#background: rgba(245, 173, 66, 0.1); {% endif %}
}
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
1 Like
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
Grid Card Code
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 
1 Like
its still on the left for me:
what i am doing wrong? 
Code
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
}
