I already had removed the customizer
#customizer: !include customizer.yaml
hi guys.
this works for me
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
friendly_name: kamer Joachim en Saar
templates:
icon_color: >
if (state > 25) return '#008000';
if (state >= 18 ) return '#df4c00';
return '#234c63';
not in rgb but in hexa
well that’s good to hear, finally… proves custom-ui is working.
you can use any css color format, including rgb. see: home-assistant-custom-ui/docs/features.md at master · andrey-git/home-assistant-custom-ui · GitHub
templates:
icon_color: >
if (state > 25) return 'rgb(0, 128, 0)';
if (state >= 18 ) return 'rgb(223, 76, 0)';
return 'rgb(35, 76, 99)';
or use the color names:
templates:
icon_color: >
if (state > 25) return 'green';
unless for some reason your lights don’t support these color settings. You can check that in the dev-state page and look in the attributes column:
1 Like
Is there one post to start from?
I am trying to give device_tracker items a green colour when they are home. This thread seems to be cluttered with 10 ways of doing it where half don’t work and the other half don’t provide a step by step plan but assume you know each file where the code needs to go, etc.
yes, you shouldinstall custom-ui first, read the documentation ann then you probably have concluded this will do it:
homeassistant:
customize_glob:
device_tracker.ping_iphone_*:
show_last_changed: true
templates:
icon_color: >
if (state === 'home') return 'rgb(251, 210, 41)';
return 'rgb(128, 128, 128)';
_stateDisplay: >
if (state === 'home') return 'Online';
return 'Offline';
to set customization globally,
or:
homeassistant:
customize:
device_tracker.appletv:
templates:
theme: >
if (state === 'home') return 'green';
return null;
_stateDisplay: >
if (state === 'home') return 'On';
return 'Off';
for an individual entity
Thanks for helping out. Got it figured out in the end and will describe here how for newbies.
First I have to state that I was not clear in my post about what I wanted to accomplish. Apologies for that. I was looking for badges/labels/icons that would change colour based on the state of device_tracker, thus home or not_home. The code given above this post will change the colour when a listbox is rendered or when an entry (also device_tracker ones) is clicked on and a layover box is opened. But the badge/label won’t change. Again, my mistake for not being clear.
So, here is how to do it:
Part 1 - CustomUI
Install CustomUI by following the ‘Automatic install’ procedure from home-assistant-custom-ui/docs/installing.md at master · andrey-git/home-assistant-custom-ui · GitHub.
Then activate with method 1.1 from home-assistant-custom-ui/docs/activating.md at master · andrey-git/home-assistant-custom-ui · GitHub.
Finally add this to configuration.yaml:
customizer:
custom_ui: local
Restart HA. You can find this by clicking Configuration - General from the webinterface.
Confirm CustomUI to be working by looking at the dev-info page by clicking the i-button in the developer tools area from the webinterface:
Custom UIs:
CustomUI: 20180831
If Custom UI is not mentioned, then it is not installed and/or activated.
Part 2 - Styling
Always use the check config feature in the webinterface located at Configuration - General between edits.
To have the icon and badge colours changed:
This goes into configuration.yaml:
homeassistant:
customize_glob:
device_tracker.*:
state_card_mode: badges
templates:
theme: >
if (state === 'home') return 'green_badge'; else return 'red_badge';
Likely it can be dropped into customize_glob.yaml if you have this separate file and call it from configuration.yaml. For newbies reading this, realize that YAML uses indentation as part of code structure. So using wrong indentation will lead to errors. Also elements can only be called once. Here in the code above homeassistant: is called, which is by default in the configuration.yml already, so what you need to do is copy only new code and put it ‘inside’ the reach of homeassistant:.
Here an example of how the first part of your configuration.yaml might look when integrating the above code:
homeassistant:
latitude: 53
longitude: 9
elevation: 20
time_zone: CET
# Customization file
customize: !include customize.yaml
customize_glob:
device_tracker.*:
state_card_mode: badges
templates:
theme: >
if (state === 'home') return 'green_badge'; else return 'red_badge';
# Show links to resources in log and frontend
#introduction:
Continuing in configuration.yml:
frontend:
themes:
green_badge:
label-badge-red: green
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: green
red_badge:
label-badge-red: grey
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: red
Again here, frontend: is already in the configuration by default so insert the new code with the right indent.
Restart HA as described earlier.
Now it should work.
Borrowed most of this code from cameron earlier in this thread.
My questions still:
-
Would there be a better way to organize this? Like a different method instead of themes? Since themes will be displayed in the skin selector menu.
-
Can the label be renamed to something else? Since devices are not always away but just offline.
-
How about something like ‘state groups.’ Some devices are critical and always online, so when offline something must be wrong, thus you would want to show them as red when offline but show normal devices as orange when offline. Also, some devices can be offline but won’t leave the house thus when offline they should be given even another colour. Etc.
If no easy answer, I hope to answer the questions myself one day. At least CSS skills onboard. 
5 Likes
You sir are gold.
Finally all the info in one place and WORKING!.
BTW, I use Hassio, so I used manual install (local) and activated using 1.2 chapter from links above.
Thank you
ps.
Somebody make this a sticky and into documentation please.
Hi, I’m trying to use Custom UI usign lovelace withot success… I reproduce step by step @Saturnus guide.
- Installed and activated custom ui like their documentation. I can see it loaded in the info dev page.
- Add template under cuscomize_glob, and themes with cuscomize colour stiles in configuration.yaml:
- And a sesor has values and read the added templante:
What I’m doing wrong?
Thanks
Lovelace doesn’t support the theming for entities… unfortunately. You can customize the icons though
No much more yet , but it won’t theme entities anymore and _stateDisplay is gone also. Some other niceties too… even in regular Ha. Theming does still work in regular Ha though.
1 Like
I have trying to figure out how I can make this (Nest Protect) sensors, which return Ok now to green outline instead of red.
How does this work?
why don’t you give us the code of your sensor, tell us what it should look like, and we can help
1 Like
Cool! So what I have is these default badges from Nest integration.
No extra code, except default customisation:
sensor.entryway_nest_protect_boven_co_status:
friendly_name: CO2 Boven
sensor.entryway_nest_protect_boven_smoke_status:
friendly_name: Rook Boven
sensor.hallway_nest_protect_beneden_co_status:
friendly_name: CO2 Beneden
sensor.hallway_nest_protect_beneden_smoke_status:
friendly_name: Rook Beneden
I want to have the red line turn into green
Same with these ones (default badges again):
ok, for the text boxes below the badge, you need to set the unit_of_measurement of these sensors
for the coloring of the badges you can use the themes, but you’d need to think about the template first: when to use which colors. Have anything in mind?
use a template like this:
homeassistant:
customize:
sensor.whatever:
templates:
theme: >
if (state === 'home') return 'green';
return 'grey';
or
templates:
theme: >
if (state > 0) return 'orange';
return 'green';
you must have these themes defined to be able to use them of course. Also, you need to have custom-ui installed.
Hi @Mariusthvdb. I have placed all the custom-ui files as described in the link you’ve pointed to.
Can I verify this is working?
What I want to achieve is the labels green if home (thuis) en red for away (afwezig).
Can you help me with the next steps for that?
sure , you need a green theme:
green_badge:
label-badge-red: green
label-badge-background-color: white
label-badge-color: grey
label-badge-text-color: green
red_badge:
label-badge-red: grey
label-badge-background-color: white
label-badge-text-color: red
and save that with your other themes
next create template for the device_trackers:
homeassistant:
customize:
device_tracker.phone_xx:
templates:
theme: >
if (state === 'home') return 'green_badge';
return 'red_badge';
please note that this isn’t Lovelace, but old_style HA…
Thanks! I do have the Lovelace UI active and running. So where do I define the themes?
I’ve put this in a themes.yaml file:
see https://www.home-assistant.io/components/frontend/#defining-themes
it all depends on how you’ve setup your configuration so check the docs and adjust if needed
I have put this in my configuration.yaml:
frontend:
themes: !include themes.yaml
I have added this to my customize.yaml
device_tracker.iphone_martin:
entity_picture: /local/martin.jpg
friendly_name: Martin
templates:
theme: >
if (state === 'home') return 'green_badge';
return 'red_badge';
I have put this in yo my themes.yaml:
green_badge:
label-badge-red: green
label-badge-background-color: white
label-badge-color: grey
label-badge-text-color: green
red_badge:
label-badge-red: grey
label-badge-background-color: white
label-badge-text-color: red
At themes I see this (is that ok?)
Not green yet
