thanks, I’ve changed all my templating, icon and icon_color, and am trying your colorings 
very very nice indeed
making progress, changing from rgb to hs_color, Ive customized my lights showing both as extra_data_template, enabling easy translation between the both of them. Im not yet satisfied with the displayed result which i hope you can help me with:
light.dining_corner:
extra_data_template: >
if (attributes.hs_color || attributes.rgb_color)
return (attributes.hs_color ? attributes.hs_color + ' - Hs ': ' ')
+ (attributes.rgb_color ? attributes.rgb_color + ' - Rgb ': ' ');
return null;
shows:
Id like the colors to show as:
Hs: 14.648, 83.529, Rgb: 255, 94, 42
What would be the way to adapt the above template to do so? The pat im struggling with is the ': ’ ’ which won’t work if I simply reorder to:
if (attributes.hs_color || attributes.rgb_color)
return ('HS: ' + attributes.hs_color ? attributes.hs_color : ' ')
+ ('Rgb: ' + attributes.rgb_color ? attributes.rgb_color : ' ');What you are looking at is a one line if statement:
if attributes.hs_color
return attributes.hs_color + ' - Hs '
else
return ' '
is eqivalent to:
return (attributes.hs_color ? attributes.hs_color + ' - Hs ' : ' ')
where the question mark is what happens if the if statement evaluates to true and the colon is what happens if the if statement evaluates to false.
that single line is typically written like this to make more sense:
return attributes.hs_color
? attributes.hs_color + ' - Hs '
: ' '
This should work.
light.dining_corner:
extra_data_template: >
if (attributes.hs_color || attributes.rgb_color)
return (attributes.hs_color ? 'HS: ' + attributes.hs_color: ' ')
+ (attributes.rgb_color ? 'Rgb: ' + attributes.rgb_color: ' ');
return null;
1 Like
well thank you, it most certainly does now. Couldn’t find any background on this notation, so this is most educational, as ever. Really appreciate your posts !
I take it I could add a third, attributes.xy_color and add an extra line for this without issues?
btw, is the return null; necessary?
If there is no attribute, it cant be displayed, so adding this might be superfluous?
While i have your expertise at hand, pleas let me ask how to have a scene turn on a light with lets say hs color.
- name: Opstaan
entities:
light.kist:
state: on
transition: 4
brightness: 30
hs_color: [10,100]
# color_temp: 153
# rgb_color: [255,93,42]
If i use the rgb_color, the light shows up fine, but using the hs_color somehow won’t go, and confuses the Hue setup…(which is what this is for)
I started out with more detailed hs settings like this:
But i am afraid that is a no go also? Using hs_color: [14.648, 83.529]
thanks,
Marius
I believe the null is necessary because you need to return something, and if that if-statement fails during any circumstances, then null should be returned. It’s for safety.
As for the hs_color, I’m not sure as I don’t have one of those devices.
ok thanks, i will do so.
I asked because many examples here: home-assistant-custom-ui/docs/templates.md at master · andrey-git/home-assistant-custom-ui · GitHub don’t have an ‘else’.
extra_data_template: >
"${attributes.power_consumption !== 0 ? (attributes.power_consumption + 'W') : ''}"
finally I understand this one;-) that is, what is the $ for?
tweaked it a little bit further:
extra_data_template: >
if (attributes.hs_color || attributes.rgb_color)
return (attributes.hs_color ? 'Hs: ' + attributes.hs_color: ' ')
+ (attributes.rgb_color ? ' | Rgb: ' + attributes.rgb_color: ' ');
return null;
since there is the return null; safeguard, why wouldn’t this be a valid template:
extra_data_template: >
if (attributes.hs_color || attributes.rgb_color)
return 'Hs: ' + attributes.hs_color
+ ' | ' + 'Rgb: ' + attributes.rgb_color;
return null;
this would be in accordance with all other template i use for single attributes like:
light.kist:
extra_data_template: >
if (attributes.hs_color) return 'Hs: ' + attributes.hs_color;
return null;
Hi,
Is it possible to show the slider only when the switch is on?
thanks
There is no built-in support for that, but the system is flexible enough so you can template state_card_mode to be either no-slider or another value depending on state
That’s indeed working like a charm 
templates:
state_card_mode: if (state === 'on') return 'break-slider'; else return 'no-slider';
2 Likes
does it work with the confirm_controls: true? not showing up here yet.
would be a cool built-in setting though:
hide_when_off: true
hey thank for the suggestion where do i have to put this command in the config? under the customize or before that? thanks
EDIT: Got it Thanks!
HI @andrey,
been trying some customization with group/tab icons.
Changing the icon works just fine, based on a template, changing the color won’t just yet. Isn’t this possible? or do we need a special customization for that.
tried:
group.personal:
templates:
icon: >
if (entities['sensor.home_badge'].state === '0') return 'mdi:account-off';
return 'mdi:account';
# icon_color: >
# if (entities['sensor.home_badge'].state === 1) return 'rgb(37, 145, 60)';
# if (entities['sensor.home_badge'].state === 2) return 'rgb(142, 198, 65)';
# if (entities['sensor.home_badge'].state === 3) return 'rgb(202, 219, 43)';
# if (entities['sensor.home_badge'].state === 4) return 'rgb(255, 194, 15)';
# if (entities['sensor.home_badge'].state === 5) return 'rgb(244, 101, 35)';
# if (entities['sensor.home_badge'].state === 6) return 'rgb(151, 26, 30)';
# return 'rgb(90, 90, 90)';
and
# {% if is_state('sensor.home_badge' , '1')%} rgb(37, 145, 60)
# {% elif is_state('sensor.home_badge', '2')%} rgb(142, 198, 65)
# {% elif is_state('sensor.home_badge', '3')%} rgb(202, 219, 43)
# {% elif is_state('sensor.home_badge', '4')%} rgb(255, 194, 15)
# {% elif is_state('sensor.home_badge', '5')%} rgb(244, 101, 35)
# {% elif is_state('sensor.home_badge', '6')%} rgb(151, 26, 30)
# {%endif%}How and where to put this inside configurations?
For customize i understand, but for the first lines, where?
Not me, please tell me how you got it…
Not sure what you are trying to do there. For icon you can use icon_template
I am trying to let the ‘menu’-icon change color according to the number of people home. Obviously this is a group with view: true, should have mentioned that, sorry.
it changes when no-one is home to mdi:account-off just fine.(cant show you since lots of people around 
) 
Where to find “state_card_custom_ui_secondary” ?
Define themes starting from first line in frontend.yaml
From first line in customize.yaml
Sorry but do not understand, can you please write me an example?
Right now i have in my customize_glob this entry:
input_boolean.mauhome:
state_card_custom_ui_secondary: state-card-custom_boolean
But in the frontend the input_boolean.mauhome disappeared after this.
What else i must configure to have that?
In configuration.yaml
customize: !include include/customize.yaml
# Enables configuration UI
config:
# Enables the frontend
frontend: !include include/frontend.yaml
In frontend.yaml:
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-floorplan.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/state-card-floorplan.html
javascript_version: auto
themes:
green_1:
primary-text-color: ‘#008000’
sad_1:
primary-text-color: ‘#ff0000’
In customize.yaml
sensor.speedtest_ping:
custom_ui_state_card: state-card-custom-ui
icon: mdi:speedometer
friendly_name: Ping
templates:
theme: “if (state == ‘unknown’) return ‘sad_1’; else return ‘green_1’;”
hs_color: “if (state === ‘unknown’) return [0,100]; else return [120,100];”