Ahh, very nice (and intuitive, if I had just thought a bit longer 
) Thanks!
1 Like
I was able to figure out the Mushroom Alarm Card
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.ha_alarm
states:
- armed_home
- armed_away
- armed_night
card_mod:
style:
mushroom-button:nth-child(1):
$: |
.button {
--bg-color: orange !important;
--icon-color: blue !important;
}
mushroom-button:nth-child(2):
$: |
.button {
--bg-color: red !important;
--icon-color: white !important;
}
mushroom-button:nth-child(3):
$: |
.button {
--bg-color: grey !important;
--icon-color: yellow !important;
}
Yes it will work with a chips card. This will force pretty much any card to the bottom of the screen.
position: fixed;
bottom: 3px;
full card code
type: custom:mod-card
card_mod:
style: |
ha-card {
background: transparent;
position: fixed;
bottom: 3px;
z-index: 1;
width: calc(100% - 100px);
padding: 8px ;
left: 100px;
border: none;
}
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: navigate
navigation_path: ''
icon: mdi:home
content: test1
- type: template
tap_action:
action: navigate
navigation_path: ''
icon: mdi:bed
content: test2
- type: template
icon: mdi:human-baby-changing-table
content: test3
It’s not related to the previous question or the grid layout code you have posted.
Just a the regular mushroom Chip card with a secondary text line beneath the primary text.
Hello Community! Can somebody help me out… i want to increase the text size of a sensor card in mushroom… i cant figure it out what I’m doing wrong, size of sensor text is not increasing… i highlighted the card mod that im using… any help is appreciated.
The code you have is showing standard HA sensor card and is not related to Mushroom.
Please refer to the following guide for a solution
How do I combine these two sets of card-mod entries to function at the same time?
Would like the slider colour, font changes and also have the margins updates (to combine text with dimmer slider) all combined but can’t seem to figure it out so far.
card_mod:
style:
mushroom-card .actions mushroom-light-brightness-control $: |
mushroom-slider {
--main-color: white !important;
--secondary-color: clear
}
mushroom-state-info $: |
.container {
--card-secondary-font-size: 14px;
--card-primary-font-size: 16px;
--card-secondary-color: grey
}
card_mod:
style: |
div.actions {
margin-top: -3.8em;
margin-left: 45px;
opacity: 0.4;
}
I love this guide and use it for reference a lot. I know that there was some discussion a while back about changes to some of the CSS code. Specifically, the colour of text in a template card has moved to ha-card I believe - is the guide going to be updated?
Thanks for the work!
I’m having some problems trying to change the icon shape colour to another colour or transparent. I have the mushroom-template-card within a conditional card:
type: conditional
conditions:
- condition: state
entity: sensor.water_softener_salt_level
state: ok
card:
type: custom:mushroom-template-card
primary: Water softener salt tank empty!
secondary: Please refill
icon: mdi:water
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_color: ''
badge_color: white
card_mod:
style: |
ha-card {
background-color: #8c0101;
--card-primary-color: white;
--card-secondary-color: white;
}
ha-state-icon {
color: white;
}
mushroom-shape-icon$: |
.shape {
--shape-color: transparent !important;
}
Colour or transparency for the icon shape doesn’t change. What have I got wrong?
With the help of Bing ChatGPT, this seems to work:
type: custom:mushroom-light-card
entity: light.l23_2
name: L23 Test (All CSS together)
show_brightness_control: true
collapsible_controls: true
icon_color: white
card_mod:
style:
.: |
div.actions {
margin-top: -3.8em;
margin-left: 45px;
opacity: 0.2;
}
ha-card {
--card-primary-font-size: 16px;
--card-secondary-font-size: 14px;
--card-secondary-color: grey;
}
Can I also display the time ‘18:20’ instead of ‘time ago’?
square: false
type: grid
cards:
- type: custom:mushroom-entity-card
entity: sensor.garten_temp_min_daily
primary_info: last-changed
secondary_info: none
layout: vertical
icon_color: light-blue
- type: custom:mushroom-entity-card
entity: sensor.gw1100a_garten_temperature
primary_info: last-changed
secondary_info: none
layout: vertical
icon_color: primary
- type: custom:mushroom-entity-card
entity: sensor.garten_temp_max_daily
primary_info: last-changed
secondary_info: none
layout: vertical
icon_color: amber
- type: custom:bignumber-card
entity: sensor.garten_temp_min_daily
scale: 22px
title: min
color: rgb(72,143,194)
round: 1
hideunit: false
- type: custom:bignumber-card
entity: sensor.gw1100a_garten_temperature
scale: 22px
title: now
color: silver
round: 1
hideunit: false
- type: custom:bignumber-card
entity: sensor.garten_temp_max_daily
scale: 22px
title: max
color: gold
round: 1
hideunit: false
columns: 3
eliminate this line icon_color: '' and use .: | in your mod. I made the shape color orange so you know it’s working.
type: conditional
conditions:
- condition: state
entity: sensor.water_softener_salt_level
state: ok
card:
type: custom:mushroom-template-card
primary: Water softener salt tank empty!
secondary: Please refill
icon: mdi:water
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
badge_color: white
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: orange !important;
}
.: |
ha-state-icon {
color: white;
}
ha-card {
background-color: #8c0101;
--card-primary-color: white;
--card-secondary-color: white;
}
Excellent - thanks very much 
I’m modifiying a few styles/colors globally in a mushroom theme as below. As part of that, I would like to modify the color of all buttons on all mushroom cards, e.g., playback controls on the media card. I thought that the last line might do that. I have also tried a few other key names, but I can’t find the right one. Any suggestions? Thanks.
Mushroom Rounded Shadow:
# Home Assistant override
ha-card-border-width: 0
ha-card-border-radius: 36px
primary-color: rgb(2, 119, 189)
accent-color: rgb(3,218,198)
modes:
light:
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
dark:
primary-background-color: rgb(18, 15, 18)
app-header-background-color: rgb(24, 20, 24)
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5)
mushroom-button-bg-color: rgb(24, 210, 24)
Like this? You’ll have to switch to a template card.
Code for one card
type: custom:mushroom-template-card
icon: mdi:arrow-down-bold
icon_color: light-blue
entity: sensor.garten_temp_min_daily
layout: vertical
primary: |
{{ as_timestamp (states.sensor.garten_temp_min_daily.last_changed) | timestamp_custom('%I/%M%p)') | replace("(0", "") | replace("/", ":") | replace (")", "") }}
1 Like
so great… thanks a lot 
Can anybody help me with this? There’s a box around the button (visible only when pressing and holding) that messes with the slider, I can’t slide the area within the box.
- type: custom:vertical-stack-in-card
cards:
- features:
- style: slider
type: numeric-input
type: tile
entity: input_number.water_heater_duration
tap_action:
action: none
icon_tap_action:
action: none
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.dev_hot_water
icon: mdi:power
icon_color: black
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
alignment: center
card_mod:
style: |
ha-card {
margin: -4px 0px 10px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--chip-border-width: 0;
--chip-border-radius: 12px;
--chip-height: 46px;
--chip-padding: 62px;
--chip-spacing: 0px;
}
Not sure how, you get such a square, i copied you code, and it work/looks fine here !
However i have Custom-Theme, so it might play a role here.
However , ive never seen “padding” used this way !
“padding” is normally applied in All directions , and if you remove it, it works
I’m not really good with CSS, I got the code from a post on another thread. If I remove the padding, I just get a chip that doesn’t resemble a button at all. Is there any other way to change its width?