Yes I’m having an issue myself and I think it’s the same thing…
Here’s a picture of what I currently have…
I want to push everything under the camera system to the next ‘stack’ but am having a hard time getting it to do what I want…
- type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.sonos_pair
icon: mdi:music
use_media_artwork: false
use_media_info: true
media_controls:
- play_pause_stop
- previous
- next
collapsible_controls: true
volume_controls:
- volume_set
- volume_mute
show_volume_level: true
fill_container: true
tap_action:
action: toggle
style: |
ha-card {
background-color: black;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
font-size: 75px;
background-color: rgba(var(--rgb-card-background-color),0.2);
}
- type: custom:mushroom-person-card
entity: person.john
layout: horizontal
icon: mdi:emoticon-confused-outline
use_entity_picture: true
hide_state: false
fill_container: true
hide_name: false
style: |
:host {
--mush-rgb-state-person-home: var(--rgb-blue);
--mush-rgb-state-person-not-home: var(--rgb-purple);
--mush-rgb-state-person-zone: var(--rgb-amber);
--ha-card-background: rgba(227, 245, 250, 0.12);
}
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.blink_johns_house
card_mod:
style: |
ha-card {
background-color: {{ 'rgba(255, 255, 255, .1)' if is_state('alarm_control_panel.blink_johns_house', 'disarmed') else 'rgba(147, 227, 215, 0.5)' }};
}
states:
- armed_away
name: Camera System
icon: mdi:shield-home
icon_color: "{{ is_state('alarm_control_panel.blink_johns_house', 'disarmed') | iif('red', 'green') }}"
layout: vertical
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
background-color: {{ 'rgba(255, 255, 255, .1)' if is_state('lock.front_door_lock', 'unlocked') else 'rgba(147, 227, 215, 0.5)' }};
}
secondary: 'Battery: {{ states("sensor.front_door_lock_battery") }}%'
entity: lock.front_door_lock
primary: |
{% if is_state('lock.front_door_lock', 'unlocked') %}
Door is Unlocked
{% else %}
Door is Locked
{% endif %}
icon_color: |
{% if is_state('lock.front_door_lock', 'unlocked') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state('lock.front_door_lock', 'unlocked') %}
mdi:lock-open
{% else %}
mdi:lock
{% endif %}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: binary_sensor.back_door_sensor_contact
primary: 'Backdoor: {% if is_state("binary_sensor.back_door_sensor_contact", "off") %}
Closed
{% else %}
Open
{% endif %}'
secondary: 'Battery: {{ states("sensor.back_door_sensor_battery") }}%'
icon_color: |
{% if is_state('binary_sensor.back_door_sensor_contact', 'on') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state('binary_sensor.back_door_sensor_contact', 'on') %}
mdi:door-open
{% else %}
mdi:door
{% endif %}
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
- type: custom:mushroom-template-card
primary: 'Front door: {% if is_state("binary_sensor.front_door_sensor_contact", "off") %}
Closed
{% else %}
Open
{% endif %}'
secondary: 'Battery: {{ states("sensor.front_door_lock_battery") }}%'
entity: binary_sensor.front_door_sensor_contact
icon_color: |
{% if is_state('binary_sensor.front_door_sensor_contact', 'on') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state('binary_sensor.front_door_sensor_contact', 'on') %}
mdi:door-open
{% else %}
mdi:door
{% endif %}
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: 'Bedroom Window: {% if is_state("binary_sensor.0x0c4314fffe5bf0f4_contact", "off") %}
Closed
{% else %}
Open
{% endif %}'
secondary: 'Battery: {{ states("sensor.0x0c4314fffe5bf0f4_battery") }}%'
entity: binary_sensor.0x0c4314fffe5bf0f4_contact
icon_color: |
{% if is_state('binary_sensor.0x0c4314fffe5bf0f4_contact', 'on') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state('binary_sensor.0x0c4314fffe5bf0f4_contact', 'on') %}
mdi:curtains
{% else %}
mdi:curtains-closed
{% endif %}
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
- type: custom:mushroom-template-card
primary: 'Kitchen Window: {% if is_state("binary_sensor.right_kitchen_window_contact", "off") %}
Closed
{% else %}
Open
{% endif %}'
secondary: 'Battery: {{ states("sensor.right_kitchen_window_battery") }}%'
entity: binary_sensor.right_kitchen_window_contact
icon_color: |
{% if is_state('binary_sensor.right_kitchen_window_contact', 'on') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state('binary_sensor.right_kitchen_window_contact', 'on') %}
mdi:curtains
{% else %}
mdi:curtains-closed
{% endif %}
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: 'TV Window: {% if is_state("binary_sensor.tv_window_sensor_contact", "off") %}
Closed
{% else %}
Open
{% endif %}'
secondary: 'Battery: {{ states("sensor.tv_window_sensor_battery") }}%'
entity: binary_sensor.tv_window_sensor_contact
icon_color: |
{% if is_state('binary_sensor.tv_window_sensor_contact', 'on') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state('binary_sensor.tv_window_sensor_contact', 'on') %}
mdi:curtains
{% else %}
mdi:curtains-closed
{% endif %}
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
- type: custom:mushroom-template-card
primary: 'TV Window: {% if is_state("binary_sensor.tv_window_sensor_contact", "off") %}
Closed
{% else %}
Open
{% endif %}'
secondary: 'Battery: {{ states("sensor.tv_window_sensor_battery") }}%'
entity: binary_sensor.tv_window_sensor_contact
icon_color: |
{% if is_state('binary_sensor.tv_window_sensor_contact', 'on') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state('binary_sensor.tv_window_sensor_contact', 'on') %}
mdi:curtains
{% else %}
mdi:curtains-closed
{% endif %}
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: 'AC: {% if is_state("climate.john_s_device", "cool") %}
Cooling
{% else %}
Off
{% endif %}'
#secondary: 'AC: {{ states("sensor.tv_window_sensor_battery") }}%'
entity: climate.john_s_device
icon_color: |
{% if is_state('climate.john_s_device', 'cool') %}
blue
{% else %}
red
{% endif %}
icon: |
{% if is_state('climate.john_s_device', 'cool') %}
mdi:fan-chevron-down
{% else %}
mdi:fan-chevron-up
{% endif %}
use_light_color: false
tap_action:
action: more-info
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.12hourtime
icon: mdi:clock
card_mod:
style: |
ha-card {
--chip-font-weight: normal;
--chip-font-size: 30px;
}
- type: entity
icon: mdi:clock
entity: sensor.date_format
icon: mdi:calendar
card_mod:
style: |
ha-card {
--chip-font-weight: normal;
--chip-font-size: 30px;
}
- type: entity
entity: sensor.lightson
icon: mdi:lightbulb-on
card_mod:
style: |
ha-card {
--chip-font-weight: normal;
--chip-font-size: 30px;
}
I’ve tried to realign using the vertical and horizontal stacks but cannot figure out what I’m doing wrong here… ANY help would be greatly appreciated!!!
Thank you!
