Happy to assist!!
Hello All
Happy new year,
can you please advise me how to move the block in specific location, getting issue in Tablet
a bit out of scope for this topic, but I think it can be done with layout card. if you want it up or down you can play around with the padding with card_mod
try with this in your theme yaml.
# https://github.com/home-assistant/frontend/blob/166633cfa88d6abf080f5dd526dfa1f3b5e398e2/src/panels/lovelace/views/hui-sections-view.ts
ha-view-sections-row-gap: 4px #default 8px
ha-view-sections-column-gap: 8px #default 32px
# ha-section-grid-row-gap: 8px #default
ha-section-grid-column-gap: 0px
found else where
1 Like
I’m trying to implement a card-mod in my theme.yaml file, but the mushroom-shape-icon$ part is not working. Can someone help me understand why it’s not being applied as expected?
card-mod-card: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
ha-card {
{% if is_state(config.entity, 'on') %}
box-shadow: 0px 3px 0px rgba(0, 0, 255, 0.9);
{% endif %}
}
mushroom-shape-icon$:
style: |
@keyframes ping {
0% {
box-shadow: none;
}
20% {
box-shadow: 0 0 5px 5px rgba(var(--rgb-amber), 0.7);
}
}
.shape-icon {
{% if is_state('script.turn_on_off_tv_light', 'on') %}
animation: ping 5s infinite;
{% endif %}
}
Thanks!
Thanks a lot me me try
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;
}
2 Likes
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:- entity: XXXXXXX
state: “off”
card:
type: custom:mushroom-number-card
entity: input_number.zmn_hshqyyh
primary_info: none
fill_container: false
hold_action:
action: none
double_tap_action:
action: none
display_mode: buttons
layout: horizontal
icon_type: none
secondary_info: none
card_mod:
style:
.: |
ha-card {
width: 200px;
min-height: 70px;
background: none !important;
border: none !important;
box-shadow: none !important;
}
mushroom-number-value-control$: |
mushroom-input-number {
font-size: 14px;
–text-color: black;
–icon-color: blue;
–bg-color: rgba(var(–rgb-black), 0.05);
}
- entity: XXXXXXX
-
type: conditional
conditions:- entity: XXXXXXX
state: “on” - entity: timer.sh_vn_hshqyyh
state: active
card:
type: custom:timer-bar-card
entities:- timer.sh_vn_hshqyyh
sync_issues: ignore
compressed: true
bar_radius: 4px
text_width: 40px
layout: full_row
bar_foreground: orange
icon: mdi:stop-circle
tap_action:
action: none
- timer.sh_vn_hshqyyh
- entity: XXXXXXX
Check out this link to format your code. #11
It helps expedite resolutions.
1 Like
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;
}
1 Like
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;
}