Is there a way to show in the sidebar card, the content of the homefeed card?
Hello,
Is it possible to edit the text in the sidebard so that there a empty line in between? For example:
I want an empty line where the red line is in the picture.
This is the code i have but then all the text is consecutive:
<li>
{% if now().hour < 5 %} Goede nacht {{'\U0001F634'}}
{% elif now().hour < 12 %} Goedemorgen {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Goedenmiddag {{'\U0001F44B\U0001F3FB'}}
{% else %} Goedenavond {{'\U0001F44B\U0001F3FB'}}{% endif %}</li>
<li> Het Weer: {{states('sensor.knmi_thuis_korte_dagverwachting')}}. </li>
{% if "GFT" in states('sensor.afvalinfo_thuis_trash_type_today') %}
<li>Vandaag groenebak aan de straat</li> {% endif %}
Hi,
any idea why my quite basic template config doesnât show up anymore? I havenât changed anything (just the normal HA and HACS Updates). Tested different browsers and also my tablet running fully kiosk
template: |
{% if states(âsensor.muell_bioabfallâ) | float < 3 %}
{% if states(âsensor.muell_restabfallâ) | float < 3 %}
{% if states(âsensor.muell_altpapierâ) | float < 3 %}
{% if states(âsensor.muell_kunststoffâ) | float < 3 %}
bottomCard:
Hi, you need to change the following values:
padding-top: calc(100% - 10px);
width: calc(100% - 10px);
from there you indicate how many px you want to subtract, example:
padding-top: calc(100% - 80px);
width: calc(100% - 80px);
1 Like
nice dashboard, can u share the yaml?
i like the layout and icons 
thx
Is it possible to shrink the template text?
Were you able to fix the problem⊠? facing the same problemâŠ
Hi,
i have tried bottomcard but not work
LOG:
SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18067:30)
/hacsfiles/sidebar-card/sidebar-card.js:18110:22
2024-03-07 12:01:45.135 ERROR (MainThread) [frontend.js.latest.202403060] Uncaught error from Chrome 122.0.0.0 on Windows 10
TypeError: cardElement.setConfig is not a function
/hacsfiles/sidebar-card/sidebar-card.js:18130:33
Code:
....
bottomCard:
type: horizontal-stack
cardOptions:
cards:
- type: "custom:button-card"
color_type: card
color: rgb(255, 255, 255)
icon: mdi:home
- type: "custom:button-card"
color_type: card
color: rgb(255, 255, 255)
icon: mdi:lightbulb
cardStyle: |
:host {
width: 100%;
background-color:#FFF;
}
any solution? alternative? fork?
Mind sharing template/code ?
Hi all,
i was able with this post to manage to create mit sidebar.
I would liek to ask, if its possible to place the mushroom chips between the welcome message and the weather bottom card.
that are all condition based chips, which were only visible if active, like Windows open or lights on.
any ideas?
Thanks in advance.
How do i go about making this centered?
Thanks
template: |
<li>
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Goed Morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
check this out.
.template li {
font-size:20px!important;
text-align: center;
}
Thanks for the help, im a bit new so tried but not sure im putting it in the right spotâŠ
i have left it out but here is my full code.
where do i slot it in? thanks
title: ''
sidebar:
active: true
width:
mobile: 0
tablet: 25
desktop: 20
breakpoints:
mobile: 768
tablet: 768
desktop: 1024
style: |
:host {
--sidebar-background: #1C1C1C;
--sidebar-text-color: #FFF;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
.sidebarMenu li.active {
background-color: rgba(0, 0, 0, 0)!important;
icon-size: 255px;
}
.digitalClock {
font-weight: 400!important;
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 205px;
line-height: 95px;
}
.date {
text-align: center;
}
.title h1{
text-align: center;
}
.bottomCard {
icon-size: 185px;
}
digitalClock: true
twelveHourVersion: true
hideHassSidebar: false
hideTopMenu: false
date: true
dateFormat: dddd DD MMM
clock: false
sidebarMenu:
- action: navigate
navigation_path: /lovelace-home/0
name: Home
active: true
icon: mdi:home-account
- action: navigate
navigation_path: /lovelace-home/1
name: Lights
active: true
icon: mdi:lightbulb-on-10
- action: navigate
navigation_path: /lovelace-home/2
name: Music
active: true
icon: mdi:music-circle
- action: navigate
navigation_path: /dashboard-lights/0/
name: Media
active: true
icon: mdi:television
- action: navigate
navigation_path: /lovelace-home/5
name: Vacuum
active: true
icon: mdi:robot-vacuum
- action: navigate
navigation_path: /lovelace-home/6
name: Misc
active: true
icon: mdi:square-rounded-outline
template: |
<li>
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
bottomCard:
type: grid
cardOptions:
columns: 1
square: false
cards:
- type: picture
image: https://i.imgur.com/PDgpYWg.jpeg
- type: weather-forecast
show_current: true
show_forecast: true
entity: weather.forecast_home
secondary_info_attribute: humidity
cardStyle: |
:host {
width: 100%;
}
views:
- type: sections
title: side
sections:
- type: grid
cards:
- type: custom:sonos-card
- type: light
entity: light.ryan_bedroom
- type: grid
cards:
- type: media-control
entity: media_player.bailey_bedroom
- type: media-control
entity: media_player.bedroom
- type: media-control
entity: media_player.kitchen
- type: grid
cards:
- type: area
area: bailey_bedroom
- type: grid
cards: []
- type: grid
cards: []
- type: grid
cards: []
- type: grid
cards: []
cards: []
theme: back1
put it under you existing .botomCardâŠ
but put everything
}
.bottomCard {
icon-size: 185px;
}
.template li {
text-align: center;
}
im also new
hmm no changesâŠ
title: ''
sidebar:
active: true
width:
mobile: 0
tablet: 25
desktop: 20
breakpoints:
mobile: 768
tablet: 768
desktop: 1024
style: |
:host {
--sidebar-background: #1C1C1C;
--sidebar-text-color: #FFF;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
.sidebarMenu li.active {
background-color: rgba(0, 0, 0, 0)!important;
icon-size: 255px;
}
.digitalClock {
font-weight: 400!important;
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 205px;
line-height: 95px;
}
.date {
text-align: center;
}
.title h1{
text-align: center;
}
.bottomCard {
icon-size: 185px;
}
.template li {
text-align: center;
}
digitalClock: true
twelveHourVersion: true
hideHassSidebar: false
hideTopMenu: false
date: true
dateFormat: dddd DD MMM
clock: false
sidebarMenu:
- action: navigate
navigation_path: /lovelace-home/0
name: Home
active: true
icon: mdi:home-account
- action: navigate
navigation_path: /lovelace-home/1
name: Lights
active: true
icon: mdi:lightbulb-on-10
- action: navigate
navigation_path: /lovelace-home/2
name: Music
active: true
icon: mdi:music-circle
- action: navigate
navigation_path: /dashboard-lights/0/
name: Media
active: true
icon: mdi:television
- action: navigate
navigation_path: /lovelace-home/5
name: Vacuum
active: true
icon: mdi:robot-vacuum
- action: navigate
navigation_path: /lovelace-home/6
name: Misc
active: true
icon: mdi:square-rounded-outline
template: |
<li>
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
bottomCard:
type: grid
cardOptions:
columns: 1
square: false
cards:
- type: picture
image: https://i.imgur.com/PDgpYWg.jpeg
- type: weather-forecast
show_current: true
show_forecast: true
entity: weather.forecast_home
secondary_info_attribute: humidity
cardStyle: |
:host {
width: 100%;
}
views:
- type: sections
title: side
sections:
- type: grid
cards:
- type: custom:sonos-card
- type: light
entity: light.ryan_bedroom
- type: grid
cards:
- type: media-control
entity: media_player.bailey_bedroom
- type: media-control
entity: media_player.bedroom
- type: media-control
entity: media_player.kitchen
- type: grid
cards:
- type: area
area: bailey_bedroom
- type: grid
cards: []
- type: grid
cards: []
- type: grid
cards: []
- type: grid
cards: []
cards: []
theme: back1
HI,
Remove the li after template like this.
.template {
text-align: center;
font-weight: 500!important;
}
Got it!
Thanks guys for the help
There seem to be a lot of them but hereâs how I did it.
bottomCard:
type: vertical-stack
cardOptions:
cards:
- !include Cartes/Carte-Controlesv.yaml
- !include Cartes/Carte-Agenda.yaml
cardStyle: |
:host {
width: 100%;
}
Hi, Thanks for your help,
would you please show me the content of this files.
- !include Cartes/Carte-Controlesv.yaml - !include Cartes/Carte-Agenda.yaml
dont have done any âexternalâ yaml files by today
Thanks
Carte-Agenda.yaml
type: custom:vertical-stack-in-card
cards:
- type: custom:atomic-calendar-revive
name: Agenda
entities:
- entity: calendar.michel
- entity: calendar.anniversaires
- entity: calendar.sports
fullDayEventText: Jour entier
language: fr
maxDaysToShow: 1
noEventText: "Aucun \xE9v\xE9nement aujourd'hui"
noEventsForNextDaysText: "Aucun \xE9v\xE9nement prochainement"
showHours: true
showMonth: false
showDate: false
showNoEventsForToday: true
showProgressBar: true
showWeekDay: false
showRelativeTime: false
styles:
card:
- text-transform: uppercase
- font-size: 125%
- border-radius: 0%
- font-weight: 100
- letter-spacing: 10px
- height: 15px
- border-top: 5px solid rgba(225, 225, 225, 0.60)
Carte-Controlesv.yaml
# ContrĂŽles et alerts
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
alignment: justify
chips:
- content_info: name
entity: light.lampes_salon_groupe_de_lumieres
icon: mdi:lamps
icon_color: yellow
name: Salon
hold_action:
action: more-info
tap_action:
action: toggle
double_tap_action:
action: none
type: entity
- content_info: name
entity: light.govee_t2_salon
icon: mdi:television-ambient-light
icon_color: yellow
name: Télé
hold_action:
action: more-info
tap_action:
action: toggle
double_tap_action:
action: none
type: entity
- content_info: name
entity: light.exterieure_avant_groupe_de_lumieres
icon_color: yellow
name: Avant
hold_action:
action: more-info
tap_action:
action: toggle
double_tap_action:
action: none
type: entity
- type: template
content: Caméras
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ContrÎle des Caméras
content:
type: entities
entities:
- !include ../Cartes-Pop-Up/PopUp-Cameras-De-Securite.yaml
icon: |-
{% if is_state('alarm_control_panel.blink_cameras_exterieures', 'armed_away') %}
mdi:cctv
{% elif is_state('alarm_control_panel.blink_cameras_exterieures', 'disarmed') %}
mdi:cctv-off
{% else %}
mdi:alert-circle-outline
{% endif %}
icon_color: |-
{% if is_state('alarm_control_panel.blink_cameras_exterieures', 'armed_away') %}
green
{% elif is_state('alarm_control_panel.blink_cameras_exterieures', 'disarmed') %}
red
{% else %}
yellow
{% endif %}
card_mod:
style: |
{% if is_state('alarm_control_panel.blink_cameras_exterieures', 'disarmed') %}
ha-card {
animation: borderPulse 2s ease-out infinite;
}
@keyframes borderPulse {
50% {
box-shadow: 0 0 20px red;
}
}
{% endif %}
- type: template
content: Aspirateurs
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Aspirateurs Roomba
content:
type: entities
entities:
- !include ../Cartes-Pop-Up/PopUp-Aspirateurs-Roomba.yaml
icon: |-
{% if is_state('vacuum.roomba_deux', 'docked') %}
mdi:robot-vacuum-off
{% elif is_state('vacuum.roomba_2', 'cleaning') %}
mdi:robot-vacuum
{% else %}
mdi:robot-vacuum-alert
{% endif %}
icon_color: |-
{% if is_state('vacuum.roomba_deux', 'docked') %}
green
{% elif is_state('vacuum.roomba_deux', 'cleaning') %}
yellow
{% else %}
red
{% endif %}
- type: template
content: MĂ©dias
icon: mdi:play-circle
icon_color: green
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: MĂ©dias
content:
type: entities
entities:
- !include ../Cartes-Pop-Up/PopUp-Medias.yaml
- type: template
content: Thermopompe
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ContrĂŽle de la thermopompe
content:
type: entities
entities:
- !include ../Cartes-Pop-Up/PopUp-Sensibo.yaml
icon: mdi:air-conditioner
icon_color: |-
{% if is_state('climate.sensibo_cuisine', 'off') %}
grey
{% else %}
yellow
{% endif %}
- type: template
content: Mise Ă jours
icon: |-
{% if states('sensor.nombre_de_mise_a_jour') |int(0) == 0 %}
mdi:update
{% elif states('sensor.nombre_de_mise_a_jour') |int(0) >= 1 %}
mdi:cellphone-arrow-down
{% else %}
mdi:alert-circle-outline
{% endif %}
icon_color: |-
{% if states('sensor.nombre_de_mise_a_jour') |int(0) == 0 %}
green
{% elif states('sensor.nombre_de_mise_a_jour') |int(0) == 0 %}
red
{% else %}
yellow
{% endif %}
card_mod:
style: |
{% if states('sensor.nombre_de_mise_a_jour') |int(0) >= 1 %}
ha-card {
animation: borderPulse 2s ease-out infinite;
}
@keyframes borderPulse {
50% {
box-shadow: 0 0 20px red;
}
}
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Mises Ă jours
content:
type: entities
entities:
- !include ../Cartes-Pop-Up/PopUp-Mises-A-Jours.yaml