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!
