you need to add this
entity_id: sensor.time
to the sensor.
Awesome Thanks, I have tried that in the code but I still don’t see the updates happening.
sensor 4:
- platform: template
sensors:
lights_on:
friendly_name: "Lights On"
entity_id: sensor.time
value_template: "{{ states | selectattr('entity_id','in', ['light.elles_go','light.sarah.go','light.kitchen_lightstrip','light.vanity'] )|selectattr('state','eq','on') | list | count }}"
I am guessing that I am not doing something I need to in the string but I am not knowledgeable enough to know what.
Still learning 
create a group with the lights you want to monitor called group.house_lights
Then use this sensor
count_lights_on:
entity_id: sensor.time
value_template: "{{ states|selectattr('entity_id','in',state_attr('group.house_lights','entity_id'))|selectattr('state','eq','on')|list|count }}"
2 Likes
Just wanted to say that this is gorgeous, very nice work!
2 Likes
Lovely Ui!
I took your following code to create a glance card:
# Example entry
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
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);
{% else %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
The card shows rounded corners but the shadows don’t. Shadow shows up with straight corners.
How can i solve this please?
Cheers
1 Like
Hi @Harry-1976
The problem is that the shadows are getting cut off. That’s why in all of my cards I added transparent button cards as a “padding”. I’ll be sure to document that in the documentations.
This would resolve your problem 
type: vertical-stack
cards:
- type: vertical-stack
cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 5px
type: 'custom:button-card'
- type: horizontal-stack
cards:
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 5px
type: 'custom:button-card'
##### Your glance card config here ########
- type: glance
entities:
- entity: sensor.temperature_family_room
- entity: sensor.temperature_master_bedroom
- entity: sensor.temperature_mi_flora
show_name: false
show_icon: true
title: Temperature in the house
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
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);
{% else %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
################################
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 5px
type: 'custom:button-card'
- show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
styles:
card:
- width: 5px
- height: 5px
type: 'custom:button-card'
1 Like
This is awesome. Thank you so much!
1 Like
This looks great! Sorry for this noob question but how do I create a weather card using the simple-weather-card? Thanks!
Hi there, how can I install your card manual?
Hi @ericp,
Thanks! All you have to do is be sure you’ve installed card-mod and add this code to the simple-weather-card config:
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
margin: 20px;
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);
{% else %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
I am preparing for a major update which will make this process a lot faster and the code a lot better!
2 Likes
Thanks! I was able to create card but I am not sure where the simple-weather-card config file is. I have HA on docker and I use HACS to include the simple-weather-card to lovelace. So, I probably have a different configuration. Not sure where to start with using your wonderful UI.
I think I got it. I just plugged in the code your code into the Manual card like so and my card now displays wonderfully. I believe I can use this as a pattern to create other cards.
But then again, my next question is: Do I need to do this for each and every card or is there a way to automatically format the cards to use this as default?
Thanks again!
type: 'custom:simple-weather-card'
entity: weather.home
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
margin: 20px;
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);
{% else %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
I’m trying to enable it universally in a theme. But currently this function is not working with card-mod so, for now, you just have to add it to every card. Hopefully, it gets fixed soon so I can start testing it in themes as well as add some new customized cards
1 Like
If using YAML mode you can also split the style in a separate .yaml file and link it. Then you can just use ‘style: !include insert_name.yaml’ with each card. That way if you decide to change something with the style, all cards will be changed automatically. Also you can remove the style later with just one command for all cards and it will tidy up the .yaml file 
Ofcourse there are even deeper ways like the decluttering card and lovelace_gen. But those have a learning curve compared to this.
2 Likes
Yes, all those are great 
I was wondering though if there is a universal way of applying this style if you are not using YAML mode. Lovelace-gen seems to only work with YAML mode (correct me if I’m wrong) and although the decluttering card seems to work with UI mode, it only allows you to store templates of entire cards (again correct me if I’m wrong). The feature on card-mod that allows you to specify style inside a theme is (as I said) broken.
For now, I don’t really see a way of applying styles universally in UI mode 
I would love to hear other’s opinions though!
I think I am getting the hang of customizing my cards and your suggestion of using ‘style: !include insert_name.yaml’ sounds great. Unfortunately, being a noob, I can’t seem to find where the yaml for my UI is located. I see a themes folder which contains my themes and a www/community folder containing the cards but don’t have a clue where to find my UI yaml.
I am using HA in docker if that helps.
I created a glance card with the rounded corners for the entities. They work ok but I was wondering if the entity name can also change colors together with the icons during state change. Is that possible?
Found the answer to my question about entity name color.
Just add color: [whatever color] in style
I"m learning a lot and I love it.
Most likely you are in GUI mode, so you don’t have the .yaml since you’re not in YAML mode. Keep in mind, if you switch to YAML mode, you cannot edit your dashboard in the GUI editor anymore.
To change to YAML mode follow these steps: https://www.home-assistant.io/lovelace/yaml-mode/
1 Like
Congratulations @N-l1 , it’s a really nice personalization. Reading the whole readme on github I was unable to find the weather card as shown in the image at the beginning. I would love to implement it in my lovelace