I used sidebar card with the new sections on both laptop and tablet working perfect,
How to add SVG to HA, or you just placing them in www and /local/icon.svg or you using a addon
To use with Cupertino Icon, you need to add the svg file in the /homeassistant/custom_components/cupertino/data/ios directory.
After to use them you indicate them like this.
How do i make sure then that one line has 2 icons and another line underneath it has 3 icons? And it stays that way? Without using horizontal stack?
I haven’t tried it, but I’ve seen people use this card first. So you can use whatever card you want.
custom:stack-in-card
bottomCard:
type: custom:stack-in-card
cardOptions:
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: true
cards:
- type: horizontal-stack
Lol i dont follow you
You said to remove the horizontal stack card, and now you say to add it?
It works and stays now, but the background is not good, and theres a big white box around alle chips
Only on the first card, for the others it seems ok.
Any idea on this?
I don’t see your images, but here is what I have to set the sidebar colors.
sidebar:
width:
mobile: 1
desktop: 23
hideTopMenu: true
showTopMenuOnMobile: true
digitalClock: true
date: true
dateFormat: dddd DD MMMM
style: |
:host {
--sidebar-text-color: #BDC1C6;
--face-color: #00F031;
--face-border-color: #FFF;
background-image: linear-gradient(115051deg, #000000, #151515, #1C1C1C, #2E2E2E, #424242, #585858);
}
.sidebarMenu li {
line-height: 15px!important;
font-weight: 400!important;
}
.bottom {
width: 100% !important;
}
.digitalClock {0
color: rgba(255, 255, 255, 0.7)!important;
font-size: 5.41vw!important;
font-weight: 500!important;
letter-spacing: -0.05vw!important;
text-align: center;
}
.date {
color: rgba(255, 255, 255, 0.7)!important;
font-size: 2.00vw!important;
font-weight: 400!important;
letter-spacing: -0.05vw!important;
text-align: center;
}
.template {
text-align: center;
font-weight: 500!important;
}
i cant get rid of the white box around the chips
see here
I still don’t see your images in your posts. I tested your configuration for the bottomCard and this is what it gives me.
Code:
bottomCard:
type: custom:stack-in-card
cardOptions:
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: true
cards:
- type: vertical-stack
cardOptions: null
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: alarm_control_panel.blink_cameras_exterieures
icon_color: red
name: Alarm
use_entity_picture: false
content_info: name
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.hydro_quebec_demande_de_puissance_reseau
above: 0
chip:
type: template
icon: mdi:transmission-tower-export
icon_color: green
content: >-
{{(states('sensor.hydro_quebec_demande_de_puissance_reseau')
| float * 1000) | round(0)}}W
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.huidig_stroomverbruik_watt
above: 0
chip:
type: template
icon: mdi:transmission-tower-import
icon_color: red
content: >-
{{(states('sensor.hydro_quebec_demande_de_puissance_reseau')
| float * 1000) | round(0)}}W
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: light.salon
icon: mdi:lightbulb-multiple
icon_color: amber
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: entity
entity: media_player.salon
icon: mdi:play-circle
icon_color: amber
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: action
tap_action:
action: navigate
navigation_path: /sous-vue-piece-atelier
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:test-tube
card_mod:
style: |
ha-card {
--chip-background: transparant;
--color: white;
yesv thats it, you see it has a black border around all chips, instead of taking over the background
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.yevgeniy
name: Yevgeniy
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
- type: custom:mushroom-person-card
entity: person.irina
name: Iina
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
- type: custom:mushroom-person-card
entity: device_tracker.life360_sonia
name: Sonia
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
- type: custom:mushroom-person-card
entity: device_tracker.life360_boris_bolembakh
name: Papa
icon_type: entity-picture
fill_container: true
tap_action:
action: navigate
navigation_path: /our-home/family
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
- type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: navigate
navigation_path: family
icon: mdi:family-tree
icon_color: primary
- type: action
tap_action:
action: navigate
navigation_path: weather
icon: mdi:weather-hazy
icon_color: primary
- type: action
icon_color: primary
tap_action:
action: navigate
navigation_path: ha-info
icon: mdi:memory
alignment: center
Finally, while searching through Home Assistant discussions, I found the solution. 
Add cardStyle: to the bottomCard.
cardStyle: |
:host {
width: 100%;
}
ha-card {
background: none;
}
bottomCard:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
--chip-background: transparant !important;
--text-color: white !important;
}
cardOptions:
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: true
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: alarm_control_panel.blink_cameras_exterieures
icon_color: red
name: Alarm
use_entity_picture: false
content_info: name
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.hydro_quebec_demande_de_puissance_reseau
above: 0
chip:
type: template
icon: mdi:transmission-tower-export
icon_color: green
content: >-
{{(states('ssensor.hydro_quebec_demande_de_puissance_reseau')
| float * 1000) | round(0)}}W
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.huidig_stroomverbruik_watt
above: 0
chip:
type: template
icon: mdi:transmission-tower-import
icon_color: red
content: >-
{{(states('sensor.hydro_quebec_demande_de_puissance_reseau')
| float * 1000) | round(0)}}W
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: light.salon
icon: mdi:lightbulb-multiple
icon_color: amber
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: entity
entity: media_player.salon
icon: mdi:play-circle
icon_color: amber
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: action
tap_action:
action: navigate
navigation_path: /sous-vue-piece-atelier
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:test-tube
card_mod:
style: |
ha-card {
--chip-background: transparant;
--color: white;
cardStyle: |
:host {
width: 100%;
}
ha-card {
background: none;
}
YAY will try thx
Edit: background is fixed now, yay !! but still a very thin white border
Yay i fixed it by adding
Hope it satays now
cardStyle: |
:host {
width: 100%;
}
ha-card {
background: none;
border: 0px;
}width:
mobile: 0
tablet: 25
desktop: 15
my tablet sidebar tablet: 25 is not working instead its using the desktop 15px ??
anyone else having this problem