i tried removing the token like this, but didnt work.
if i use a camera entity then how can use the picture elements (for room names)?
from docs
type: picture-elements
image: /local/floorplan.png
elements:
- type: image
entity: camera.driveway_camera
camera_image: camera.driveway_camera
style:
top: 5%
left: 10%
width: 10%
sidebar_vacuum.yaml
- type: picture-elements
elements:
- type: custom:valetudo-map-card
entity: camera.map_data
...
- type: custom:button-card
...
#overlay buttons
thanks. problem solved now. i was actually using wrong camera entity name. following code works now
i guess i need to draw a transparent floorplan or a transparent rectangle.
- type: picture-elements
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' /%3E"
you can use a transparent image using this line, change viewbox for aspect ratio, 50 50 = square
hi,matt. I’m ready enjoy your design. I don’t know why i don’t have anything in my sidebar.
it’s just like the picture. cloud you tell me how to fix it?
Sorry Mattias but I think I didn’t quite know how to do that.
Let me tell you what I’ve done:
- I modified your circle template:
temperature:
template:
- base
- circle_on
variables:
circle_input: >
[[[ return entity === undefined || entity.entity_id; ]]]
- then I use it in ui-lovelace.yaml:
- type: custom:button-card
entity: switch.entrance_light
name: Entrance
template:
- base
- icon_spot
- temperature
- the temperature has the entity:
sensor.entrance_temperature
Where do I need to define custom code? In button_card_templates.yaml?
How do I define the usage of sensor based on name (for example I have temperature sensors for all rooms, all named as showed before - switches are switch.room_light and temperature sensors sensor.room_temperature)?
Regards,
Cristi
If you have a button-card with entity switch.entrance_light, using a template with entity.entity_id evaluates to itself. You want to access another entity states['sensor.entrance_temperature'].state
variables:
circle_input: >
[[[ return states['sensor.entrance_temperature'].state; ]]]
If you want that to be automatic (switch.*_light → sensor.*_temperature) you can try
[[[
let temp = entity.entity_id.replace('switch', 'sensor').replace('light', 'temperature');
return states[temp].state;
]]]
Thanks Mattias,
Works like a charm!! 
Hello there, a bit a late reply on a post from you in June.
I tried your neat sidebar design (just without the special dates) especially because of the buttons. So far it works for the buttons, but with the template code, the first grid of the mainframe is affected too, which can be seen on the this picture:
I tried different css selectors for the sidebar without success (probably because my css skills are very old and rusty 
). Any idea how to solve this problem?
Here is my template code:
#################################################
# #
# Sidebar Markdown Card #
# #
#################################################
"grid-layout$hui-markdown-card:first-of-type":
"$ha-card>ha-markdown":
.: |
ha-markdown {
padding: var(--custom-layout-card-padding) 2vw 0 var(--custom-layout-card-padding) !important;
pointer-events: none;
}
/* phone */
@media screen and (max-width: 800px) {
ha-markdown {
padding: 0 !important;
}
$: |
/* clock */
p {
font-family: SF Text;
font-size: var(--markdown-sidebar-clock-font-size);
font-weight: 200;
line-height: var(--markdown-sidebar-clock-line-height);
letter-spacing: -0.05vw;
color: var(--ha-card-header-color);
margin: 0 0 0 0;
}
/* colon */
p > span > span {
position: relative;
top: -.09em;
}
/* text */
p > font > b {
font-family: SF Display;
font-size: var(--markdown-sidebar-font-size);
line-height: var(--markdown-sidebar-line-height);
font-weight: 300;
letter-spacing: 0.06vw;
color: #6a7377;
margin: 0 0 0 0;
}
b > p {
font-family: SF Display;
font-size: var(--markdown-sidebar-font-size);
line-height: var(--markdown-sidebar-line-height);
font-weight: 300;
letter-spacing: 0.06vw;
color: var(--ha-card-header-color);
}
/* phone */
@media screen and (max-width: 800px) {
p {
font-size: calc(var(--markdown-sidebar-clock-font-size) * 2.6 );
line-height: calc(var(--markdown-sidebar-clock-line-height) * 2.6 );
}
p > font > b {
font-size: calc(var(--markdown-sidebar-font-size) * 2.6 );
line-height: calc(var(--markdown-sidebar-line-height) * 2.6 );
letter-spacing: 0.16vw;
}
b > p {
font-size: calc(var(--markdown-sidebar-font-size) * 2.6 );
line-height: calc(var(--markdown-sidebar-line-height) * 2.6 );
letter-spacing: 0.16vw;
}
}
#################################################
# #
# Weather Card #
# #
#################################################
"grid-layout$hui-element:first-of-type":
$: |
ha-card {
padding: 15% 10% 0 7% !important;
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
padding: 0 0 0 0 !important;
}
}
#################################################
# #
# SIDEBAR BUTTON CARDS #
# #
#################################################
"grid-layout$hui-grid-card:first-of-type":
.: |
hui-grid-card:first-of-type {
}
@keyframes fade {
0%, 30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* phone */
@media screen and (max-width: 800px) {
hui-grid-card:first-of-type {
align-items: flex-start;
}
}
$: |
#root {
padding: 30% 13% 13% 13%;
gap: 8% !important;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
padding: 0 0 0 60%;
}
}
And here is my code:
cards:
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: custom:vertical-stack-in-card
view_layout:
grid-area: sidebar
mode: vertical
cards:
- type: markdown
content: |
{% set attributes = states.sensor.template_sidebar.attributes | default %}
{% for template in attributes %}
{{ state_attr('sensor.template_sidebar', template) }}
{% endfor %}
style: #force style - duplicate of themes markdown
{
ha-markdown: { .: "ha-markdown{padding:var(--custom-layout-card-padding) 2vw 0 var(--custom-layout-card-padding)!important;pointer-events:none}@media screen and (max-width:800px){ha-markdown{padding:0!important}}", $: "p{font-family:SF Display;font-size:var(--markdown-sidebar-font-size);line-height:var(--markdown-sidebar-line-height);font-weight:300;letter-spacing:.06vw;color:#6a7377}p>span{font-family:SF Text;font-size:var(--markdown-sidebar-clock-font-size);font-weight:200;line-height:var(--markdown-sidebar-clock-line-height);letter-spacing:-.05vw;margin-left:-.3vw;color:var(--ha-card-header-color)}p>span>span{position:relative;top:-.09em}p>b{color:var(--ha-card-header-color)}@media screen and (max-width:1200px){p>span{font-size:calc(var(--markdown-sidebar-clock-font-size) * 1.4);line-height:calc(var(--markdown-sidebar-clock-line-height) * 1.4)}p{font-size:calc(var(--markdown-sidebar-font-size) * 1.4);line-height:calc(var(--markdown-sidebar-line-height) * 1.4)}}@media screen and (max-width:800px){p>span{font-size:calc(var(--markdown-sidebar-clock-font-size) * 2.6);line-height:calc(var(--markdown-sidebar-clock-line-height) * 2.6)}p{font-size:calc(var(--markdown-sidebar-font-size) * 2.6);line-height:calc(var(--markdown-sidebar-line-height) * 2.6);letter-spacing:.16vw}}",},
}
- type: conditional
view_layout:
grid-area: sidebar
conditions:
- entity: input_boolean.laundry_display
state: "on"
card:
type: custom:button-card
entity: timer.laundry
template: laundry
- type: "custom:hui-element"
card_type: weather-forecast
entity: weather.dark_sky
show_forecast: false
- type: grid
view_layout:
grid-area: sidebar
columns: 4
cards:
- type: button
icon: mdi:tune-vertical
tap_action: !include lovelace/popups/sidebar_settings.yaml
- type: button
icon: mdi:cctv
tap_action: !include lovelace/popups/sidebar_webcams.yaml
- type: button
icon: mdi:information-outline
tap_action: !include lovelace/popups/information_system_sidebar.yaml
- type: button
icon: mdi:arrow-up-bold-circle-outline
tap_action: !include lovelace/popups/information_update_sidebar.yaml
##########################################################################
# #
# * MAIN * #
# #
##########################################################################
####################################################################
# #
# * Living Room * #
# #
####################################################################
- type: grid
title: Wohnzimmer
view_layout:
grid-area: living_room
columns: 2
cards:
- type: custom:button-card
entity: light.livingroomtv #hue led strip
name: LED Strip
template:
- light
- icon_hue
- type: custom:button-card
entity: light.livingroom #ikea tradfri lamp
name: Stehlampe
template:
- light
- icon_shade
- type: custom:button-card
entity: sensor.aqara_temp_1_temperature
name: Climate
tap_action: !include lovelace/popups/climate_livingroom.yaml
template:
- base
- climate
- icon_temperature
- type: custom:button-card
entity: media_player.panasonictv
name: TV
hold_action: !include lovelace/popups/multimedia_tv_livingroom.yaml
template:
- base
- icon_tv
- loader
Any help is appreciated 
Hey @RoRoW, I’ve changed the sidebar to a vertical-stack but have not pushed it to github yet, wait a few days if you’re interested
Hi Matt,
I’ve noticed a little bug on current implementation. When switching light on or off he circle disappears and is displayer after 5-10s.
This issue does not happen when using your circle template.
Also noticed that my fonts are different that your layout even if I have the fonts in correct location.
type: custom:button-card
entity: switch.a
triggers_update:
- sensor.b
fonts; clear browser cache
Morning Matt,
Its several days studying your great code but I can’t manage to make it work with Lovelace-state-switch
I intend to change the non sidebar part of the grid depending of the state of an input_select.
When I do this the CSS injects on the grid card doesn’t work and you can see the Salon is moved upwards, the padding is not right and so on.
So the question is how we can make to keep the CSS on the state-switch sub cards or using a different method for multi story housing (conditional cards work even worse inside grids).
Thanks
The code is
- type: custom:state-switch
entity: input_select.botonpiso
transition_time: 0
transition: none
states:
Piso1:
type: grid
title: Salón
view_layout:
grid-area: salon
columns: 2
cards:
- type: custom:button-card
entity: light.luz_esquina
name: Esquina
template:
- light
- icon_shade
- type: custom:button-card
entity: light.luz_lamparita
name: Lamparita
template:
- light
- icon_shade
- type: custom:button-card
entity: light.luz_mesa_alta
name: Mesa Alta
template:
- light
- icon_shade
- type: custom:button-card
entity: light.luz_tv
name: Mesa TV
template:
- light
- icon_shade
I unfortunately don’t use state-switch so I can’t help you there.