sure:
note: ive now added the icon_color to the hidden attributes, so no mistake there… Ive also tested with the previous release on my GitHub, and was sad to see only icon_color to appear too… so your edit didnt change it. Would be cool if it could though 
as you can see here, the 2 bottom attributes in the more-info is what I would love to be able to realize
Thank you for this. I deleted my previous comment (now undeleted) because I found the same behavior in my environment. It looks like icon is just not displayed anymore, just icon_color. Not sure when that happened, but it doesn’t look like its me. 
Hey there,
May I ask if your repo of custom-ui is working on HA 118, my question is due to being unable to load it, even following your very simple guide 
copied custom-ui.js into www/custom-ui folder
added to configuration.yaml
homeassistant:
####################################################
# #
# Customize #
# #
####################################################
customize_glob: !include customize_glob.yaml
## light.*:
## custom_ui_state_card: custom-ui
## cover.*:
## custom_ui_state_card: custom-ui
## sensor.*:
## custom_ui_state_card: custom-ui
customize: !include customize.yaml
# Uncomment this if you are using SSL/TLS, running in Docker container, etc.
# http:
# base_url: example.duckdns.org:8123
# Text to speech
and to ui-lovelace.yaml
resources:
- url: /local/custom-ui/custom-ui.js?v=20201120 #change this v-number on each update
type: module
some final configs on customize_glob.yaml
light.*:
custom_ui_state_card: custom-ui
cover.*:
custom_ui_state_card: custom-ui
sensor.*:
custom_ui_state_card: custom-ui
switch.*:
custom_ui_state_card: custom-ui
binary_sensor.openclose_8*:
custom_ui_state_card: state-card-custom-ui
templates:
icon: "if (state == 'Open') return 'mdi:television'; else return 'mdi:television-off';"
icon_color: "if (state == 'Closed') return 'rgb(193,193,193)'; else if (state == 'unavailable') return 'rgb(251,210,41)'; else return 'rgb(54, 95, 140)';"
However, after restarting HA, don’t see it loaded, in fact on “Inspector” can see below error
also my test sensor doesn’t change icon state as you can see…
would be great having your support folks.
you dont need the
bits anymore, they are no longer supported like that, please read up on the doc about only needing the custom_ui resource now.
the error in inspector is somewhat unexpected, because in the only customization you posted no ‘<’ is used. Do you have other customizations set elsewhere.
for readability please write as follows:
templates:
icon: >
if (state == 'Open') return 'mdi:television';
return 'mdi:television-off';
icon_color: >
if (state == 'unavailable') return 'rgb(251,210,41)';
if (state == 'Closed') return 'rgb(193,193,193)';
return 'rgb(54,95,140)';
and yes, custom_ui still works, even on HA 1.0b0
can you check and see the resource mentioned on the config/info page and in inspector?
What I can see on config/info it’s image below, cannot find information similar to post above., unless not seeing in right place, sorry, not yet an expert on HA, still getting more knowledge in daily basis.
Below you can see my home lovelace config, believe it’s the only template had configured.
ui-lovelace.yaml
title: Fofos Home
resources:
- type: module
url: /local/plugins/slider-entity-row.js?v=1
- type: module
url: /local/community/lovelace-slider-entity-row/slider-entity-row.js
- type: module
url: /local/custom-lovelace/weather-card/weather-card.js
- type: module
url: /local/community/mini-media-player/mini-media-player-bundle.js?v=1.11.0
- type: module
url: /local/animated-background/animated-background.js
- type: module
url: /local/community/mini-graph-card/mini-graph-card-bundle.js?v=0.9.4
- type: module
url: /local/community/vertical-stack-in-card/vertical-stack-in-card.js?v=0.3.2
- url: /local/plugins/card-mod.js?v=1
type: module
- url: /local/custom-ui/custom-ui.js?v=20201120 #change this v-number on each update
type: module
animated_background:
default_url: >-
/community_plugin/lovelace-animated-background/background-animations/sunny.html
entity: weather.dark_sky
state_url:
sunny: >-
/community_plugin/lovelace-animated-background/background-animations/sunny.html
partlycloudy: >-
/community_plugin/lovelace-animated-background/background-animations/cloudy.html
cloudy: >-
/community_plugin/lovelace-animated-background/background-animations/cloudy.html
mostlycloudy: >-
/community_plugin/lovelace-animated-background/background-animations/mostlycloudy.html
clear-night: >-
/community_plugin/lovelace-animated-background/background-animations/night.html
fog: >-
/community_plugin/lovelace-animated-background/background-animations/fog.html
background: var(--background-image)
#### background: center / cover no-repeat url("/background.png") fixed
views:
- path: default_view
title: Home
icon: 'mdi:home'
badges:
- entity: binary_sensor.updater
- entity: person.valter_cunha
- entity: sun.sun
cards:
- entities:
- light.sala_de_jantar
show_header_toggle: true
title: Dining Room
type: entities
- entities:
- entity: light.sala_de_estar_canto
- entity: light.sala_de_estar_mesa
- entity: switch.shelly1_sala_de_estar_luz_tecto
- entity: switch.shelly1_sala_de_estar_luzes_laterais
- entity: cover.sala_de_estar_estores
icon: 'mdi:blinds'
name: Sala de Estar - Estores
- entity: cover.sala_de_estar_estores
full_row: true
type: 'custom:slider-entity-row'
show_header_toggle: true
title: Living Room
type: entities
- entities:
- entity: light.osram
- entity: light.on_off_plug_1
- entity: light.on_off_plug_2
title: Power Socket
type: entities
- entity: weather.home_2
type: weather-forecast
- entities:
- entity: cover.garagem_basculante
show_header_toggle: false
title: Garagem
type: entities
- entity: light.sala_de_estar_canto
type: light
- entities:
- entity: switch.sonoff_100092664c
- entity: switch.sonoff_1000926eeb
- entity: switch.sonoff_100092704f
- entity: binary_sensor.window_door_sensor
- entity: sensor.window_door_sensor_battery_level
- entity: cover.sala_de_estar_estores
show_header_toggle: true
title: Test
type: entities
- entities:
- entity: script.turn_off_movies_activity
- entity: script.turn_on_movies_activity
- entity: script.turn_on_tv_activity
- entity: script.turn_off_tv_activity
show_header_toggle: false
title: Harmony Hub
type: entities
- entities:
- entity: cover.sala_de_estar_estores
icon: 'mdi:blinds'
name: Sala de Estart - Estores
- entity: cover.sala_de_estar_estores
full_row: true
type: 'custom:slider-entity-row'
show_header_toggle: false
title: Teste Slider Estores
type: entities
- current: true
details: true
entity: weather.home_2
forecast: true
icons: /local/custom-lovelace/weather-card/icons/
type: 'custom:weather-card'
but again, sorry for stupid question, since haven’t started on templates yet, my goal for now is simple, apply to all door sensors the same template, whenever status is either open, closed or unavailable, icon and color changes.
The code you shared shall be added on configuration.yaml ?
any help guidance on first putting custom-ui working and then setting a few examples, and I good to proceed on my onw.
Cheers
2 thing need to be correct:
the install of the resource, and the yaml with the customization,
the install should be fine, unless you have the file in an other folder in your /config folder. can you show where you have it stored? and please show us a screenshot of the inspector console, that shows all custom cards, so we can check.
the customization should be in the configuration.yaml, depending on the organization of your files.
it should be under:
homeassistant:
customize:
sensor.door_1:
templates:
icon:
icon_color:
or if you want it for all doors:
homeassistant:
customize_glob:
sensor.door_*:
templates:
icon:
icon_color:
Hi @Mariusthvdb, thanks for prompt response.
My HA setup is on Dockers with Hassio, here config path is hass.io\homeassistant , hence they’re stored within config/www/custom-ui
created a new customize-yaml and customize_glob.yaml which were included in configuration.yaml
configuration.yaml
# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:
homeassistant:
####################################################
# #
# Customize #
# #
####################################################
customize_glob: !include customize_glob.yaml
customize: !include customize.yaml
customize_domain: !include customize_domain.yaml
# Uncomment this if you are using SSL/TLS, running in Docker container, etc.
# http:
# base_url: example.duckdns.org:8123
# Text to speech
tts:
- platform: google_translate
group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
sensor: !include sensor.yaml
binary_sensor: !include binary_sensor.yaml
#lovelace: !include lovelace.yaml
cover: !include cover.yaml
# include lovelace YAML
#lovelace:
# mode: yaml
# Enables pythonn scripts
python_script:
# Enables the Frontend
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /local/custom-ui/custom-ui.js
customize.yaml
binary_sensor.openclose_8:
friendly_name: Kitchen Door Sensor
templates:
icon: if (state == 'Open') return 'mdi:leak-off';
if (state == 'Closed') return 'mdi:leak';
return 'mdi:close-circle-outline';
icon_color: if (state == 'unavailable') return 'rgb(251,210,41)';
if (state == 'Closed') return 'rgb(193,193,193)';
return 'rgb(54,95,140)';
customize_glob.yaml
binary_sensor.openclose*:
templates:
icon: >
if (state == 'Open') return 'mdi:leak-off';
if (state == 'Closed') return 'mdi:leak';
return 'mdi:close-circle-outline';
icon_color: >
if (state == 'unavailable') return 'rgb(251,210,41)';
if (state == 'Closed') return 'rgb(193,193,193)';
return 'rgb(54,95,140)';
Here’s inspector snip with all custom cards. Sensor I’m testing configuration is Kitchen Door Sensor
please read up on installing the resource, what you do here is no longer supported.
you should add the js file to the lovelace resources section
# https://github.com/Mariusthvdb/custom-ui
- url: /local/lovelace/resources/custom-ui/custom-ui.js?v=20201120
type: module
also, are you sure the binary has state Open? always check in the developer-tools/state
it might well be that Open/Close is displayed (because of the use of device_class) but the state in fact is on/off (as with most binary_sensors)
Removed from frontend section within congiguration.yaml
extra_module_url:
- /local/custom-ui/custom-ui.js
Already had on ui-lovelace.yaml below code for ressources
resources:
- type: module
url: /local/community/lovelace-slider-entity-row/slider-entity-row.js
- type: module
url: /local/custom-lovelace/weather-card/weather-card.js
- type: module
url: /local/community/mini-media-player/mini-media-player-bundle.js?v=1.11.0
- type: module
url: /local/community/mini-graph-card/mini-graph-card-bundle.js?v=0.9.4
- type: module
url: /local/community/vertical-stack-in-card/vertical-stack-in-card.js?v=0.3.2
- type: module
url: /local/plugins/card-mod.js?v=1
- type: module
url: /local/custom-ui/custom-ui.js?v=20201120 #change this v-number on each update
You were right about sensor state, it’s on/off and not Open/Closed updated to code below on customize.yaml
binary_sensor.openclose_8:
friendly_name: Kitchen Door Sensor
templates:
icon: if (state == 'on') return 'mdi:leak-off';
if (state == 'off') return 'mdi:leak';
return 'mdi:close-circle-outline';
icon_color: if (state == 'unavailable') return 'rgb(251,210,41)';
if (state == 'off') return 'rgb(193,193,193)';
return 'rgb(54,95,140)';
after HA restart still doesn’t load custom-ui neither changes icon and icon color.
One more test: to see if you correctly downloaded the file, please show a screenshot of it in the browser, and have it show the file size and path
From your repo…
if I copy code and paste into a custom_test.js file size is much smaller.
Additionally, when looking at inspector, notice that can see sources from all resources but not when choosing custom-ui shows a completely different input.
Other ressources …
now pressing custom-ui ressource …Opens a new tab with some code that seems not being js content.
Not sure if it helps this additionally info.
When copying from a GitHub file, you should always use the Raw button in the top right menu of the repo:
Then do a select all, copy, and paste it in your local custom_ui.js file, replacing everything that’s in there.
But, to make things easier, I’ve made Releases available, so you can just go to https://github.com/Mariusthvdb/custom-ui/releases/tag/20201120
Thank you so much @Mariusthvdb
Still not working though 
In summary, here’s what I’ve after 2 tentative, one where copied raw code and created a file custom-ui.js and another where just downloaded you content release.
Doc is quite simple 
file is on right place and bellow added on ui-lovelace.yaml
ressources:
- type: module
url: /local/custom-ui/custom-ui.js?v=20201120 #change this v-number on each update
however shows a different error on top (highlighted)
must be
resources:
as for the file itself, tbh, I dont understand what you are doing there. If the screenshot is showing the content of the file, it is completely wrong:
this is the top of the file:
I guess you didn’t follow the suggestion In posted above on the releases page?
was a type error since didn’t paste here but wrote it, it’s in fact resources:
here’s my custom-ui.js top code
can’t explain why is showing something different on Inspector.
Just found out that code shown by Inspsctor comes from custom_components/customizer/services.yaml required to installed from original custom-ui Andrey-Git
Believe can be removed based on your repo, correct?
I’ve removed customizer folder, but somehow it still got that file services.yaml code
Have same experience on Chrome and other browser
It almost always has to do with cache…
(Unless you use HACS or so I am told, don’t use it myself)
Great. So now you should be good to go customizing
