Doesn’t work. Got it working by using this code:
- icon: 'mdi:window-closed'
entity: cover.window
state:
- value: "open"
icon: mdi:window-open
Regards,
Cadish
Hi @N-l1
Great Work
Check out this: https://medium.muz.li/skeuomorphism-neumorphism-ui-trend-e7b78792bd21
3 Likes
simpy gorgeous thanks
Im going through your instructions, but I cant find Card Mod in HASC
Also, I cant see themes in HASC…
Sorry for the noob questions
Thank you @dvbit! Very nice designs and a really nice tool indeed! 
Card mod in HACS can be found searching card-mod in the plugins section. If themes aren’t showing up in HACS, make sure you have enabled themes in Home Assistant. Check out the HACS documentation.
Hope this helps! 
can you tell please what is your configuration of sensor.lights_on
not OP bust here’s what im using:
sensor:
- platform: template
sensors:
lights_on:
entity_id: sensor.time
value_template: '{{ states.light | selectattr("state", "equalto", "on") | rejectattr("attributes.is_deconz_group") | list | length }}'
You may need to adopt the value template based on the lights/integrations you use. I had to reject all deconz groups because these are shown under the light domain in home assistant.
3 Likes
Hi @ASNNetworks,
do you have your config published somewhere?
Really like your setup and wanted to know how things were done.
Cannot make the pop-up card (remote control) to get working.
Can you tell, do I need to include the popup-card.js?
Hi @N-l1!
Very nice design! I really like it and have already implemented multiple parts.
I want to turn your vertical buttons into toggle buttons, but cannot get it to work 
Very frustrating… They seem to be inactive.
I would like to activate my input.booleans by clicking. Can you help me spot my mistake?
type: 'custom:button-card'
- icon: 'mdi:weather-night'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 80px
- height: 80px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: toggle
entity: input_boolean.good_night
type: 'custom:button-card'
- cards:
- content: |
# Goodnight
Thanks in advance 
Hi @Martin_Pejstrup,
Thank you! You should put the entity outside the tap_action
- icon: 'mdi:weather-night'
show_icon: true
show_name: false
style: |
ha-card {
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
styles:
card:
- width: 80px
- height: 80px
- border-radius: 15px
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
############################## Like this ################
entity: input_boolean.good_night
tap_action:
action: toggle
type: 'custom:button-card'
- cards:
- content: |
# Goodnight
Hope this helps!
Hi again
That worked for 2 out of 3. I’ll have a look and see if I can figure it out 
Thanks again! And great work on the UI once more!
1 Like
Has anyone found a good way (good designed, like the whole UI here) to name the entities of the vertical stack? I would love to have the name inside the button, or over the button/under the buttons…
@dolphinxjd1203 @Klex1404 I don’t have my config posted somewhere. I’m using HA for just two months now and am learning/changing as I go. I cannot share my entire config because I have a lot of personal info there for some stuff. I am willing to share a snippet though of some of the basics. If you want let me know, then I will send you a PM.
If you are looking for a complete setup that looks similair, you might want to look into HKI and HomeKit Style Card
Thanks @ASNNetworks, in the meantime, I managed to adopt @N-l1 configuration and made some customizations inspired by the pictures of your design.
9 Likes
That looks great! Nice to see you managed to create your own version that suits your needs
1 Like
Hi! Lovely UI interface, and i’ve started to try it out myself aswell
But for someone who’s a first timer using templates, and trying to read up on the official docuements i’m still baffled of how to use it.
I’m trying to use it together with Vertical Buttons Card
together with the sensor you’ve mentioned :
{{ states | selectattr('entity_id','in', ['light.list_your_lights_here','switch.example_1','switch.example_2'] )|selectattr('state','eq','on') | list | count }}
I’ve created a light.all_mylights as a entity
Where do i add that template? And how do i write it? Do i need to add it in Configuration.yaml first or?
Hi @Ryssk,
The template is used to count how many lights are on. Which can be used directly with the card or created into a sensor like this:
# Example configuration.yaml entry
sensor:
- platform: template
sensors:
lights_on:
friendly_name: "Lights On"
value_template: "{{ states | selectattr('entity_id','in', ['light.list_your_lights_here','switch.example_1','switch.example_2'] )|selectattr('state','eq','on') | list | count }}"
Hope this helps!