Hiya ASNNetworks.
I see you are dutch, how to get in contact with you?
i would like to create a sidepanel as you are using on this picture on the left side.
Big clock and date, plus the greeting.,
would be nice if there could be a state of a presence of people at home. i do use pictures now, but i would like them to grey-out on status away and light up on status at home. in the card i use its not functioning. best regards Johan.
I created the .svg file in Figma, after saving I opened it in a text editing program and animated it in notepad++
fixed!
title_button:
styles:
card:
- background: none
- padding: 0px 0px 0px 0px
name:
- justify-self: left
- font-size: 2.4vw
- font-family: SF Text
- font-weight: 500
- line-height: 0
- color: rgba(255, 255, 255, 0.8)
- letter-spacing: 0.5px
- padding: 1vw 0px 2vw 0px
extra_styles: |
/* default */
#name {
font-size: 2.4vw !important;
line-height: 0 !important;
font-family: SF Text !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.8) !important;
padding: 1vw 0 2vw 0 !important;
}
/* portrait */
@media screen and (max-width: 1200px) {
#name {
font-size: 3.3vw !important;
line-height: 1.1vw !important;
}
}
/* phone */
@media screen and (max-width: 800px) {
#name {
font-size: 5.5vw !important;
line-height: 6vw !important;
margin: 2vw 0 0 0 !important;
}
}
I never used this config/project. I only used it in the beginning to understand the usage of pictures elements and css positions. But I have switched from picture elements all together and use layout-card for layouts a long time ago. Also got rid of sidebar. So nothing much I can do for you regarding this topic.
This project has changed anyway. I believe he now uses layout card as well. For further assistance you should just drop some code and ask help of other users that use this projects and maybe the creator can help you as well. I believe he is very active with this project.
Hiya, thank you for your reply.
The thing i like is the big time and the greeting in one card, i have created one myself mut the size is not optimal, :)
im not a programmer by origin so im in need of some advice - help :).
thnx again and have a nice day .
Johân
You can always use markdown card or custom:button-card for that. When using markdown you need card-mod to change style options like font size. When using button-card, you can change the styles directly as variables. I used Markdown, but HA team keeps changing how it works. So after each update I had to re-work all code. Ultimately with a later update Markdown and card-mod (when combined) had terrible performance, resulting in very sluggish Lovelace speeds. I decided to ditch Markdown all together and use button-card. I’m not sure it it works better now, but seeing as how they kept chaning Markdown (making it worse each time) I stay away from that card now.
Make sure you read the ReadMe on custom cards through the Github pages (first post in each thread of custom cards link to their respective Github) (like card-mod and button-card) so you know how they operate. If you need help you can always ask in the threads I linked (always post code of what you have and explain what issue you’re having).
P.S. I’m not a programmer either, but I have learned a lot by just trying and studying Github and other peoples code in the forum
have been following this thread as a lurker mostly, but now tried to integrate some of the nice animated icons. So I successful integrated the button-card-templates, and tested a few. got it to work mostly, had to do some editing from Swedish to English/dutch 
yet, there’s this issue I see in Safari Mac, which doesnt pickup the format or icons completely (only Tv Auditorium and Network library show as they should):
while Google Chrome does behave as expected, including the animations (so I know the templates are installed correctly):
would there be any reason for this?
- type: horizontal-stack
cards:
- type: custom:button-card
template:
- light
- icon_spot
entity: light.kist
- type: custom:button-card
entity: media_player.appletv_auditorium
name: Tv Auditorium
template:
- base
- icon_tv
- loader
- type: custom:button-card
entity: switch.network_library
name: Network library
template:
- base
- icon_imac
- loader
- lock
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.printer_library
name: Printer library
template:
- base
- icon_ps5
- loader
- type: custom:button-card
entity: switch.symfonisk_dining
name: Symfonisk
template:
- base
- icon_hue
- loader
Hello people. Someone could help me. I can’t get the card to occupy 100% of the button’s size. Remove the theme to see how much the card occupied and an unoccupied space is seen on the left side.
Thank you
#################################################
# #
# Temperatura #
# #
#################################################
- type: grid
title: Acuario
view_layout:
grid-area: temperatura
columns: 1
cards:
- type: custom:button-card
show_state: false
show_name: false
show_label: false
custom_fields:
temp:
card:
type: custom:thermostat-dark-card
entity: climate.acuario
template:
- climatizacion
#################################################
# #
# Climatizacion #
# #
#################################################
climatizacion:
show_state: false
show_icon: false
show_name: false
styles:
card:
- font-family: Sf Text
- border-radius: var(--custom-button-card-border-radius)
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- padding: 1% 1% 1% 1%
- --mdc-ripple-color: >
[[[
return 'rgba(255, 255, 255, 0.3)';
]]]
- color: >
[[[
return 'rgba(255, 255, 255, 0.3)';
]]]
- background-color: >
[[[
return 'rgba(115, 115, 115, 0.2)';
]]]
Thank you very much to all the sharers in this post， I have a new problmes:
I want to change the display ratio of the panel from 16:9 to 4:3. Which positions of the code need to change?
Please forgive me for my poor English, this problem description depends on google translation,thank you.
Yes, you must add height: 100% to .swiper-container to themes.yaml. Code below:
$swipe-card$:
hui-horizontal-stack-card$:
.: |
hui-conditional-card {
margin: 0 !important;
}
.: |
.swiper-container {
height:100%;
}
Hey, I am having a super hard time setting this up. How do I go about implementing this in my dashboard?
Dude, seriously… Congratulations for what you have done here. bunch of complex codes and you just made understandable to everyone, even giving some detailed information how you got there. im spending some time on your code and its getting exactly where i wanted to be since like a year ago. Thanks!!
i wish there was a video showing step by step.
I’m facing the same problem, but right now… I have everything up to date. Did something broke in the meantime?
Hi friends. Does anyone know why this is happening? If I refresh several times the screen is accommodated. Thank you
Yes, I started over again last month based on the last update of mattias. Suggest/advise you to do the same, since a lot changed (and became much better)
I tried to change to verticla-stack as matt did. But something wierd is happening.
The sidebar has no styles, the buttons appear not on the bottom and the cards from “wohnzimmer” are gone.
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar_template
- type: grid
cards:
- type: button
icon: mdi:lightning-bolt
tap_action: !include popup/sidebar_batterie.yaml
hold_action:
action: none
- type: button
icon: mdi:information-outline
tap_action: !include popup/sidebar_information.yaml
hold_action:
action: none
- type: button
icon: mdi:arrow-up-bold-circle-outline
tap_action: !include popup/sidebar_update.yaml
hold_action:
action: none
template.yaml
template:
####################################################
# #
# TEMPLATE #
# #
####################################################
sensor:
- unique_id: sidebar
state: template
attributes:
time: >
{% set hours = now().strftime('%H') %}
{% set minutes = now().strftime('%M') %}
<span class="time">
{{ hours }}<span class="time-colon">:</span>{{ minutes }}
</span>
date: |
<font color='#6a7377'><b>
{%- if strptime(states('sensor.date'), '%Y-%m-%d').day != null %}
{%- set days = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'] %}
{%- set months = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'] %}
{{- days[now().weekday()] }}<br>
{{- strptime(states('sensor.date'), '%Y-%m-%d').day }} {{ months[now().month-1] }}
{%- endif -%}
</b></font>
greet: |
<b>
{% set time = now().hour %}
{% if time <= 1 %} Gute Nacht {{'\U0001F611'}}
{% elif time <= 3 %} Gute Nacht {{'\U0001F62A'}}
{% elif time <= 5 %} Gute Nacht {{'\U0001F634'}}
{% elif time <= 7 %} Guten Morgen {{'\U0001F4A9'}}
{% elif time <= 9 %} Guten Morgen {{'\u2615\uFE0F'}}
{% elif time <= 10 %} Guten Morgen {{'\U0001F642'}}
{% elif time <= 13 %} Guten Tag {{'\U0001F60A'}}
{% elif time <= 15 %} Guten Tag {{'\U0001F60E'}}
{% elif time <= 17 %} Guten Tag {{'\U0001F44B\U0001F3FB'}}
{% elif time <= 19 %} Guten Abend {{'\U0001F44B\U0001F3FB'}}
{% elif time <= 22 %} Guten Abend {{'\U0001F60C'}}
{% elif time <= 23 %} Guten Abend {{'\U0001F974'}}
{% else %} Guten Abend {{'\U0001F974'}}
{% endif %}
</b>
active: |
<b>
{% set lights = [
states.light.wohnzimmer_licht,
states.light.kueche_licht,
states.light.kueche_licht_speis,
states.light.kueche_licht_spuele,
states.light.schlafzimmer_licht,
states.light.wohnzimmer_licht_tv,
states.switch.garage_licht
] %}
{% set switches = [
states.switch.werkstatt_makitaladegeraet,
states.switch.kueche_licht,
states.media_player.wohnzimmer_tv
] %}
{% set lights_on = lights | selectattr('state','eq','on') | list %}
{% set lights_name = lights | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
{% set switches_on = switches | selectattr('state','eq','on') | list %}
{% set switches_name = switches | selectattr('state','eq','on') | map(attribute='name') | join(', ') %}
{% if (lights_on | length == 0) and (switches_on | length > 0) %}
{{ switches_name | regex_replace(',([^,]*)
button-card-templates.yaml
sidebar_template:
show_state: false
show_icon: false
tap_action:
action: none
name: |
[[[
if (entity) {
let attributes = '';
for (const [key, value] of Object.entries(entity.attributes)) {
value != false ? attributes += `<p>${value}</p>` : null;
}
return attributes;
}
]]]
extra_styles: |
#card {
padding: 0;
}
#container {
display: flex !important;
}
#name {
padding: 1.8vw 2.5vw 0 var(--custom-layout-card-padding);
white-space: normal;
text-align: left;
}
.time {
font-family: SF Text;
font-size: var(--sidebar-time-font-size);
font-weight: 200;
line-height: var(--sidebar-time-line-height);
letter-spacing: -0.05vw;
margin-left: -0.3vw;
color: rgba(255, 255, 255, 0.8);
}
.time-colon {
position: relative;
top: -.09em;
}
p {
font-family: SF Display;
font-size: var(--sidebar-font-size);
line-height: var(--sidebar-line-height);
font-weight: 300;
letter-spacing: 0.06vw;
color: #6a7377;
}
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;
}
}
In ui-lovelace.yaml somewhere between line 3 and 45 the theme describes the grid layout it uses for several screen sizes
You should change the grid-template-columns, grid-template-rows and grid-template-areas to accommodate your situation.
I have tried a few things here as well, but can’t seem to find the correct configuration that we need
@Mattias_Persson could you maybe shine some light on this?
@JacobPantuso @Tismo
There is no one size fits all for this dashboard, Mattais pretty much provides his config, which is made of a framework (the themes.yaml an the button-card-templates.yaml) and an example for the ui-lovelace.yaml as well as all accompanying sensors/templates you could use.
But it’s up to you to make this fitting for your situation.
There is no video to set this up because there is no one size fits all approach, you don’t have the same sensors, same devices, same needs as I would have.
And even if that were the case you would still need to change/edit/fix a lot of things so it would be better to just try and work from the provided code, understand the code, and be able to actually make the necessary changes yourself and contribute to the project.
So as for global steps… There are multiple ways to go about it but the way that worked for me was:
The code structure:
So if we look at lovelace-ui.yaml it shows a button for a lamp, this button uses a template from the button-card-templates which contains the information on which icon is used, what the text is etc, and the themes.yaml contains information on the style of this button, which color it is, which font etc
@Se7enair
Did you replace the themes.yaml with the updated version?
Also your mini graphs are “floating” in the buttons, might want to check my setup
ui-lovelace.yaml
- type: custom:button-card
entity: sensor.lumi_lumi_weather_temperature
name: Temperatuur
custom_fields:
graph:
card:
entities:
- sensor.lumi_lumi_weather_temperature
template:
- temperature
- icon_temp
button-card-templates:
temperature:
template:
- base
show_state: false
custom_fields:
circle: >
[[[ {
const temperature = Math.round(entity.state);
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" stroke="#313638" stroke-width="1.5" fill="#FFFFFF08" style="
transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle" dominant-baseline="middle">${temperature}°</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
line_color: "#3182b7"
line_width: 4
font_size: 75
show:
name: false
icon: false
state: false
legend: false
labels: false
styles:
name: [top: 57%, left: 0%, width: 100%, position: absolute]
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute]
circle:
- display: initial
- width: 90%
- letter-spacing: 0.03vw
- margin: -6% -6% 0 0
- justify-self: end
- opacity: 1
icon:
- width: 67%
- fill: "#9da0a2"