and then declare this in customize.yaml (or in subfolders if you organize your yaml files differently, as stated in your configuration file.
ok sorry for my lack of knowledge.
i have in my confi…yaml only
frontend:
and i put this in the customize.yaml, but nothing hapend.
and i have the custom-ui instaled, i must miss something.
sorry and thanks for you pantiance in advance.
hi Mariusthvdb,
could you hel see if my config is right?
best regards
sure, but you need to post if first;-)
configuration.yaml
customize: !include customize.yaml
customize_glob: !include customize_glob.yaml
customizer:
custom_ui: local
#introduction:
frontend:
and on custimeze.yaml i put your config to change the text color bu didn’t work but the icon_color is working.
tell me you if you need to see more
best regards
If i read your config correctly, I suspect you don’t have a theme configured.
for the theme green to work you need to configure it first:
create a themes.yaml in which you declare your themes as follows:
green:
primary-text-color: green
# paper-card-background-color: white
paper-item-icon-color: green
secondary-text-color: green
label-badge-background-color: white
label-badge-text-color: green
label-badge-red: green
label-badge-border-color: lightgrey
red:
primary-text-color: red
# paper-card-background-color: white #'#fcbba1'
paper-item-icon-color: red
secondary-text-color: red
label-badge-background-color: white #'#fcbba1'
label-badge-text-color: red
blue:
primary-text-color: blue
paper-card-background-color: white" #'#fcbba1'
paper-item-icon-color: blue
secondary-text-color: blue
label-badge-background-color: white #'#fcbba1'
label-badge-text-color: blue
label-badge-red: blue
label-badge-border-color: blue
bluewhite:
primary-text-color: bluewhite
paper-card-background-color: white
paper-item-icon-color: bluewhite
secondary-text-color: blue
label-badge-background-color: white
label-badge-text-color: blue
in configuration.yaml, use:
frontend: !include frontend.yaml
in frontend.yaml, state:
themes: themes.yaml and the custom-ui you use:
javascript_version: auto
themes: themes.yaml #!include_dir_merge_named frontend_themes
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-tiles.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
# - /local/custom_ui/state-card-table.html
# - /local/custom_ui/state-card-custom_scene.html
# - /local/custom_ui/state-card-text.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/state-card-tiles_es5.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
seems a bit of a circular system, but building it like this makes it modular and expandable…
lateron you might want to expand to themes: !include_dir_merge_named frontend_themes setup, and throw in any theme you like in that folder.
btw, when posting yaml code, use the </> button in the editor, to show the code as code, which makes it possible to check for errors
yes i believe that is the problem. i don’t have themes.
i’m a liitle confuse.
in frontend i use -
frontend: !include frontend.yaml
in frontend.yaml i put - themes: !include_dir_merge_named frontend_themes
an in the directory what do i put you put 2 examples of themes.yaml? i put this -
green:
primary-text-color: green
# paper-card-background-color: white
paper-item-icon-color: green
secondary-text-color: green
label-badge-background-color: white
label-badge-text-color: green
label-badge-red: green
label-badge-border-color: lightgrey
red:
primary-text-color: red
# paper-card-background-color: white #'#fcbba1'
paper-item-icon-color: red
secondary-text-color: red
label-badge-background-color: white #'#fcbba1'
label-badge-text-color: red
blue:
primary-text-color: blue
paper-card-background-color: white" #'#fcbba1'
paper-item-icon-color: blue
secondary-text-color: blue
label-badge-background-color: white #'#fcbba1'
label-badge-text-color: blue
label-badge-red: blue
label-badge-border-color: blue
bluewhite:
primary-text-color: bluewhite
paper-card-background-color: white
paper-item-icon-color: bluewhite
secondary-text-color: blue
label-badge-background-color: white
label-badge-text-color: blue
or this -
javascript_version: auto
themes: themes.yaml #!include_dir_merge_named frontend_themes
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-tiles.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
# - /local/custom_ui/state-card-table.html
# - /local/custom_ui/state-card-custom_scene.html
# - /local/custom_ui/state-card-text.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/state-card-tiles_es5.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
thnks in advance
or didi you ment this here 
customizer:
custom_ui:
javascript_version: auto
themes: !include_dir_merge_named frontend_themes
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-tiles.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
# - /local/custom_ui/state-card-table.html
# - /local/custom_ui/state-card-custom_scene.html
# - /local/custom_ui/state-card-text.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/state-card-tiles_es5.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.htmlyes, thats it. check the indent on customizer. Not sure if that should be there, i use a separate customizer.yaml file and have customizer: !include customizer.yaml in the configuration.yaml, no custom_ui there either.
is there anything in your customizer.glob?
most important thing there is:
##########################################################################################
# Customize entities matching a pattern
# to override use: custom_ui_state_card: null
##########################################################################################
"*.*":
custom_ui_state_card: state-card-custom-ui
so you can use the options of the custom_ui on all cards in Hassio.
have another ook at https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/activating.md to see if you dont mix different possibilities of setting up.
I use the local install https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/installing.md#local-install
customizer.glob no nothing i deleted .
now i have
customizer: !include customizer.yaml
and inside
javascript_version: auto
themes: !include_dir_merge_named frontend_themes
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-tiles.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
# - /local/custom_ui/state-card-table.html
# - /local/custom_ui/state-card-custom_scene.html
# - /local/custom_ui/state-card-text.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/state-card-tiles_es5.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
is like this?
i did that and use this config
sensor.onofredual1601882_sensor_portao:
friendly_name: Estado do Portão
templates:
icon: mdi:gate
icon_color: if (state === ‘CLOSE’) return ‘rgb(255, 0, 0)’; else return ‘rgb(51, 255, 51)’;
theme: >
if (state === ‘CLOSE’) return ‘rgb(255, 0, 0)’; return ‘rgb(51, 255, 51)’;
i used to have the icon color change but now iven the icon is not correct
where do i put this ?
# Customize entities matching a pattern
# to override use: custom_ui_state_card: null
##########################################################################################
"*.*":
custom_ui_state_card: state-card-custom-uiconfiguration.yaml:
##########################################################################################
# Base configuration
##########################################################################################
homeassistant:
name: Name
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
config:
frontend: !include frontend.yaml
customizer: !include customizer.yaml
frontend.yaml:
##########################################################################################
# https://home-assistant.io/components/frontend/#javascript_version
# https://home-assistant.io/developers/frontend_creating_custom_ui/
##########################################################################################
##########################################################################################
# https://github.com/home-assistant/home-assistant/pull/10776
##########################################################################################
javascript_version: auto
themes: !include_dir_merge_named frontend_themes
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-tiles.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
# - /local/custom_ui/state-card-table.html
# - /local/custom_ui/state-card-custom_scene.html
# - /local/custom_ui/state-card-text.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
- /local/custom_ui/state-card-tiles_es5.html
- /local/custom_ui/state-card-value_only.html
- /local/custom_ui/custom-weather-card.html
# - /local/custom_ui/state-card-custom_scene.html
# - /local/custom_ui/state-card-text.html
folder frontend_themes contains:
themes_templating.yaml contains:
##########################################################################################
# Themes for templating entities
##########################################################################################
red:
primary-text-color: red
# paper-card-background-color: white #'#fcbba1'
paper-item-icon-color: red
secondary-text-color: red
label-badge-background-color: white #'#fcbba1'
label-badge-text-color: red
blue:
primary-text-color: blue
paper-card-background-color: white" #'#fcbba1'
paper-item-icon-color: blue
secondary-text-color: blue
label-badge-background-color: white #'#fcbba1'
label-badge-text-color: blue
label-badge-red: blue
label-badge-border-color: blue
bluewhite:
primary-text-color: bluewhite
paper-card-background-color: white
paper-item-icon-color: bluewhite
secondary-text-color: blue
label-badge-background-color: white
label-badge-text-color: blue
green:
primary-text-color: green
# paper-card-background-color: white
paper-item-icon-color: green
secondary-text-color: green
label-badge-background-color: white
label-badge-text-color: green
label-badge-red: green
label-badge-border-color: lightgrey
yellow:
primary-text-color: yellow
# paper-card-background-color: lightgrey
paper-item-icon-color: yellow
secondary-text-color: yellow
label-badge-background-color: lightgrey
label-badge-text-color: yellow
label-badge-red: grey
label-badge-border-color: yellow
yellow_only:
primary-text-color: yellow
paper-item-icon-color: yellow
secondary-text-color: yellow
label-badge-text-color: yellow
orange:
primary-text-color: orange
# paper-card-background-color: white
paper-item-icon-color: orange
secondary-text-color: orange
label-badge-background-color: white
label-badge-text-color: orange
label-badge-red: orange
label-badge-border-color: orange
brown:
primary-text-color: brown
# paper-card-background-color: white
paper-item-icon-color: brown
secondary-text-color: brown
label-badge-background-color: white
label-badge-text-color: brown
label-badge-red: brown
label-badge-border-color: brown
brown_only:
primary-text-color: brown
paper-item-icon-color: brown
secondary-text-color: brown
label-badge-border-color: brown
grey:
primary-text-color: grey
# paper-card-background-color: white
paper-item-icon-color: grey
secondary-text-color: grey
label-badge-red: grey
label-badge-border-color: lightgrey
label-badge-background-color: white
label-badge-text-color: grey
folder customize contains:
customize_device_trackers.yaml contains:
device_tracker.asus_router:
templates:
theme: >
if (state === 'home') return 'green';
return 'red';
_stateDisplay: >
if (state === 'home') return 'Online';
return 'Offline';
customize_glob.yaml contains:
##########################################################################################
# Customize entities matching a pattern
# to override use: custom_ui_state_card: null
##########################################################################################
"*.*":
custom_ui_state_card: state-card-custom-ui
device_tracker.*_bt:
templates:
icon: >
if (state === 'home') return 'mdi:bluetooth';
return 'mdi:bluetooth-off';
group.*_lights:
show_last_changed: true
think that should get you going for starters…
so i need the customize_glob.yaml ?
i got the icon back but the text still normal 
estais like this
but i want the text at the same color has the logo
and i have this in the custumize_sensor.yaml
sensor.onofredual1601882_sensor_portao:
friendly_name: Estado do Portão
templates:
icon: mdi:gate
icon_color: if (state === 'CLOSE') return 'rgb(255, 0, 0)'; else return 'rgb(51, 255, 51)';
theme: >
if (state === 'CLOSE') return 'rgb(255, 0, 0)'; return 'rgb(51, 255, 51)';this is not a theme. you are declaring a color.
also, if this is not a template sensor ( cant see because you didnt provide the sensor declaration) you should not use the icon: mdi:gate here. Do that in the sensor declaration, just to be methodical. On the other hand, if this is a template sensor, it could be here, and, of course, if you want the icon to change depending in the state of the sensor.
change:
icon_color: if (state === 'CLOSE') return 'rgb(255, 0, 0)'; else return 'rgb(51, 255, 51)';
into
icon_color: <
if (state === 'CLOSE') return 'rgb(255, 0, 0)';
return 'rgb(51, 255, 51)';
the else is not necessary, this makes it cleaner and easier to read.
btw, are you sure the state is in capitals? never seen that before. could you post a screenshot of the sensor in the dev tools <> ?
the icon is changing color but i wanto to the all line to change color.
you men to put like this
theme: >
if (state === 'home') return 'green';
return 'red';
in the dev is in cp the name, refrase the icon color changes but i want the all line to change.
not sure what you say here, you mean the name is in capitals? or the state. Makes a big difference, when you want the state to be the base of your template. You need to have the state, and have it exact the way it is. If it is False, don’t use ‘false’ in your template. Most of the time template errors arise by not following the exact state.
theme: >
if (state === 'home') return 'green';
return 'red';
indeed. thats what you want, after having successfully made the themes in your themes.yaml…
note that now you use ‘home’ instead of ‘CLOSE’. as long as you don’t post a screenshot of the dev-tools of this sensor, we cant be of assistance debugging this I am afraid. I am a bit puzzled how the icon can change color if you use the wrong state… If your not, than use the exact same state in the theme template here. should work than.
i put home because i copy your example but i have CLOSE.
here the screen shop
