I have this in the frontend section of my configuration.yaml
# Enables the frontend
frontend:
themes: !include themes.yamlThat part goes in under frontend: but I have it in a include file called frontend.yaml
in your configuration.yaml
Enables the frontend
frontend: !include frontend.yaml
javascript_version: latest
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
themes:
# /* for label-badge */
green_badge:
label-badge-red: green
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: black
paper-item-icon-color: 'var(--primary-text-color)' # Icon color
paper-item-icon-active-color: '#29b613'
grey_badge:
label-badge-red: grey
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: grey
black_badge:
label-badge-red: black
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: black
brown_badge:
label-badge-red: brown
label-badge-border-color: brown
label-badge-background-color: white
label-badge-text-color: brown
orange_badge:
label-badge-red: orange
label-badge-border-color: orange
label-badge-background-color: white
label-badge-text-color: orange
blue_badge:
label-badge-red: blue
label-badge-border-color: blue
label-badge-background-color: white
label-badge-text-color: blue
yellow_badge:
label-badge-red: grey
label-badge-border-color: yellow
label-badge-background-color: lightgrey
label-badge-text-color: yellow
red_badge:
label-badge-red: red
label-badge-border-color: red
label-badge-background-color: red
label-badge-text-color: white
paper-item-icon-color: 'var(--primary-text-color)' # Icon color
paper-item-icon-active-color: '#f95336'
1 Like
Still same result somehow:
Got:
Have you rebooted your Hass and cleared cache in your browser?
Yes and same result on mobile app. I am probably miss something now 
Changed the customize.glob.yaml to:
“*”:
custom_ui_state_card: state-card-custom-ui
"device_tracker.iphone_*":
state_card_mode: badges
templates:
theme: >
if (state === ''home'') return ''green_badge''; return ''red_badge'';
I do not have a themes.yaml anymore now, which is fine i guess
Try only one ‘home’ not two ‘’home’’
if (state === 'home') return 'green_badge'; return 'red_badge';
Did you say that you are using Lovelace as custom-ui badges don’t work with Lovelace.
Sorry I have just tried it.
Correct I am using Lovelace
Is there no way to get this working with Lovelace UI?
the ‘*’ is incorrect, use this in customize_glob.yaml:
##########################################################################################
# Customize entities matching a pattern
# to override use: custom_ui_state_card: null
# YAML keys can’t start with an asterisk - *, so in that case quotes are required.
# However in the middle or end of the key an asterisk is allowed.
# https://community.home-assistant.io/t/customui-discussion-thread/48694/237?u=mariusthvdb
##########################################################################################
'*.*':
custom_ui_state_card: state-card-custom-ui
btw to use that file you need your configuration to point to it:
homeassistant:
name: Main
latitude: !secret latitude
longitude: !secret longitude
elevation: !secret elevation
unit_system: metric
time_zone: !secret time_zone
customize: !include_dir_merge_named customize
customize_glob: !include customize_glob.yaml
packages: !include_dir_named packages
whitelist_external_dirs: /config
might I suggest, in stead of copying what others do, you read up on splitting up your config: Splitting up the configuration - Home Assistant
without understanding that, you are making HA life difficult for yourself …
1 Like
Sorry good to know . So it’s working for you then?
And is this supported in lovelace? I will give it a try. Thanks
Yes I am using lovelace and don’t know how to customize them (that was my original question)
Changed it:
'*.*':
custom_ui_state_card: state-card-custom-ui
"device_tracker.iphone_*":
state_card_mode: badges
templates:
theme: >
if (state === 'home') return 'green_badge'; return 'red_badge';
Still got the same result, all red (with lovelace )
The funny thing is that I can see the config at customizations in the hassio ui:
i am a bit out of ideas right now.
Other than Lovelace or your version of HA has taken out further functionality of custom-ui. Or, you must have missed something in the installation of custom-ui.
I am on Ha 84.3 and have the latest version of custom-ui installed (via the ./update.sh script)
all my badges are displayed with themes, though in lovelace the themes are no longer supported in individual entities on a card:
regular HA:
same template sensor in Lovelace:
though more info shows the customization:
sorry, missed that question…
yes you can, click the right hand side dev-info Info button:
and see what is loaded:
No worries, I appreciate the help. This is what the information shows me:
strangest thing: I now notice my custom-ui is still a version behind yours I am positive though to have run the updater…
It might have to do with the Ha version, and compatibly with custom-ui. On my other HA instance the latest Custom-ui is running.
still badges are customized on that too, as explained above
Can confirm custom-ui stopped working for badges in lovelace beyond 0.85.* version of Hass.
1 Like
Told you