did you manage to solve the problem?
Iās such a moron, I must remove my question to avoid any ridicule 
What am I doing wrong that the bottomCard is not showing at the bottom ?
The best thing is that it showed up once, but after refreshing the page it no longer worksā¦
Iāve never been able to use it stably, Iāve tried it once before with weather.
title: Dom
sidebar:
digitalClock: true
date: true
dateFormat: dddd DD MMMM YYYY
hideTopMenu: false
width:
desktop: 20
mobile: 0
tablet: 30
sidebarMenu:
- action: navigate
name: Home
navigation_path: /lovelace/default_view
- action: navigate
name: BezpieczeÅstwo
navigation_path: /lovelace/1
- action: navigate
name: OÅwietlenie i zasilanie
navigation_path: /lovelace/2
- action: navigate
name: NagÅoÅnienie
navigation_path: /lovelace/3
- action: navigate
name: Klimatyzacja i Ogrzewanie
navigation_path: /lovelace/4
- action: navigate
name: Ogrzewanie
navigation_path: /lovelace/5
- action: navigate
name: Kamery
navigation_path: /lovelace/6
- action: navigate
name: Energia
navigation_path: /lovelace/energia
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: conditional
conditions:
- entity: media_player.volumio_salon
state: playing
card:
type: custom:mushroom-media-player-card
entity: media_player.volumio_salon
show_volume_level: true
use_media_info: true
volume_controls:
- volume_set
- volume_mute
layout: horizontal
fill_container: false
media_controls: []
card_mod:
style: |
ha-card {
box-shadow: 0px 8px 10px 0px;
border-radius: 0px;
position: absolute;
bottom: 120px;
border-top: 0px solid #CCC;
left: 0px;
width: 100%;
}
style: |
:host {
--sidebar-background: #F5F5F5;
--sidebar-text-color: #333;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #333;
--clock-middle-border: #000;
}
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 20px;
font-size: 220px;
line-height: 30px!important;
font-weight: 700;
letter-spacing: 5px;
}
.date {
text-align: center;
font-size: 20px;
}
.bottom {
display: grid!important;
}
template: |
<li>
{% if now().hour < 5 %} Dobry wieczĆ³r,
{% elif now().hour < 12 %} DzieÅ dobry,
{% elif now().hour < 18 %} DzieÅ dobry,
{% else %} Dobry wieczĆ³r, {% endif %}
</li>
<li>Temperatura na zewnÄ
trz
{{states('sensor.salon_outside_temperature')}}Ā°.</li> <li> Obecnie jest
{{states('sensor.weather_pl')}}.</li>
<li>
{% if states('sensor.number_of_lights_on') | float > 0 %} <li>WÅÄ
czone jest {{states('sensor.number_of_lights_on')}}{{'\U0001F4A1'}}</li>X {% endif %}
<li>
{% if states('sensor.number_of_mediaplayer') | float > 0 %} <li>DziaÅa w tej chwili {{states('sensor.number_of_mediaplayer')}} odtwarzaczy {{'\U0001F4FB'}}.</li>X {% endif %}
<li>PobĆ³r prÄ
du w mieszkaniu to {{states('sensor.pobor_wat')}} W.</li>
Same thing happened to me also. Simple design, bottomCard section not showing up anymore
Hi, did you get this to work? I have tried to but keep getting a template error.
How do I get browser mod popup to work with this. I have a single camera feed that Iād prefer to run from a popup rather than a new view but I donāt get anything showing in the popup. The relevant section is below.
- action: call-service
service: browser_mod.popup
service_data:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Camera
content:
type: picture-entity
show_state: true
show_name: true
camera_view: live
entity: camera.cctv_camera
camera_image: camera.cctv_camera
I have also tried the following as well. Neither work.
- action: call-service
service: browser_mod.popup
service_data:
type: picture-entity
show_state: true
show_name: true
camera_view: live
entity: camera.cctv_camera
camera_image: camera.cctv_camera
I do get a popup on both but nothing is displayed.
Nope, apparentely is a ābugā or limitation from sidebar.
Hi Martin, did you ever work out the line break? if so could you share please.
No - I gave up and started using layout-card. Using this I could pretty much achieve the same look without the annoyances (no offence to the dev - itās a great idea).
It also allows for a more UI based build as the sidebar is just a column of cards largely.
4 Likes
Thanks Martin your Dashboard looks great.
1 Like
Martin, this looks awesome. Iām getting frustrated with the sidebar card as well. Would you mind showing your code for the layout card so I could see how you set it up?
Here you go. Iām using Layout card to create columns which everything goes into:
grid-template-rows: null
grid-template-columns: 25% 37.5% 37.5%
type: vertical-stack
cards:
- type: custom:gap-card
height: 30
- entity: sensor.time
show_icon: false
show_label: false
show_name: false
show_state: true
styles:
state:
- font-size: 4em
- font-weight: 200
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- border: 0px solid
- height: 50px
- background-color: hsla(0, 0%, 0%, 0)
type: custom:button-card
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px 0px 0px 0px;
}
- entity: sensor.date_formatted
show_icon: false
show_label: false
show_name: false
show_state: true
styles:
state:
- font-size: 1.4em
- font-weight: 200
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- background-color: hsla(0, 0%, 0%, 0)
- height: 55px
type: custom:button-card
card_mod:
style: |
ha-card {
margin: 0px 0px 0px 0px;
border:0px;
box-shadow: none;
}
- show_name: true
show_icon: false
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace-wallpanel/home
entity: group.kitchen
styles:
name:
- font-size: 1.4em
- font-weight: 200
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- height: 45px
card_mod:
style: |
ha-card {
border: 0px;
border-top: solid 1px #555555;
margin: 0px 0px 0px 0px;
-webkit-border-radius: 0px;
background-color: hsla(0, 0%, 0%, 0);
text-align: left;
justify-self: left;
box-shadow: none;
}
- show_name: true
name: Overview
show_icon: false
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace-wallpanel/overview
entity: group.kitchen
styles:
name:
- font-size: 1.4em
- font-weight: 200
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- height: 45px
card_mod:
style: |
ha-card {
border: 0px;
margin: 0px;
-webkit-border-radius: 0px;
box-shadow: none;
background-color: hsla(0, 0%, 0%, 0);
}
- show_name: true
name: Security
show_icon: false
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace-wallpanel/security
entity: group.kitchen
styles:
name:
- font-size: 1.4em
- font-weight: 200
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- height: 45px
card_mod:
style: |
ha-card {
box-shadow: none;
border: 0px;
margin: 0px;
-webkit-border-radius: 0px;
background-color: hsla(0, 0%, 0%, 0);
}
- show_name: true
name: Downstairs
show_icon: false
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace-wallpanel/downstairs
entity: group.kitchen
styles:
name:
- font-size: 1.4em
- font-weight: 200
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- height: 45px
card_mod:
style: |
ha-card {
box-shadow: none;
border: 0px;
margin: 0px;
-webkit-border-radius: 0px;
background-color: hsla(0, 0%, 0%, 0);
}
- show_name: true
name: Upstairs
show_icon: false
type: custom:button-card
tap_action:
action: navigate
navigation_path: /lovelace-wallpanel/upstairs
entity: group.kitchen
styles:
name:
- font-size: 1.4em
- font-weight: 200
- justify-self: left
- padding: 0px 0px 0px 20px
card:
- height: 45px
card_mod:
style: |
ha-card {
box-shadow: none;
margin: 0px 0px 0px 0px;
-webkit-border-radius: 0px;
background-color: hsla(0, 0%, 0%, 0);
border: 0px;
border-bottom: solid 1px #555555;
}
- type: markdown
content: |-
{% 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 %}
card_mod:
style: |
ha-card {
box-shadow: none;
font-size: 22px;
font-weight:200;
margin: 0px 0px 0px 0px;
background-color: hsla(0, 0%, 0%, 0);
-webkit-border-radius: 0px;
border: 0px;
}
- square: false
columns: 3
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: weather
entity: weather.met_office_heanor_3_hourly
show_temperature: false
show_conditions: true
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.pagoda_temperature
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_select.bins
state: Recycling
chip:
type: entity
entity: sensor.bin_day
icon_color: grey
name: Recycling
icon: mdi:trash-can
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- entity: input_select.bins
state: Refuse
chip:
type: entity
entity: sensor.bin_day
icon_color: green
name: Refuse
icon: mdi:trash-can-outline
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- entity: input_select.bins
state: Garden
chip:
type: entity
entity: sensor.bin_day
icon_color: brown
name: Garden
icon: mdi:trash-can
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
use_entity_picture: false
alignment: center
- type: markdown
content: |-
{% if "on" in states('binary_sensor.front_door_sensor') %}
Front Door is open {% endif %}
{% if "on" in states('binary_sensor.back_door_sensor') %}
Back door is open {% endif %}
{% if "on" in states('binary_sensor.bifold_door_sensor') %}
Bifolds are open {% endif %}
{% if "on" in states('binary_sensor.garage_door_internal') %}
Internal garage door is open {% endif %}
theme: ios-dark-mode
card_mod:
style: |
ha-card {
box-shadow: none;
border: 0px;
margin: 0px;
-webkit-border-radius: 0px;
background-color: hsla(0, 0%, 0%, 0);
}
- square: false
columns: 2
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /lovelace-wallpanel/security
entity: alarm_control_panel.alarmo
show_state: true
icon_height: 60px
name: Security
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: input_boolean.night_switch
show_state: true
name: Night night
icon_height: 60px
4 Likes
Wow! thank you for the quick reply. Iām also using layout card, but Iām relatively new to it. On this portion:
grid-template-rows: null
grid-template-columns: 25% 37.5% 37.5%
does that just go at the top of the raw config, or where to I put that? (sorry for the dumb comments)
gotcha! Youāre the best Martin! Thank you for the help!
1 Like
The conversations in this post are great! Lots of awesome detail in here and that is great. The one question I have not found an answer to is: can the background of the sidebar be made transparent?
I have an amazing photo of a lake very near our property that Iām wanting to use as the dashboard background. The visual look Iām going for is for the sidebar to be a mostly transparent white, around 25% or soā¦
The background is defined outside the views in the dashboard code so it is loaded on all views in the dashboard.
title: "Development Dashboard"
background: >-
center / cover no-repeat
url("/media/local/IMG_0003.jpg?authSig=<a long string>
fixed
sidebar:
title: Dev Dashboard
Iāve tried a couple different methods to style this but none have worked.
style: |
:host {
--sidebar-background: rgba(255,255,255,0.25);
}
Iāve also tried adding the ha-card style.
ha-card {
background: transparent !important;
}
I can get other solid colors to work, but nothing I try to apply any transparency has any affect on the outcome.
Has anyone had any success with this?
Hey, is there a way so you donāt have to repeat this on every page?
And there is the downside! It would be great if you could just have a master bit of code that would populate on every page.
Just spotted this - not used it yet, but could be the answer:
1 Like
looks promising, ill give it ago when I get some free time