I would like to ask our gurus another question: I want to add lighting border to vertical-stacked-navigation-card like I have on my mushroom-template-card, but it’s not working. I understand it’s a different type of cards but is that even possible or I am asking for something what is not exist?
Code for my navigation card:
type: custom:vertical-stacked-navigation-card
nav_name: ' '
nav_items:
- name: First Floor
icon: mdi:home-floor-1
sub_nav_items:
- name: 📺 Living Room
destination: living-room-1
active: false
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;
}
- name: 👩🍳 Kitchen
destination: kitchen
active: false
- name: 👒 Hallway
destination: hallway
- name: 🚿 My Bathroom
destination: my-bathroom
- name: 🚙 Garage
destination: garage
- name: 🧸 Kids Room
destination: kids-room
- name: 🏝️ Outside
destination: outside
active: false
unfolded: false
- name: Second Floor
icon: mdi:home-floor-2
destination: ''
sub_nav_items:
- name: 🔺 Upstairs
destination: upstairs
- name: 👩❤️👨 Master Bedroom
destination: master-bedroom
- name: ♌ Sonia's Room
destination: sonia-room
- name: ♉ Artem's Room
destination: lovelace
- name: Basement
icon: mdi:home-floor-b
destination: ''
sub_nav_items:
- name: 🔻 Basement
destination: basement
- name: 🧺 Laundry
destination: laundry
- name: ⚒️ Utility Room
destination: utility-room
- name: 💻 HA Info
destination: ha-information
custom_styles:
colors:
text:
main: White
sub: White
hover:
main: Teal
sub: Teal
active:
sub: orange
background:
main: Transparent
sub: Transparent
font_size:
text:
main: 25px
sub: 20px
card_mod:
style: |
ha-card {
background: url('/local/MyPictures/rock wall.jpg');
background-size: 100%;
}
Code for template card:
type: custom:stack-in-card
mode: vertical
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Second Floor
icon: mdi:home-floor-2
icon_color: teal
card_mod:
style: |
ha-card {
--card-primary-font-size: 1rem;
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: rem;
font-weight: bold;
margin-left:5rem;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Upstairs
secondary: null
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
secondary: null
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
secondary: null
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
secondary: null
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
card_mod:
style: |
ha-card {
--vertical-stack-card-gap: 10px;
background: url('/local/MyPictures/second floor-1.jpg');
background-size: 100%;
}
Thank you
