Laffer I like your Garage icon😃. Can you share?
I have a similar one here: Home-Assistant-Icons/SVG/LTM-Garage at master · LilTrublMakr/Home-Assistant-Icons · GitHub
2 Likes
hi @eliel_elie, welcome.
@Laffer has shared his full config. the Garage icon can be found at this link
Thank you! 
Mason
Any chance you would be willing to share your sidebar.yaml?
Actually would love to see your entire setup.
It’s well explained here:
happy to provide my sidebar code. this is an about all that it can do.
dashboard
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards: !include sections/sidebar.yaml
##sections/sidebar
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_uptime
template: up_time
up_time button template
up_time:
show_icon: false
show_name: false
show_state: true
styles:
card:
- margin-top: -100px
- border-width: 0
state:
- font-size: 1vw
- font-family: SF Mono, Roboto
- opacity: 0.65
- padding: 0.55vw 1.2vw 0.5vw 1.2vw
sidebar button template
sidebar:
show_state: false
show_icon: false
tap_action:
action: none
name: >
[[[
if (entity) {
let attr = [];
for (let [k, value] of Object.entries(entity.attributes))
window.navigator.userAgent.match(/iPhone/i)
? k !== 'time' && k !== 'date' && value !== false && (attr += `<p>${k === 'greet' ? `<span class="iphone">${value}</span>` : `${value}`}</p>`)
: value !== false && (attr += `<p>${value}</p>`);
return attr;
}
]]]
extra_styles: >
#card {
padding: 0;
border-width: 0;
font-family: SF Display, Roboto, system-ui;
}
#container {
display: flex !important;
}
#name {
padding: 1vw 2.5vw 0 var(--custom-layout-card-padding);
white-space: normal;
text-align: left;
}
.iphone {
font-size: 1.5em;
color: rgba(255, 255, 255, 0.8);
}
.time {
font-family: sf mono, Roboto;
font-size: var(--sidebar-time-font-size);
font-weight: 300;
line-height: var(--sidebar-time-line-height);
letter-spacing: 0.11vw;
margin-left: -0.3vw;
color: rgba(255, 255, 255, 0.8);
}
.time-colon {
position: relative;
top: -.11em;
}
.time-period {
position: relative;
top: -.09em;
margin-left: 0.5vw;
font-weight: 200;
font-size: calc(var(--sidebar-time-font-size) * 0.3 );
}
.season {
font-size: calc(var(--sidebar-time-font-size) * 0.2 );
text-transform: capitalize;
}
@supports not (-moz-appearance:none) {
.time-colon {
position: relative;
top: -.11em;
}
}
p {
font-size: var(--sidebar-font-size);
line-height: var(--sidebar-line-height);
font-weight: 200;
letter-spacing: 0.07vw;
color: #6a7377;
}
b {
font-weight: 700;
}
p > b {
color: rgba(255, 255, 255, 0.8);
}
/* portrait */
@media screen and (max-width: 1200px) {
.time {
font-size: calc(var(--sidebar-time-font-size) * 1.4 );
line-height: calc(var(--sidebar-time-line-height) * 1.4 );
}
p {
font-size: calc(var(--sidebar-font-size) * 1.4 );
line-height: calc(var(--sidebar-line-height) * 1.4 );
}
}
/* phone */
@media screen and (max-width: 800px) {
.time {
font-size: calc(var(--sidebar-time-font-size) * 2.6 );
}
p {
font-size: calc(var(--sidebar-font-size) * 2.6 );
line-height: calc(var(--sidebar-line-height) * 2.6 );
letter-spacing: 0.16vw;
}
#name {
padding: 0 0 0 1vw;
}
}
sidebar theme
#################################################
# #
# SIDEBAR VERTICAL-STACK #
# #
#################################################
grid-layout$hui-vertical-stack-card$: |
#root {
background-color: rgba(0, 0, 0, 0.06);
border-radius: 0;
justify-content: space-between;
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
min-height: 100vh;
}
/* phone */
@media screen and (max-width: 800px) {
#root {
background-color: rgba(0,0,0,0);
border-right: none;
min-height: 100%;
margin-left: -0.8%;
margin-bottom: -6%;
}
#root > button-card:nth-child(2) {
display:none;
}
}
#################################################
# #
# SIDEBAR LAUNDRY TIMER #
# #
#################################################
grid-layout$hui-vertical-stack-card$hui-conditional-card:
.: |
hui-conditional-card {
display: flex;
justify-content: center;
}
/* phone */
@media screen and (max-width: 800px) {
hui-conditional-card > button-card {
zoom: 250%;
width: 100%;
filter: contrast(85%);
}
}
sidebar template sensor
I can provide sections at request and an explanation, I just CBF copying all the files into a post.
---
unique_id: sidebar
state: template
attributes:
time: "{{ states('sensor.template_sidebar_time') }}"
date: "{{ states('sensor.template_sidebar_date') }}"
greet: "{{ states('sensor.template_sidebar_greet') }}"
temperature: "{{ states('sensor.template_sidebar_temperature') }}"
rain: "{{ states('sensor.template_sidebar_rain') }}"
mason_timeline: "{{ states('sensor.template_sidebar_mason_timeline') }}"
washer: "{{ states('sensor.template_sidebar_washer') }}"
dryer: "{{ states('sensor.template_sidebar_dryer') }}"
bins: "{{ states('sensor.template_sidebar_bins') }}"
litter_box: "{{ states('sensor.template_sidebar_litter_box') }}"
cats_fed: "{{ states('sensor.template_sidebar_cats_fed') }}"
nas: "{{ states('sensor.template_sidebar_nas') }}"
my full config is a bit of a mess currently, I will provide a GitHub link when I get it all cleaned up. 2 or 3 more years at this rate…
10 Likes
Much appreciated thanks
Thanks for chiming in, Mason.
I’ve made changes to the garage icon since that screenshot, @eliel_elie.
The new garage icon is made similar to the house icon from Mattias.
The new icon: (The old is below, called icon_garage_large)
hass-config/button_card_templates.yaml at main · sagaland93/hass-config (github.com)
Planning on animating this.
2 Likes
in configuration.yaml
frontend: !include themes.yaml
This is an insanely good work and a LOT has gone in to make this functional. Now this is my first foray into HA for anything but looks like I have made about 5% progress in “adopting” this dashboard in 2-3 days and now getting impatient really. I know the readme says there’s no install button but really wish there was 
hi @kishu27, welcome
if you have any issues with setting up the dashboard feel free to post a question, after 3 days you should be more than 5% into setting things up, if not customised to your install. would you mind posting a screenshot of what you have so far?
I also tackled this dashboard in my 1st few days of using HA, I understand it can be confusing at time.
For faster assistance it is best to provide as much information as possible.
have you clicked check configuration, do you get the above message?
Have you tried reloading the front end themes?
Can you provide the your full configuration.yaml?
Can you provide more details on what you mean by you get “backend-selected”, a screenshot?
1 Like
without the other information that I requested, I can not help.
have you followed the INSTALL steps?
I installed hacs and the button cards. I copied the files. I took the files from the zip in my home assistant directory.
in my config.yaml
homeassistant:
name: Hem
latitude: !secret homeassistant_latitude
longitude: !secret homeassistant_longitude
elevation: !secret homeassistant_elevation
unit_system: metric
temperature_unit: C
time_zone: Europe/Stockholm
currency: SEK
packages: !include_dir_named packages
customize_domain:
automation:
initial_state: true
allowlist_external_dirs:
- /config
default_config:
frontend: !include themes.yaml
template: !include sidebar.yaml
In my homeassistant directory there is a file themes.yaml.
this is the start from the file :
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
themes:
tablet:
#enable mode
modes: {dark: {.: .}}
#edited default dark mode
ha-card-box-shadow: none
ha-card-background: none
Nothing has changed from the original files from Mattias…
Hello everybody,
I would like to ask for help on this video as an example that I will post.
After the last updates, now I have those 3 icons in the middle of the tablet, and the bottom bar (footer) very low. I have to scroll a lot to see it.
How can I change this?
Thanks
so you have not installed the following?
can you provide a screenshot of your home assistant directory?
hi Karma,
the side bar looks like a CSS issues,
are there any errors in the browser? (open the dashboard on a PC or Mac, using a browser, open developer tools and look at the console)
I have seen the footer pushed down the page like this both when a card has an error, and when the CSS is broken so this one is hard to say with the limited information.
you also look to be on a much older version of the dashboard than I have used (why not create a new dashboard using the more updated code?)
2 Likes
hi Falcon, all the information you have provided looks correct to me, this could be an issue with home assistant itself and nothing that you have missed.
looking around, some points I have seen are
- logging out and back in to home assistant,
- adding a new user and logging into the new user,
- trying a different browser,
- reinstalling home assistant completely.
sorry I could not be of more help