Attempted to replace the side bar with a vertical stack since I’d like the graphical weather and don’t have a Dark Sky acct anyways so I couldn’t be bothered to simulate the sensors with SMHI.
However… the sidebar suddenly renders with a huge height, pushing the grid way down to 2000+px in height.
Any ideas why this is happening?
@Vasco Here is what my sidebar looks like now.
Here is my code:
- 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 %}
- type: "custom:hui-element"
card_type: weather-forecast
entity: weather.regina
show_forecast: false
- type: "custom:hui-element"
card_type: "custom:auto-entities"
card:
type: entities
filter:
include:
- entity_id: sensor.anniversary_xyzs_birthday
state: <30
- entity_id: sensor.anniversary_xyzs_birthday
state: <30
- entity_id: sensor.anniversary_first_day_of_summer
state: <30
- entity_id: sensor.anniversary_first_day_of_fall
state: <30
- entity_id: sensor.anniversary_first_day_of_spring
state: <30
- entity_id: sensor.anniversary_first_day_of_winter
state: <30
- entity_id: sensor.anniversary_our_anniversary
state: <30
- entity_id: sensor.anniversary_xyzss_birthday
state: <30
- entity_id: sensor.anniversary_halloween
state: <30
- entity_id: sensor.anniversary_christmas
state: <30
- entity_id: sensor.anniversary_xyzs_birthday
state: <30
- entity_id: sensor.anniversary_good_friday
state: <30
show_empty: false
sort:
method: state
numeric: true
- type: grid
view_layout:
grid-area: sidebar
columns: 4
cards:
- type: "custom:button-card"
color_type: blank-card
- type: button
icon: mdi:robot-vacuum
# tap_action:
# !include popup/sidebar_vacuum.yaml
- type: button
icon: mdi:cctv
# tap-action:
# !include popup/sidebar_cameras.yaml
- type: button
icon: mdi:tune-vertical
# tap-action:
# !include popup/sidebar_settings.yaml
I’ve commented out the popups as I don’t have them built out yet and I “xyz’d” out the innocent in my anniversary’s card 
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;
}
}
#################################################
# #
# Special Dates Card #
# #
#################################################
"grid-layout$hui-entities-card":
$: |
ha-card {
height: 33vh !important;
padding: 10% 5% 0 0 !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%;
}
}
Special thanks to @Mattias_Persson for the awesome template and the suggestion to use a vertical stack card.
Nice work mate. That looks amazing!
Does anyone know if it’s possible to change a custom:button-card style based on the lovelace view you are on?
Just thinking about navigation buttons and would like the active view nav button to be different.
I’ve done this with the sidebar card, but I’d ideally not like to rely on another card that could go away at any time. Plus, doing it all myself means the placement of elements is under my control. 
You should head over to the correct thread, since that is a very specific button-cards question. Anyway, I asked this myself a while ago and it should be possible, though it will require some work 
I experimented with this and had an issue with the cards updating (and showing the correct color when active:
However, I haven’t tried that code from Marius in the first link. I’ll try sometime and hope it works. For now I have kept my own implementation, which is a row of button cards on each dashboard. And then give the button that is active a different color on the dashboard it’s in. So each dashboard contains the same buttons, but each dashboard has a different one with an ‘active’ style color.
Ah yeah I see what you are doing.
I thought of doing that as well, but it means that each view would have to have the same sidebar. Not impossible, but would just be repeated code which I was trying to stay away from.
Thanks for the ideas though! It gives me a good starting point.
Yes, the solution is the first link of Marius. I haven’t gotten around that myself yet, so I still use the ‘duplicate on each dashboard and change 1 button-card’-method.
Hi @Schocker thanks for sharing! got it almost, but now have same issue with the issue you had with the padding.
Can you tell me how you fixed that so I have it fixed too? Thanks!
Interested too, have the same padding problem, and the markdown with hour and date is out from the screen on the left.
Thx !
In my case I removed the COVID markdown card but forgot to remove the template code that referred to the COVID markdown card. Once I removed the template code for the COVID markdown, the padding worked as expected.
Alright so the concept of this is absolutely amazing and this dashboard looks incredible - after about 12 hours I have finally got to the stage that the dashboard is installed but doesn’t look anything like the above…
Is there anyway to get this installed as a package? I have just realized the amount of rework that I need to do to even get this to work for my house and I have no idea where to start.
i.e. we have a robot vaccum but I have no idea how to make that show up. We don’t have Plex here so how do I remove that… We don’t have lights but we have an alarm system I need to add and a pool. Anyone have any ideas where I can start?
It’s a matter of getting familiar with yaml.
You used lovelace web editor, which is not right. You should download his pack and merge it manually with your files.
For plex, just remove it from ui-lovelace.yaml file. 5 sec work.
Thanks for pointing me into the right direction @Schocker
Thanks Vasco - so yes, I went and copied all the relevant files into my config using SAMBA. I then copied the lovelace piece of the confiuration.yaml into my configuration.yaml and ended up with the image above… Is there something else I need to copy across to get the dashboard looking the same as the original?
Where do I go about editing the sidebar, the titles for the main cards on the homescreen? and is there still a concept of rooms or areas with this dashboard?
Thank you!
So where do I paste this code exactly?
Solved it to some extent… though you might have found a better way for your vertical stack… will have a look at your code as well
So basically:
ui-lovelace.yaml file defines how the layout looks. Which cards are shown etc. If you read the file, you see that it’s devided into sections: sidebar, living room etc (all swedish though, because the designer is swedish) but you can rename those things to english or your own language. Learn how the grid is used and what the basics are: https://grid.layoutit.com/
button_card_template.yaml is a file where all different button designs are configured. So when you add a button to ui-lovelace.yaml and give it the template: - light
That it acts as a light. As in, one time pressing show if its on or off, percentage if dimmable, and when you hold press it for 2 sec and release, to show you a popup with some more stuff you can use to control the light bulb if supported.
Other things like icons are also defined here (lamp, door, ps5, plex etc). Here you can modify things to your liking. @Mattias_Persson designed this dashboard for himself. And he shared this template with us all as an inspiration. It’s not meant as a package that you can pick up and install. If you have that desire, because things are maybe a bit difficult atm, then the default lovelace is your best option or a package like dwains theme. GitHub - dwainscheeren/dwains-lovelace-dashboard: An fully auto generating Home Assistant UI dashboard for desktop, tablet and mobile by Dwains for desktop, tablet, mobile
Take a look to how mattias set up sensors etc. Some stuff you can copy paste, but most stuff needs to be modified to your own config. For example, an alarm. Mattias has no alarm at home, so this design does not cover that. You’d have to make your own button templates and configure it into the design. Respecting the design mattias put down, or it’ll look a mess of different designs. Lol
Things like temperature sensors, humidity sensors, (i am talking about sensors created by a Xiaomi Mijia for example). I have those so I had to design, create it myself. Garbage tiles, also not in his config. Agenda, also not there.
Therefore, it’s a start or maybe a basic tempate with a few examples. But you need the skills, time and effort to make it look like a dashboard you want.
Some good posts from @Mattias_Persson
Also, I suggest you read the entire topic. I know its a lot of posts. But i got a lot of good info from here and there that explained a few questions I had. And Mattias does a good job helping others here in this topic.
In the ui-lovelace.yaml file under the respective grid section. See my previous post
Hello everybody.
Question. The inserts to the database are executed automatically, right?
I ask because when it makes an insert it does not take into account the first field of the base which is an id.
Thanks
sqlalchemy.exc.IntegrityError: (MySQLdb._exceptions.IntegrityError) (1364, "Field 'state_id' doesn't have a default value")
[SQL: INSERT INTO states (domain, entity_id, state, attributes, event_id, last_changed, last_updated, created, old_state_id) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s)]
[parameters: ('person', 'person.pablo', 'home', '{"editable": false, "id": "pablo", "latitude": -34.6233206, "longitude": -58.4354447, "gps_accuracy": 18, "source": "person.pablo", "user_id": "89e2395f8c884aed8ffc76dffd3993cb", "friendly_name": "Pablo", "entity_picture": "/api/image/serve/c8ccf52da296b68a51ba64c697b754f5/512x512"}', 610243, datetime.datetime(2021, 6, 19, 0, 2, 28, 876290, tzinfo=datetime.timezone.utc), datetime.datetime(2021, 6, 19, 0, 2, 28, 876290, tzinfo=datetime.timezone.utc), datetime.datetime(2021, 6, 19, 0, 2, 28, 876290, tzinfo=datetime.timezone.utc), None)]
(Background on this error at: http://sqlalche.me/e/14/gkpj)