Ok, now I got it. Thanks a lot, I rely appreciate it
1 Like
you do know you could take out a lot of lines using a simple template for this 
I have this in templates:
horizontal-filler:
color_type: blank-card
styles:
card:
- width: 3px
vertical-filler:
color_type: blank-card
styles:
card:
- height: 3px
and use this in configs:
- type: custom:button-card
template: horizontal-filler
3 lines less for each occurrence in your setup …
2 Likes
Very good idea, will definitely use this. Thank you!
I’ve fixed most of the theming issues in mine by taking another theme and then splicing in some of the key parts from yours.
Care to share the code? I have 3 more things to do before I go full on theming, but a headstart will always help.
I have a new vacuum control center upcoming and some additions to the main menu. As well as decluttering the button cards (as advised by @Mariusthvdb).
These 3 things won’t take very long to complete. I expect to have some themes ready next week.
It is right here! Files · master · home-server / hass-config · GitLab
Here is the theme I “merged” with yours.
1 Like
I actually had the same idea and made my own templates, the vertical one would work great, but the horizontal one would never work and threw up an error every time I tried to integrate it. I spend a ton of time trying to fix it, but it never worked properly. Yet here you are as proof that it does work! Wonder what I did wrong…
I rely like the “bottoms” you have on the other page,
I have tried to copy them from your code but can’t get them to look like that, what am I missing? I can’t get the icon to the left and the text centered.
This is what I get now
from this code
title: Other
path: information
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_select.ovrigtmenyn
state: Hem
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- width: 10px
- type: custom:decluttering-card
template: switch_button_card
variables:
- entity: input_boolean.test
- name: Klimat
- icon: thermometer
- show_state: false
- opacity: 0.9
- aspect_ratio: 4/1
- tap_action:
action: call-service
service: input_select.select_option
service_data:
option: Klimat
entity_id: input_select.ovrigtmenyn
haptic: light
- type: 'custom:button-card'
color_type: blank-card
styles:
card:
- width: 10px
I added - aspect_ratio: 4/1 that was not in your code for the card, but without it I got a very big card.
What am I missing?
well, without your code we wouldn’t know…
this is what I do, using the horizontal filler to have the cards not touch the edges of the display, which is particularly necessary on mobile devices:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: custom:button-card
template: button_body
entity: sensor.cpu_temperature
# icon: mdi:chip
name: Cpu temp
tap_action:
action: more-info
state:
- operator: '<'
value: 50
styles:
card:
- '--local-color': blue
- operator: '<'
value: 60
styles:
card:
- '--local-color': green
- operator: '<'
value: 70
styles:
card:
- '--local-color': orange
- operator: '<'
value: 80
styles:
card:
- '--local-color': red
- type: custom:button-card
template: button_body
entity: sensor.processor_use
# icon: mdi:chip
name: Cpu usage
tap_action:
action: more-info
state:
- operator: '<'
value: 10
styles:
card:
- '--local-color': blue
- operator: '<'
value: 45
styles:
card:
- '--local-color': green
- operator: '<'
value: 60
styles:
card:
- '--local-color': orange
- operator: '<'
value: 80
styles:
card:
- '--local-color': red
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: horizontal-filler
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: custom:button-card
template: button_body
entity: sensor.disk_use_home
# icon: mdi:chip
name: Disk use
tap_action:
action: more-info
state:
- operator: '<'
value: 500
styles:
card:
- '--local-color': green
- operator: '<'
value: 600
styles:
card:
- '--local-color': brown
- operator: '<'
value: 700
styles:
card:
- '--local-color': orange
- operator: '<'
value: 800
styles:
card:
- '--local-color': red
- operator: '<'
value: 1000
styles:
card:
- '--local-color': purple
- type: custom:button-card
template: button_body
entity: sensor.disk_free_home
# icon: mdi:chip
name: Disk free
tap_action:
action: more-info
state:
- operator: '<'
value: 2
styles:
card:
- '--local-color': red
- operator: '<'
value: 6
styles:
card:
- '--local-color': orange
- operator: '<'
value: 10
styles:
card:
- '--local-color': blue
- operator: '<'
value: 32
styles:
card:
- '--local-color': green
- type: custom:button-card
template: button_body
entity: sensor.disk_use_percent_home
# icon: mdi:chip
name: Disk use
tap_action:
action: more-info
state:
- operator: '<'
value: 10
styles:
card:
- '--local-color': red
- operator: '<'
value: 30
styles:
card:
- '--local-color': orange
- operator: '<'
value: 40
styles:
card:
- '--local-color': brown
- operator: '<'
value: 80
styles:
card:
- '--local-color': green
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: horizontal-filler
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: custom:button-card
template: button_body
entity: sensor.memory_free
# icon: mdi:chip
name: Mem free
tap_action:
action: more-info
state:
- operator: '<'
value: 100
styles:
card:
- '--local-color': red
- operator: '<'
value: 300
styles:
card:
- '--local-color': orange
- operator: '<'
value: 400
styles:
card:
- '--local-color': brown
- operator: '<'
value: 1000
styles:
card:
- '--local-color': green
- type: custom:button-card
template: button_body
entity: sensor.memory_use
# icon: mdi:chip
name: Mem usage
tap_action:
action: more-info
state:
- operator: '<'
value: 500
styles:
card:
- '--local-color': green
- operator: '<'
value: 600
styles:
card:
- '--local-color': brown
- operator: '<'
value: 700
styles:
card:
- '--local-color': orange
- operator: '<'
value: 800
styles:
card:
- '--local-color': red
- type: custom:button-card
template: button_body
entity: sensor.memory_use_percent
# icon: mdi:chip
name: Mem use
tap_action:
action: more-info
state:
- operator: '<'
value: 50
styles:
card:
- '--local-color': green
- operator: '<'
value: 60
styles:
card:
- '--local-color': brown
- operator: '<'
value: 75
styles:
card:
- '--local-color': orange
- operator: '<'
value: 95
styles:
card:
- '--local-color': red
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: horizontal-filler
This is because this is an old screenshot (which is mentioned in the docs. If you are looking for my old code please click here.
I have redone that menu to look different:
This is what the menu looks like with the current code.
I will upload new screenshots and videos within the week. Though the biggest visual change is this particular page with these buttons. Also you should know that the styling I did to create those buttons you ask for might no longer work as I believe it uses some keys that are deprecated. Anyways, I pasted the link, you might get some use out of it.
Thanks @jimz011Now it makes more sense why I didn’t get it to work, spent a couple of overs to try to understand what I missed.
I will take a closer look at the old code and se if I can get it to work, or if this new way is the way to go. This new way als looks real good and ties in the the all over theme better.
1 Like
I am still working on the menu, as I want it to be a hub where you can do everything.
Here is a more actual video of my lovelace setup:
That vacuum card is very nice. The part with the map over the house and the ability to draw zones was epic. I didn’t know that what possible outside of the app. I have a roborock myself and will definitely take a look on how you did that!
I haven’t uploaded that specific code yet, but it will come real soon. I’m actually in the works of fixing it now. Might drop it tonight or tomorrow.
My to-do list just gets bigger and bigger 
Here’s the code, I tried it with different pixel spacing, still resulted in card errors. 
# Horizontal Space
horizontalspace:
card:
type: 'custom:button-card'
color_type: blank-card
styles:
card:
- width: 0px
# Vertical Space
verticalspace:
card:
type: 'custom:button-card'
color_type: blank-card
styles:
card:
- height: 0px
what happens when you add some px to the width / height? right now you use a card with 0 size, which is not very useful?
Hi everyone, I will be pushing out updates tonight.
A preview of the upcoming update:
-
New Vacuum control center
-
New Dog information card
I expect it to be online around 01.00 am CEST. Postponed to the 10th of July.
7 Likes
Love your work, I am taking inspiration and starting mine from scratch 
Is there anyway to style the cards transparently so that the vertical stack background is applied to all the cards within the stack?
As an example, for yours I can see you are using homekit-white as the background for all cards within a pop-up, whereas I am tryning to get it so that all cards are effectively transparent and so it appears as one large card rather than multiple within a vertical stack.
Does this make sense?
@jimz011 I know you use a lot of pop-up card in your setup. I’ve been starting to integrate this into mine, but it doesn’t really look good across devices, looks pretty good on mobile, but if it is too long it gets cut off on my desktop with no way to scroll, have you come across this and / or found any good solutions or work arounds?
1 Like