Current version, to be changed in future. Header change condition card
after toggle
Current work in progress, ble room assist to automatic toggle full view of cards
after toggle
1 Like
I’ve got in a different direction and use stack-in-card with my regular cards.
This way I feel more flexible on what to show and how to show them.
With bubble card separator I change the line to my primary color if there is presense.
This looks very nice!
Which card are you using here? Can you share the yaml code?
Yes, of course. I use mushroom-template and mushroom-chips-cards as well as custom:stack-in-card.
If you replace
type: custom:stack-in-card
mode: vertical
with these:
type: vertical-stack
you can edit everything in the visual editor. Then simply change it back again and the look will fit again.
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Wohnzimmer
secondary: ""
icon: mdi:sofa
layout: horizontal
entity: light.alle_lichter_eg_wohnzimmer
icon_color: >-
{{ 'grey' if states("sensor.number_lights_on_eg_wohnzimmer") | int ==0
else 'amber' }}
tap_action:
action: navigate
navigation_path: /dashboard-smartphone/eg-wohnzimmer
hold_action:
action: toggle
double_tap_action:
action: none
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
@keyframes ping {
0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
mushroom-shape-icon {
--icon-size: 76px;
display: flex;
margin: -21px -5px 0px -21px !important;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
width: 180px;
background: none;
border: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.eg_wohnzimmer_hg_int0000005_temperatur
icon_color: blue
alignment: end
card_mod:
style: |
ha-card {
--chip-font-size: 0.3em;
--chip-icon-size: 0.0em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-border: none;
--chip-spacing: none;
--chip-font-weight: bold;
top: 0px;
opacity: 0.7
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.eg_wohnzimmer_hg_int0000005_luftfeuchtigkeit
icon_color: blue
alignment: end
card_mod:
style: |
ha-card {
--chip-font-size: 0.3em;
--chip-icon-size: 0.0em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-border: none;
--chip-spacing: none;
--chip-font-weight: bold;
top: -20px;
opacity: 0.7
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.number_lights_on_eg_wohnzimmer
icon: |-
{% if states("sensor.number_lights_on_eg_wohnzimmer") | int ==0 %}
mdi:lightbulb-group-off
{% else %}
mdi:lightbulb-group
{% endif %}
icon_color: >-
{{ 'grey' if states("sensor.number_lights_on_eg_wohnzimmer") | int ==0
else 'amber' }}
picture: ""
tap_action:
action: none
- type: template
entity: sensor.number_skd_on_eg_wohnzimmer
icon: |-
{% if states("sensor.number_skd_on_eg_wohnzimmer") | int ==0 %}
mdi:power-plug-off-outline
{% else %}
mdi:power-plug
{% endif %}
icon_color: >-
{{ 'grey' if states("sensor.number_skd_on_eg_wohnzimmer") | int ==0
else 'amber' }}
picture: ""
tap_action:
action: none
- type: template
entity: sensor.number_windows_open
icon: |-
{% if states("sensor.number_windows_open_eg_wohnzimmer") | int ==0 %}
mdi:window-closed-variant
{% else %}
mdi:window-open-variant
{% endif %}
icon_color: >-
{{ 'grey' if states("sensor.number_windows_open_eg_wohnzimmer") | int
==0 else 'amber' }}
picture: ""
tap_action:
action: none
- type: template
entity: sensor.number_doors_open
icon: |-
{% if states("sensor.number_doors_open_eg_wohnzimmer") | int ==0 %}
mdi:door-closed
{% else %}
mdi:door
{% endif %}
icon_color: >-
{{ 'grey' if states("sensor.number_doors_open_eg_wohnzimmer") | int
==0 else 'amber' }}
picture: ""
tap_action:
action: none
- type: template
entity: sensor.number_motion_detected
icon: |-
{% if states("sensor.number_motion_detected") | int ==0 %}
mdi:motion-sensor-off
{% else %}
mdi:motion-sensor
{% endif %}
icon_color: |-
{% if states("sensor.number_motion_detected") | int ==0 %}
grey
{% else %}
red
{% endif %}
picture: ""
tap_action:
action: none
- type: template
entity: switch.dr_schuppen_skd_poolpumpe
icon: mdi:pool
icon_color: >-
{{ 'blue' if is_state("switch.dr_schuppen_skd_poolpumpe",'on') else
'grey' }}
picture: ""
tap_action:
action: none
alignment: justify
card_mod:
style: |
ha-card {
--chip-font-size: 0.3em;
--chip-icon-size: 0.6em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-border: none;
--chip-spacing: none;
--chip-font-weight: bold;
top: -25px;
height: 15px;
}
layout_options:
grid_columns: 3
grid_rows: 2
1 Like
Thank you very much. 