ChenH
January 12, 2025, 10:14am
1084
type: custom:stack-in-card
type: custom:mushroom-template-card
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
entity: XXXXXXX
type: conditional
entity: XXXXXXX
entity: timer.sh_vn_hshqyyh
timer.sh_vn_hshqyyh
Check out this link to format your code. #11
It helps expedite resolutions.
1 Like
HBO
January 12, 2025, 2:19pm
1086
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.
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 */
}
HBO:
light.hue_white_light_1
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;
}
1 Like
GSD
January 13, 2025, 10:54am
1088
Hi,
Thank you!
Do you still need assistance with the Select card?
GSD
January 14, 2025, 5:43am
1091
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.
GSD
January 14, 2025, 8:39am
1096
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%;
}
GSD
January 14, 2025, 9:08am
1098
OK, I’ll look into it when I get home and let you know how it works. Thank you!
GSD
January 14, 2025, 12:31pm
1099
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.
galant
January 14, 2025, 9:48pm
1100
Hi all, need your expertise advice on how I could fine tune my mushroom template card to achieve the following. Sample code snippet only showing the card for Den.
I wonder if it is possible to have tooltip (or call it hover text if you wish) when hover the battery badge icon to show the actual reading of the blind battery sensor.
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Den
secondary: |-
{% if is_state('cover.den_blind','open') %}
Open
{% elif is_state('cover.den_blind','closed') %}
Closed
{% else %}
{{ states('sensor.den_blind_motor_state') }}
{% endif%}
- {{ state_attr('cover.den_blind', 'current_position') }}%
icon: |-
{% if is_state('cover.den_blind','open') %}
mdi:window-shutter-open
{% else %}
mdi:blinds-horizontal-closed
{% endif%}
badge_icon: |-
{% set bl = states('sensor.den_blind_battery') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
badge_color: |-
{% set bl = states('sensor.den_blind_battery') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} disabled
{% endif %}
tap_action:
action: none
card_mod:
style: |
mushroom-badge-icon {
left: 30px;
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
- type: custom:mushroom-cover-card
entity: cover.den_blind
name: Bathroom
primary_info: none
secondary_info: none
icon_type: none
tap_action:
action: none
show_buttons_control: true
card_mod:
style: |
ha-card {
margin-top: -20px;
box-shadow: none;
--ha-card-border-width: 0px;
}
card_mod:
style: |
ha-card {
{% if is_state('cover.den_blind','open')}
background: rgba(101,170,91,0.2);
{% else %}
background: rgba(226,84,66,0.2);
{% endif %}
}
Thanks in advance!
Frosty
January 14, 2025, 11:12pm
1101
got no way of testing but I think you can play around with
ha-card:hover
if the card uses ha-card that is
@Frosty is on the right track… If you want to isolate the badge,use mushroom-badge-icon:hover {
I am unsure if you can get the state of cover battery to appear. I’d have to think about a method to accomplish that.
card_mod:
style: |
mushroom-badge-icon {
left: 30px;
}
mushroom-badge-icon:hover {
transform: scale(5);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
another option is to add a second badge…
tap_action:
action: toggle
card_mod:
style: |
ha-state-icon::after {
content: "{{ states('sensor.basement_sensor_battery') }}";
position: absolute;
top: 0%;
right: 80%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height:14px;
border-radius: 50%;
background-repeat: no-repeat;
background: red;
font-size: 9px;
}
mushroom-badge-icon {
left: 28px;
}
mushroom-badge-icon:hover {
transform: scale(5);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
One more option that is a bit hacky, but works…
type: custom:mushroom-template-card
primary: Hover
secondary: more info
entity: cover.bed_curtains
icon: mdi:curtains
icon_color: white
badge_icon: |-
{% set bl = states('sensor.bed_curtains_battery') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
badge_color: |-
{% set bl = states('sensor.bed_curtains_battery')| int(0) %}
{% if bl < 10 %} red
{% elif bl < 50 %} orange
{% elif bl <= 100 %} green
{% else %} disabled
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.primary {
color: green !important;
margin-left: 10px !important; }
.secondary {
color: white !important;
margin-left: 10px !important; }
.: |
ha-state-icon::after {
content: "{{ states('sensor.bed_curtains_battery') }}";
position: absolute;
top: -10px;
left: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height:24px;
border-radius: 50%;
background-repeat: no-repeat;
background: blue;
font-size: 12px;
font-weight: bold;
}
mushroom-badge-icon:hover {
--main-color: transparent !important;
--icon-color: transparent;
transform: scale(3);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
mushroom-badge-icon {
left: 30px;
top: -10px;
--badge-icon-size: 16px;
--badge-size: 24px;
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
Just a heads up, your color logic is overkill.
badge_color: |-
{% set bl = states('sensor.bed_curtains_battery')| int(0) %}
{% if bl < 10 %} red
{% elif bl < 50 %} orange
{% elif bl <= 100 %} green
{% else %} disabled
{% endif %}
4 Likes
Is it possible to replace badge icon with entity state?
