@Giblet , did you by any chance managed to find a way to use the variable font size based on the screen resolution? I am seeing this variants in the themes.yaml but dont have enough skills to apply this also for the title of the button card. Hope you can help, please see this post:
Replace the Title button in Button Card Templates with:
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: |
#name {
font-size: 1.34vw;
letter-spacing: 0.05vw;
}
/* portrait */
@media screen and (max-width: 1200px) {
#name {
font-size: 2vw;
letter-spacing: 0.05vw;
}
}
/* phone */
@media screen and (max-width: 800px) {
#name {
font-size: 3.1vw;
letter-spacing: 0.12vw;
}
}
There has been an update this month, which changed some things in the themes.yaml, if you have updated your other files but forgot themes.yaml you might see this behaviour
As kaaspad said you should change the active theme to tablet.
Click the username icon in the home assisstant sidebar, and find the theme option, change it to tablet
Thank you, I did that, but it gives not the result I was hoping for, still wrong:
button card template:
#################################################
# #
# TITLE_BUTTON #
# #
#################################################
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: |
#name {
font-size: 1.34vw;
letter-spacing: 0.05vw;
}
/* portrait */
@media screen and (max-width: 1200px) {
#name {
font-size: 2vw;
letter-spacing: 0.05vw;
}
}
/* phone */
@media screen and (max-width: 800px) {
#name {
font-size: 3.1vw;
letter-spacing: 0.12vw;
}
}
ui lovelace:
#################################################
# #
# OFFICE #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: office
cards:
- type: custom:button-card
name: Office
title: Office
show_icon: false
show_state: false
tap_action:
!include popup/office_title.yaml
template: title_button
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: light.office_lights #hue_group
name: Lights
template:
- light
- icon_hue
- type: custom:button-card
entity: switch.computer_mart
name: PC
template:
- base
- icon_imac
- loader
- lock
- type: custom:button-card
entity: media_player.sony_bravia_tv
name: Tv
hold_action:
!include popup/vardagsrum_tv.yaml
template:
- base
- icon_tv
- loader
- type: custom:button-card
entity: remote.office_xbox_remote
name: Xbox
hold_action:
!include popup/vardagsrum_playstation.yaml
template:
- base
- icon_xbox
- loader
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++
1 Like
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;
}
}
1 Like
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?
1 Like
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!!
1 Like
i wish there was a video showing step by step.
1 Like
I’m facing the same problem, but right now… I have everything up to date. Did something broke in the meantime?
