I am trying to edit the mushroom light card, I want to increase the font size and increase the height of the card.
I tried the following:
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 20px;
}
and
card_mod:
style: |
ha-card {
height: 100px !important;
}
works seperatly. But how to combine these? I cannot figure it out.
type: custom:mushroom-light-card
entity: light.bridge_light
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 20px;
}
.: |
ha-card {
height: 100px !important;
}
Please post your card code.
type: custom:stack-in-card
mode: horizontal
cards:
type: custom:mushroom-template-card
entity: XXXXXXXXXXXX
icon: mdi:sprinkler-variant
tap_action:
action: toggle
data:
bed_side: XXXXXXX
timer: timer.sh_vn_hshqyyh
target: {}
icon_color: “{% if is_state(‘XXXXXXX’,‘on’)%}green{%else%}{%endif%}”
primary: השקייה אחורית
card_mod:
style:
.: |
ha-card {
width: 200px;
min-height: 70px;
background: none !important;
border: none !important;
box-shadow: none !important;
}
mushroom-shape-icon $: |
div {
box-shadow: -4px -4px 5px rgba(255, 255, 255, 0.3),
4px 4px 5px 1px rgba(00, 00, 00, 0.3),
inset 1px 1px 2px 0px rgba(255, 255, 255, 0.10),
inset -1px -1px 2px 1.5px rgba(00, 00, 00, 0.10) !important;
border: none;
border-radius: 50px !important;
outline: none;
display: flex;
align-items: center;
justify-content: center;
width: 48px !important;
height: 48px !important;
box-sizing: border-box;
type: conditional
conditions:
type: conditional
conditions:
Check out this link to format your code. #11
It helps expedite resolutions.
I want to change the background of my light card based on the state. When the light is on, I want an yellow background and a dark yellow border. How can I achieve this? the solutions from chatgpt didnt work.
this is my current code:
type: custom:mushroom-light-card
entity: light.hue_white_light_1
show_brightness_control: true
fill_container: false
use_light_color: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: false
layout: horizontal
secondary_info: none
name: Spots
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-font-size: 22px;
}
.: |
ha-card {
height: 80px !important;
background-color: rgba(245, 245, 245, 0.1); /* Grijze achtergrond */
border: 5px solid rgb(100,100,100); /* Donkergrijze rand */
border-radius: 10px; /* Optioneel: afgeronde hoeken */
}
Test this out…
type: custom:mushroom-light-card
entity: light.hue_white_light_1
show_brightness_control: true
fill_container: false
use_light_color: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: false
layout: horizontal
secondary_info: none
name: Spots
card_mod:
style: |
ha-card {
background-color: {{ 'yellow' if is_state(config.entity, 'on') else 'grey' }} !important;
border-color: {{ 'goldenrod' if is_state(config.entity, 'on') else 'grey' }} !important;
border-width: 5px !important;
--card-primary-font-size: 22px;
height: 80px !important;
border-radius: 10px;
}
Hi,
Is there a way to force the list in the Select Card to always drop to bottom?
Thank you!
Do you still need assistance with the Select card?
Yes please. Couldn’t figure out how.
Can you be a little clear about what “always drop to bottom?” means?
I took a little time to messing with the code, but was unsure exactly what you were looking for.
Simple Example
type: custom:mushroom-select-card
entity: input_select.test
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$:
mwc-menu $: |
mwc-list {
height: 480px !important;
}
That helps a bunch. I’ll take a look. 
Sorry, not sure what to look at. Couldn’t find anything related.
This portion…
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$: |
.mdc-select__anchor{
background: none !important;
border-radius: 20px !important;
}
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
.mdc-line-ripple::after {
border-bottom-width: 0px !important;
}
.mdc-select__selected-text {
color: transparent !important;
}
.mdc-select__dropdown-icon {
fill: transparent !important;
}
.mdc-select {
position: absolute !important;
width: 100% !important;
--select-height: 97px;
top: 0%;
right: 0%;
}
OK, I’ll look into it when I get home and let you know how it works. Thank you!
So far this is what I’ve found while inspecting the CSS. It seems that the list is created under the “.mdc-menu-surface” class, and one property that drew my attention was “transform-origin”, not sure if I’m on the right track though, nor how to reference that, in order to overwrite the properties there.
