Hm I have gone over your repo, so you use card-modder to display wallpapers? Am I correct?
Thanks for the reply.
I use it the same way as you do. The bright image if home and darker/blurred image when not home.
So the best way would be a js template? Sadly iām not such expert in js haha.
Hm I use the same picture for home/away and they are both in color. I will change the template for you when I have the time and send you the code.
I figured I could just copy the person template and create person-dark template which does the trick. Thinking way too difficult :ā)
Yeah, card-mod wasnāt even a thought back then and havenāt had the urge(or time) to change the code since it still works and allows an easy config to apply the changing backgrounds to ha-card-back's as well. My clean up skills have been on pause since this new job, unfortunately 
(finally got around to updating repo early this morning 
LOL)
Hi @jimz011, can you help please when you have time.
I need help with a button card template, i want to display at the top right corner of the lights button, the current number of lights that are on, i tried looking at examples with no success.
This is the code that iām using for the button:
lightspopup:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Lights
style:
background: var(--background-image)
color: AliceBlue
border-radius: 15px
--ha-card-border-radius: 15px
--ha-card-background: '#646464'
card:
type: entities
entities:
- entity: light.bedroom_lights
icon: mdi:ceiling-light
- entity: light.corner_living_room_lights
icon: mdi:ceiling-light
- entity: switch.sonoff_100017d309
name: Night Light
icon: mdi:led-outline
- light.gateway_light_04cf8c9829a2
- light.gateway_light_34ce00fa5d87
style: |
ha-card {
--paper-item-icon-color: AliceBlue;
color: AliceBlue;
}
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: AliceBlue
state:
- color: AliceBlue
label:
- color: AliceBlue
id: on-icon
- value: 'off'
styles:
card:
- box-shadow: '0px 0px 3px 2px var'
# - opacity: 0.3
label:
- color: 'AliceBlue'
name:
- color: 'AliceBlue'
state:
- color: 'AliceBlue'
icon:
- color: 'AliceBlue'
id: off-icon
deviceID:
- this
- dashboard
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
# - background-color: 'rgba(255,255,240,0.9)'
# - background-color: '#fff5bc'
- background-color: 'rgb(100,100,100)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
- color: AliceBlue
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
icon:
- color: AliceBlue
code in lovelace:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: lightspopup
variables:
- name: Lights
- icon: mdi:lamp
I created template sensor that count the lights that are on, template entity : āsensor.lights_onā screenshot below:
i just donāt know how integrate the sensor into the code above that it will show at the top of the right entity button just like in the example from your setup.
i managed to the make a lot of progress thanks to your setup and your help!!
Thank you!
Ok, I will only do this once, because this is more advanced stuff and giving support like this will take up too much time (I get a lot of questions every day, and I can not personally help everyone with this amount of detail). You should read up on the button-card documentation. It is all explained in there (though I know it is a LOT of documentation to read through and in some areas a bit difficult to understand). Easiest practice is to create a blank view, with only a single button, the button you are currently working on.
Anyways, Maybe this will help you out a bit. This should work:
lightspopup:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
custom_fields:
notification: '[[notification]]'
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Lights
style:
background: var(--background-image)
color: AliceBlue
border-radius: 15px
--ha-card-border-radius: 15px
--ha-card-background: '#646464'
card:
type: entities
entities:
- entity: light.bedroom_lights
icon: mdi:ceiling-light
- entity: light.corner_living_room_lights
icon: mdi:ceiling-light
- entity: switch.sonoff_100017d309
name: Night Light
icon: mdi:led-outline
- light.gateway_light_04cf8c9829a2
- light.gateway_light_34ce00fa5d87
style: |
ha-card {
--paper-item-icon-color: AliceBlue;
color: AliceBlue;
}
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: AliceBlue
state:
- color: AliceBlue
label:
- color: AliceBlue
id: on-icon
- value: 'off'
styles:
card:
- box-shadow: '0px 0px 3px 2px var'
# - opacity: 0.3
label:
- color: 'AliceBlue'
name:
- color: 'AliceBlue'
state:
- color: 'AliceBlue'
icon:
- color: 'AliceBlue'
id: off-icon
deviceID:
- this
- dashboard
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
# - background-color: 'rgba(255,255,240,0.9)'
# - background-color: '#fff5bc'
- background-color: 'rgb(100,100,100)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
- color: AliceBlue
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields
notification:
# - background-color: YOUR-COLOR-HERE
# - color: YOUR-TEXT-COLOR-HERE
- border-radius: 50%
- overflow: visible
- position: absolute
- right: 7%
- top: 7%
- height: 22px
- width: 22px
- font-size: 11px
- line-height: 20px
img_cell:
- justify-content: start
- align-items: start
icon:
- color: AliceBlue
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: lightspopup
variables:
- name: Lights
- icon: mdi:lamp
- notification: "[[[ if (states['sensor.lights_on'].state > 0) return `${states['sensor.lights_on'].state}`; else return ' ' ]]]"
1 Like
@jimz011 thank you for your support and iām apologize.
itās working !
is there a way to will be round circle with AliceBlue color just like in your setup :
next time, i will not ask directly .
Thank you
No donāt worry. I will answer your questions 
. I just wonāt change everyones code so it works.
You need to change the background color of the notification area and add a border radius to it. I believe the border-radius is already in your template. The background color I commented out for you as you need to put in your own. Just uncomment that line and put in your background color.
1 Like
@hassan I am currently experimenting with your solution, and so far it is working great. I need some more testing for more components etc. But this could be the solution I had been looking for in a long while. Thank you so much!!!
Good to know, i used the names en secretes in lovelace so this way whenever i need to make entities names changes i just change one file. this way you can make your code as general and configurable!.
One more thing I think with the state switch and entity of type hash you can create you version for tablet , i use it and very useful.
any thing that can help let me know.
By the way the orange homekit them you had was so nice if you re-enable it again would be nice.
Thanks
1 Like
Yes, I have used the state-switch before. But didnāt know what the hash was used for. I actually moving away from state-switch as I will create separate views for the tablet and hide other views using CCH. This works well for me on my current interface so I guess it should work fine for my tablet too.
The secrets tip is handy, I even passed through options from customize.yaml to that file so that you can also configure friendly name and icon from the secrets file. This works great, I change 1 entity and it changes for every automation, scene, group, popup card I have. This will make the setup sooooo much easier to setup for new users without needing the knowledge to edit too much themselves. Great!
Really? The orange theme? Wow I didnāt think anyone would actually like that theme. It was never even completed because of the zero reactions to it XD. The pink/rose themes I recently released were something my wife wanted me to do. But sure I can definitely fix the orange theme for my current version of the setup and I could definitely make it look even better than it did before. I will do this for you, though I can not give you an estimated release date. I want to give people the time to work on 0.13.x as it was a pretty large update (in terms of work that needs to be done).
I will probably release a few themes in the coming week for use with my setup.
Very nice, and keep the good work up. 
1 Like
For everyone that was looking for my WhatsApp and/or Discord channels. I have removed them permanently in favor of Slack.
If you are looking for support for my HKI setup, support for anything else, want to get to know new people or just want to chat, please join my Slack groups. Why Slack and not Discord? Well join Slack and you will find out. Sharing YAML with each other is a breeze with Slack. Dump pastebin and those alternatives, Slack can do all of this built-in.
English Speaking: (warning: non-english speakers will be removed)
Click Here for English
Dutch Speaking (warning: non-dutch speakers will be removed)
Click Here for Dutch
2 Likes
Hi,
I have an extra suggestion since you are making changes on you coding and structures, I think this would help and makes your config very general to any and easy to manipulate:
- Instead of using names like jimmy.yaml, stephanie.yaml, luna.yaml, you can use male.yaml, female.yaml, and dog.yaml, and since you started using the secret for names and icones and so on, you can use also for the title of your views and so too.
- For each view Title, and Path you can use the secret file too, and whenever you need to reference or navigate to , you choose the reference, and this way you donāt have to modify if you change names of files or titles in each file.
These are some examples:
for veiw:
- title: !secret title_female
path: !secret path_female
cards:
secret:
# Views lovelace
title_female: Nadia
path_female: female
nav_path_female: /lovelace/female
Navigate path:
- tap_action:
action: navigate
navigation_path: !secret nav_path_female
even with contents:
- type: custom:decluttering-card
template: header
variables:
- content: !secret title_female
I think this way you code is going to be very general to anyone, and very easy to change, of course it will take a little bit of time to change, but will be very nice and organized.
I use those in my config and whenever i need to make changes, of course the secret file id there to do so.
Have a good day 
1 Like
Yes I am doing headers etc as well, but I donāt want to lock the config to the secrets file as I want long time users to continue using this without the need of completely rewriting their setup. But I am still thinking about the best way to do it. Too bad I canāt figure out how to split the secrets file.
@jimz011 Congratulations on all of this hard work.
Iām using your code, and I use some covers which have open, close and stop commands.
I had like to have each cover on a single button. If were you, what would you do? Is it possible to have the three commands on a single button?
Iām stuck, I need ideas and you seem to be the right person
1 Like
First of all, thanks. I appreciate it!
What Iād do is create an input_select with 3 options. Have an automation on each option (so when the input_select changes state do an automation that runs what you want).
Because you want a single button (and custom:button-card doesnāt support a dropdown menu) you should use a select next option service to trigger the state changes to the input_select. So press once it will open, press twice it will pause, press a third time it will close (ofc only examples, but I think youāll get the idea). Alternatively you could use a core entities button and have the input_select as an entity (this one does support a dropdown menu, but it doesnāt scale nicely with my config.
I do have a feature request open @RomRider (the creator of this amazing button card). Unfortunately the developer is very busy lately so he doesnāt have much time to work on this. So either use my suggested options, use separate buttons or wait and hope that something like this will ever make it to button-card.
@jimz011 I absolutely love the way you are shaping up this UI! Thanks a lot for taking the time to share all of this with the community.
I am in the process of building out my own version of the pages you have built, but i just noticed that none of the elements on these pages work if I cast the page to a Google Home Hub (https://www.home-assistant.io/blog/2019/08/06/home-assistant-cast/). The all show up as a red errors with the text āCannot read property config of nullā.
Do you know how I can fix this? Is there any fundamental incompatibility in using custom cards like the ones you created, with Home Assistant Cast? I am really hoping to find a solution to this.
1 Like