I take it my other post just helped or do you still need assistance? Just saw your post.
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
--vertical-stack-card-gap: 10px;
background: url('/local/MyPictures/rock wall.jpg');
background-size: 200%;
}
cards:
- type: custom:collapsable-cards
title_card:
type: custom:mushroom-template-card
primary: First Floor
secondary: '{{ states(''light.first_floor_lights'') }}'
icon: mdi:home-floor-1
icon_color: >-
{%if is_state('light.first_floor_lights', 'off') %} teal {% else %}
amber {% endif %}
card_mod:
style: |
ha-card {
background: none !important;
}
ha-card:after {
content: " {{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
right: -15px;
width: 20px;
height: 20px;
font-size: 10px;
}
cards:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
--vertical-stack-card-gap: 10px;
background: url('/local/MyPictures/rock wall.jpg');
background-size: 200%;
}
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Living Room
icon: mdi:sofa
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.living_room_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.living_room_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
margin-left: 5px !important;
}
tap_action:
action: navigate
navigation_path: living-room-1
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: Kitchen
icon: mdi:pot-steam
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.kitchen_lights_2') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.kitchen_lights_2','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
}
tap_action:
action: navigate
navigation_path: kitchen
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Hallway
icon: mdi:hat-fedora
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.hallway_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.hallway_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
margin-left: 5px !important;
}
tap_action:
action: navigate
navigation_path: hallway
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: My Bathroom
icon: mdi:shower-head
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.my_bathroom_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.my_bathroom_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
}
tap_action:
action: navigate
navigation_path: my-bathroom
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Garage
icon: mdi:go-kart
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.garage_lights_light') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.garage_lights_light','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
margin-left: 5px !important;
}
tap_action:
action: navigate
navigation_path: garage
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: Kids Room
icon: mdi:teddy-bear
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.kids_fan_down_light') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.kids_fan_down_light','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
}
tap_action:
action: navigate
navigation_path: kids-room
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Outside
icon: phu:outside
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.outside_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.outside_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
}
tap_action:
action: navigate
navigation_path: outside
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: Weather
icon: mdi:theme-light-dark
icon_color: teal
card_mod:
style: |
ha-card {
--card-primary-font-weight: bold;
--card-primary-font-size: 10px;
width: 150px;
margin-left: 5px !important;
}
tap_action:
action: navigate
navigation_path: weather
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
- type: custom:collapsable-cards
title_card:
type: custom:mushroom-template-card
primary: Second Floor
secondary: '{{ states(''light.second_floor_lights'') }}'
icon: mdi:home-floor-2
icon_color: >-
{%if is_state('light.second_floor_lights', 'off') %} teal {% else %}
amber {% endif %}
card_mod:
style: |
ha-card {
background: none !important;
}
ha-card:after {
content: " {{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: red;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
right: -15px;
width: 20px;
height: 20px;
font-size: 10px;
}
cards:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
--vertical-stack-card-gap: 10px;
background: url('/local/MyPictures/rock wall.jpg');
background-size: 200%;
}
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Upstairs
icon: mdi:escalator-up
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.upstairs_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.upstairs_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
width: 150px;
margin-left: 5px !important;
--card-primary-font-weight: bold !important;
}
tap_action:
action: navigate
navigation_path: upstairs
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: Master Bedroom
icon: mdi:bed-king
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.master_bedroom_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.master_bedroom_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
width: 150px;
--card-primary-font-weight: bold !important;
}
tap_action:
action: navigate
navigation_path: master-bedroom
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Sonia Room
icon: mdi:zodiac-leo
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.sonia_s_bulbs') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.sonia_s_bulbs','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
width: 150px;
margin-left: 5px !important;
--card-primary-font-weight: bold;
}
tap_action:
action: navigate
navigation_path: sonia-room
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: Artem Room
icon: mdi:zodiac-taurus
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.artem_fan') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.artem_fan','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
width: 150px;
--card-primary-font-weight: bold;
}
tap_action:
action: navigate
navigation_path: artem-room
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
- type: custom:collapsable-cards
title_card:
type: custom:mushroom-template-card
primary: Basement
secondary: '{{ states(''light.basement_lights_all'') }}'
icon: mdi:home-floor-b
icon_color: >-
{%if is_state('light.basement_lights_all', 'off') %} teal {% else %}
amber {% endif %}
card_mod:
style: |
ha-card {
background: none !important;
}
ha-card:after {
content: " {{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: yellow;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
right: -15px;
width: 20px;
height: 20px;
font-size: 10px;
}
cards:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
--vertical-stack-card-gap: 10px;
background: url('/local/MyPictures/rock wall.jpg');
background-size: 200%;
}
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Basement
icon: mdi:escalator-down
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.basement_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.basement_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
margin-left: 5px !important;
}
tap_action:
action: navigate
navigation_path: basement
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: Laundry
icon: mdi:tumble-dryer
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.laundry_vanity_light_light') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.laundry_vanity_light_light','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
}
tap_action:
action: navigate
navigation_path: laundry
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Utility Room
icon: mdi:water-boiler
icon_color: teal
card_mod:
style: |
ha-card {
{% if states('light.utility_room_light_light_2') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.utility_room_light_light_2','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
--card-primary-font-size: 10px;
--card-primary-font-weight: bold;
width: 150px;
margin-left: 5px !important;
}
tap_action:
action: navigate
navigation_path: utility-room
fill_container: true
layout: horizontal
multiline_secondary: false
- type: custom:mushroom-template-card
primary: HA Info
icon: ios:cpu
icon_color: teal
card_mod:
style: |
ha-card {
--card-primary-font-size: 10px;
width: 150px;
}
tap_action:
action: navigate
navigation_path: ha-information
fill_container: true
layout: horizontal
multiline_secondary: false
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
To apply areas to the light count, you can do this…
content: " {{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', '2nd Floor')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Office', 'Loft', 'Bedroom', 'Master bedroom'])
| list | count }}";
