type: entities
card_mod:
style:
.: |
#states > * {
margin: 0 !important;
}
1 Like
Like this? This does Not Work, i have use 100px top See faster a different
type: custom:expander-card
gap: 0.0em
expanded-gap: 0.6em
padding: 0.0em
clear: false
title: Erweiterte Einstellungen
overlay-margin: 0.0em
child-padding: 0.0em
child-margin-top: 0.0em
button-background: transparent
expander-card-background: transparent
expander-card-background-expanded: "#2a2a2a"
header-color: var(--primary-text-color,#fff)
arrow-color: "var(--paper-item-icon-color, #aaa)"
expander-card-display: block
title-card-clickable: false
title-card-button-overlay: false
card_mod:
style: |
ha-card .header {
height: 43px;
}
cards:
- type: entities
entities:
- entity: input_boolean.heizperiode
name: Heizperiode
icon: mdi:thermostat-box-auto
show_state: false
state_color: true
tap_action:
action: none
type: custom:multiple-entity-row
entities:
- entity: automation.advanced_heating_control_wohnzimmer
name: Automatik
toggle: true
styles:
width: 85px
- entity: input_boolean.heizperiode
name: Heizperiode
toggle: true
card_mod:
style:
hui-generic-entity-row .entities-row div.entity:
ha-entity-toggle:
$: |
ha-switch {
padding-top: 5px !important;
padding-bottom: 0px !important;
}
- type: custom:mushroom-select-card
entity: input_select.advanced_heating_control_scheduler
name: Scheduler
icon: mdi:calendar-month-outline
layout: horizontal
secondary_info: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
--card-primary-font-weight: normal;
padding: 0px !important;
}
mushroom-shape-icon {
--shape-color: none !important;
--icon-color: #44739e !important;
}
ha-state-icon {
width: 36px;
}
state_color: true
show_header_toggle: false
card_mod:
style:
.: |
#states > * {
margin: 100px !important;
}
I don’t get it, you want to adjust the margin for the entities children? Or custom:expander-card content?
For the entities children
So use my example above for type: entities…
type: entities
card_mod:
style:
.: |
#states > * {
margin: 0 !important;
}
I have, but on bottom?
When i have the Same spaces Like type: entities so it is the Same?
I try it later with your Location
Lots of posts here; apologize in advance if this has been asked before and answered because there are way too many posts to wade through. Is it possible to use card-mod to remove visual elements of a card? I’m thinking specifically about the Light Card; I want to remove the three vertical dots that bring up the “More Info” dialogue because I prefer the clean look of the Button Card with the ability to adjust the brightness of my dimmable lights.
aware we can do this, and I did:
- type: logbook
card_mod:
style: |
ha-logbook {
height: 200px !important;
}
hours_to_show: 12
target:
label_id: familie
Hoever, Id love the logbook card to adapt the height within a certainmin-height - max-height range to the amount of entries.
- type: logbook
card_mod:
style: |
ha-logbook {
max-height: 400px !important;
}
hours_to_show: 12
target:
label_id: familie
but that wont work…
any thoughts?
fwiw:
card_mod:
style: |
ha-logbook {
height: fit-content !important;
}
hours_to_show: 24
would seem the obvious css option, but it doesnt adapt at all, it just reduces to 1 or 2 lines
Hello, I’m looking for help with styling a picture-elements card.
The goal is for each element to have a different transparency based different sensor outputs using background alpha.
This does not work:
type: picture-elements
image: https://andyland.duckdns.org/local/RoofOutline.png
title: Roof
card_mod:
style: |
ha-card {
--a1_alpha = {{(states('sensor.panel_a1_power')|int/255)|round(2)}}
--a2_alpha = {{(states('sensor.panel_a2_power')|int/255)|round(2)}}
}
elements:
- type: image
entity: sensor.panel_a1_power
image: https://andyland.duckdns.org/local/panel.png
style:
top: 47%
left: 75%
background: rgba(0,255,0,'var(--a1_alpha)')
I’m not really sure how to troubleshoot this. I do not see any errors on the DevTools console, and the background is not colorized.
Start with fixing semicolons missing.
Will see what I can do.
Yep, does not work
type: custom:expander-card
gap: 0.0em
expanded-gap: 0.6em
padding: 0.0em
clear: false
title: Erweiterte Einstellungen
overlay-margin: 0.0em
child-padding: 0.0em
child-margin-top: 0.0em
button-background: transparent
expander-card-background: transparent
expander-card-background-expanded: "#2a2a2a"
header-color: var(--primary-text-color,#fff)
arrow-color: "var(--paper-item-icon-color, #aaa)"
expander-card-display: block
title-card-clickable: false
title-card-button-overlay: false
card_mod:
style: |
ha-card .header {
height: 43px;
}
cards:
- type: entities
card_mod: null
style:
.: |
#states > * {
margin: 100px !important;
}
entities:
- entity: input_boolean.heizperiode
name: Heizperiode
icon: mdi:thermostat-box-auto
show_state: false
state_color: true
tap_action:
action: none
type: custom:multiple-entity-row
entities:
- entity: automation.advanced_heating_control_wohnzimmer
name: Automatik
toggle: true
styles:
width: 85px
- entity: input_boolean.heizperiode
name: Heizperiode
toggle: true
card_mod:
style:
hui-generic-entity-row .entities-row div.entity:
ha-entity-toggle:
$: |
ha-switch {
padding-top: 5px !important;
padding-bottom: 0px !important;
}
- type: custom:mushroom-select-card
entity: input_select.advanced_heating_control_scheduler
name: Scheduler
icon: mdi:calendar-month-outline
layout: horizontal
secondary_info: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
--card-primary-font-weight: normal;
padding: 0px !important;
}
mushroom-shape-icon {
--shape-color: none !important;
--icon-color: #44739e !important;
}
ha-state-icon {
width: 36px;
}
state_color: true
show_header_toggle: false
I think that css is updated together with the state changes of entries. This means all new state for entities is element updated including css…
General question, I have been able to make the background of a card ‘none’ and it works fine (sort of).
Sometimes it does not work immediately and I need to refresh the web browser (just refresh. no F5 or more). Can this be improved upon?
Hi,
Someone can explain how it should work in ver 3.5.0?
square: false
type: grid
cards:
- type: custom:timer-bar-card
entity: switch.boiler
tap_action:
action: toggle
icon: mdi:shower-head
duration:
entity: input_text.time_for_boiler
sync_issues: fix
invert: true
bar_direction: rtl
bar_width: 100%
mushroom:
layout: vertical
icon_color: orange
primary_info: name
secondary_info: state
card_mod:
style:
ha-state-icon$: |
{% if is_state('switch.boiler', 'on') %}
ha-icon {
animation: clip 0.7s ease-out infinite;
}
{% endif %}
@keyframes clip {
0% { clip-path: inset(0 0 45% 0); }
100% { clip-path: inset(0 0 0 0); }
}
mushroom-shape-icon$: |
.shape {
{% if is_state('switch.boiler', 'on') %}
--shape-animation: ping 5s infinite;
{% endif %}
}
@keyframes ping {
20% { box-shadow: 0 0 5px 5px rgba(var(--rgb-amber), 0.7); }
100% { box-shadow: none; }
}
Thanks!
3.5.0 is buggy and has been withdrawn…go to 3.4.4.
3 Likes
Thanks, yes - Semicolons, not equals.
Thank you.
Semicolons & colons))
--a1_alpha: {{.....}};
1 Like
I’m struggling.
I’m able to set style for first HA-card, but for the second it is not possible. What am I doing wrong:
No one will know, without showing, what you are dong.