So this now shows. I don’t understand what I have now that is different? I had a sensor that showed the local and available before. This looks the same but with a different name. How do I use this in the button card that you show above? Also the reason that I liked the badges is that it is a small row at the top and it does not take much display space. Easy to glance and see what the status is on a lot of things vs cards.
Thanks for helping me understand templates a little more. Everyday something new to learn on Home Assistant.
this is incorrect, in the developer-tools/state page you can enter the template, but should enter the entity (hence the column title 
)
just to be sure, up to now I was helping you create this template sensor:
platform: template
sensors:
ha_uptodate:
friendly_name_template: >
{{states('sensor.ha_local_version')}}
value_template: >
{{state_attr('sensor.supervisor_updates','newest_version') == state_attr('sensor.supervisor_updates','current_version')}}
icon_template: >
{{ 'mdi:circle-outline' if states('sensor.supervisor_updates','newest_version') !=
states('sensor.supervisor_updates','current_version') else 'mdi:check-circle-outline' }}
unit_of_measurement: Up to date
that is not the binary_sensor, which is:
ha_uptodate:
value_template: >
{{states('sensor.ha_local_version') == states('sensor.ha_available_version')}}
the button card config is merely a front end representation of entities you made in the backend:
type: custom:button-card
template: button_body # <--- containing several other nested button card templates
entity: binary_sensor.ha_update_available
icon: mdi:home-assistant
name: Home Assistant
show_state: false
tap_action:
action: more-info
entity: sensor.ha_available_version
hold_action:
action: url
url_path: https://www.home-assistant.io/latest-release-notes/
styles:
card:
- font-size: 10px
grid:
- grid-template-areas: '"i i" "n n" "available available" "local local"'
icon:
- color: >
[[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
- width: 30%
- animation: >
[[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
custom_fields:
available:
- align-self: start
- justify-self: start
- --text-color-sensor: >
[[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]]
- --animation: >
[[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]]
local:
- align-self: start
- justify-self: start
custom_fields:
available: >
[[[ return `<span>Avail: </span> <span style='color: var(--text-color-sensor);animation: var(--animation)'>${states['sensor.ha_available_version'].state}</span>`; ]]]
local: >
[[[ return `<span>Local: <span style='color: grey;'>${states['sensor.ha_local_version'].state}</span></span>`; ]]]
this uses several nested button-card templates, as indicated in the comment, but should get you going
You are, To go back to the beginning, I just wanted to truncate the new version numbers as they no longer fit in a badge. You came up with another way of doing it (much better) if you know what you are doing. I’m still learning and it seems I have a lot more to learn than I currently know. Exercises like this are always good as it adds to my knowledge and I thank you for this. You show a button_body template something I have never used and something new I need to learn about.
1 Like
yes, never a dull moment when learning HA 
here’s the link for the button templates https://github.com/custom-cards/button-card/blob/master/README.md#configuration-templates
Wouldn’t I need the button_body template for this to work correctly?
Yes you would. But please keep your questions on this matter in 1 thread. And reading your other post: first need to understand how to load the templates in HA. You should study the docs in the button card first
Finally understood and it is loading correctly from my ui-lovelace.yaml file. Now can I try your button_body template?
Thanks. Sometimes the docs are clear to me and sometime they are not. If it was easier to add to them (still learning how) I would try and offer clearer (at least me) directions and examples. People sometimes forget that each card can require a lot of new knowledge or very little. It depends on the users experience and knowledge of the particular card, installation method, etc. The custom button card does a lot and for me it is a lot to learn.
sure, but don’t say I didn’t warn you with the line
# <--- containing several other nested button card templates
button_body:
button_body:
template:
- action_more
- main_config
- styles_cg
- styles_img_cell
- styles_label
- styles_name_left
- styles_state
styles:
icon:
- color: grey
lock:
- color: red
card:
- background-color: var(--card-background-color)
- color: var(--primary-color)
action_more:
action_more:
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
main_config:
main_config:
color: auto
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
styles_cg
styles_cg:
styles:
card:
- font-family: Helvetica
- padding: 5px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
style_img_cell:
styles_img_cell:
styles:
img_cell:
- align-items: start
- justify-content: start
and
styles_label:
styles:
label:
- font-family: Helvetica
- font-size: 11px
- justify-self: start
- text-align: start
styles_name:
styles:
name:
- font-family: Helvetica
- font-size: 13px
- font-weight: bold
styles_state:
styles:
state:
- font-family: Helvetica
- font-size: 11px
- font-weight: bold
- justify-self: start
- text-align: start
- text-transform: capitalize
some further de-duplication can be done (especially on the font), but I need these separately for other buttons, so, as always, tailor to your own needs
1 Like
Is this added to RAW configurator?
Thanks
I just discovered that you can set the badge image using service set_state (under Python scripts), changing the attribute “entity_picture” to point to the image’s url.
Could you provide an example and maybe some more details for those of us still trying to figure all this out. 
Sure. Go to the States screen in the Home Assistant Lovelace UI where you can experiment with Set State at the top of the page.
Example: setting the badge icon for the sensor.yr.symbol badge
Entity: sensor.yr.symbol
State: Mostly cloudy
State attributes: {“entity_picture”: “http://weather.gc.ca/weathericons/03.gif”}
In a Node Red “Call Service” node:
Server: Home Assistant
Domain: python_script
Service: set_state
Entity id: sensor.yr_symbol
Data: {“entity_picture”: “http://weather.gc.ca/weathericons/03.gif”}
It would be similar in a Home Assistant automation action.
Using the set_state function on the States screen wipes out any attributes that you don’t set (don’t worry, they come back when you restart HA or the associated component code resets them). Using the set_state function in Node Red or an automation doesn’t do that - it affects only the attributes you name.
So how do you do this for a person, to update the entity picture of there badge?
You need a url pointing to the picture file. It can be a local url pointing to a picture on your HA drive. But remember that HA has to have permission to access the directory where the picture is located.
3 Likes
Very interested in this, can you post your code, please?
There’s the 1st row badges:
badges:
- entities:
- entity: sun.sun
icon: mdi:moon-waxing-crescent
name: Nighttime
style: |
:host {
--label-badge-red: black;
}
state_filter:
- below_horizon
type: entity-filter
- entities:
- entity: sun.sun
icon: mdi:white-balance-sunny
name: Daytime
style: |
:host {
--label-badge-red: yellow;
}
state_filter:
- above_horizon
type: entity-filter
- entity: sensor.period_of_day
style: |
:host {
--label-badge-red: {% if is_state('sensor.period_of_day', 'Night') %} black {% elif is_state('sensor.period_of_day','Day') %} yellow {% else %} moccasin {% endif %};
}
- entity: sensor.next_sunrise
style: |
:host {
--label-badge-red: darksalmon;
}
- entity: sensor.next_sunset
style: |
:host {
--label-badge-red: rgb(255,239,213);
}
- entity: person.daniel_brunt
style: |
:host {
--label-badge-red: {% if is_state('person.daniel_brunt', 'home') %} green {% elif is_state('person.daniel_brunt','Work') %} blue {% else %} red {% endif %};
}
- entity: person.may_yang
style: |
:host {
--label-badge-red: {% if is_state('person.may_yang', "May's Home") %} green {% elif is_state('person.may_yang', "May's Work") %} blue {% else %} red {% endif %};
}
- entity: binary_sensor.ha_uptodate
show_icon: true
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.ha_uptodate', 'on') %} green {% else %} red {% endif %};
}
- entity: sensor.ha_uptodate
show_icon: true
style: |
:host {
--label-badge-red: {% if is_state('sensor.ha_uptodate', 'Current') %} green {% else %} red {% endif %};
}
1 Like
2nd row:
badges:
- entity: binary_sensor.garage_light
name: Garage
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.garage_light', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.fireplace_light
name: Fireplace
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.fireplace_light', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.living_room_light
name: Living Room
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.livinig_room_light', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.pole_lamp
name: Pole Lamp
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.pole_lamp', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.office_lights
name: Office
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.office_lights', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.bedroom_lamp_1
name: Bedroom 1
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.bedroom_lamp_1', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.bedroom_lamp_2
name: Bedroom 2
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.bedroom_lamp_2', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.bathroom_light
name: Bathroom
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.bathroom_light', 'on') %} yellow {% else %} grey {% endif %};
}
3rd row:
badges:
- entity: binary_sensor.my_pc_is_active
name: PC
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.my_pc_is_active', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.bathroom_motion
name: Bathroom
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.bathroom_motion', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.bedroom_motion
name: Bedroom
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.bedroom_motion', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.front_door_motion
name: Front Door
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.front_door_motion', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.garage_motion
name: Garage
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.garage_motion', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.kitchen_motion
name: Kitchen
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.kitchen_motion', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.living_room_motion
name: Living Room
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.living_room_motion', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: binary_sensor.office_motion
name: Office
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.office_motion', 'on') %} yellow {% else %} grey {% endif %};
}
- entity: input_boolean.sleep_mode
style: |
:host {
--label-badge-red: {% if is_state('input_boolean.sleep_mode', 'on') %} green {% else %} grey {% endif %};
}
- entity: binary_sensor.night_mode
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.night_mode', 'on') %} green {% else %} grey {% endif %};
}
- entity: binary_sensor.bedroom_night_mode
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.bedroom_night_mode', 'on') %} green {% else %} grey {% endif %};
}
- entity: binary_sensor.living_room_night_mode
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.living_room_night_mode', 'on') %} green {% else %} grey {% endif %};
}
- entity: binary_sensor.living_room_override
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.living_room_override', 'on') %} green {% else %} grey {% endif %};
}
- entity: binary_sensor.living_room_low_light_trigger
style: |
:host {
--label-badge-blue: {% if is_state('binary_sensor.living_room_low_light_trigger', 'on') %} green {% else %} grey {% endif %};
}
1 Like
Some of the code:
default_config:
homeassistant:
customize: !include customize.yaml
customize_domain:
switch:
templates:
icon_color: >
if (state == 'on') return 'green';
return 'red';
icon: >
if (state == 'on') return 'mdi:toggle-switch';
return 'mdi:toggle-switch-off';
light:
templates:
icon_color: >
if (state == 'off') return 'rgb(25,25,25)';
if (attributes.brightness < 25) return 'rgb(51,51,0)';
if (attributes.brightness < 50) return 'rgb(102,102,0)';
if (attributes.brightness < 75) return 'rgb(153,153,0)';
if (attributes.brightness < 100) return 'rgb(204,204,0)';
if (attributes.brightness < 125) return 'rgb(255,255,0)';
if (attributes.brightness < 150) return 'rgb(255,255,51)';
if (attributes.brightness < 175) return 'rgb(255,255,102)';
if (attributes.brightness < 200) return 'rgb(255,255,153)';
if (attributes.brightness < 225) return 'rgb(255,255,204)';
if (attributes.brightness < 250) return 'rgb(255,255,230)';
return 'rgb(255,255,255)';
lock:
templates:
icon_color: >
if (state == 'locked') return 'green'; return 'red';
customize_glob:
# '*.*':
# custom_ui_state_card: state-card-custom-ui
sensor.*_battery:
templates:
icon_color: >
if (state < 30) return 'red';
if (state < 60) return 'yellow';
return 'green';
binary_sensor.*:
state_card_mode: badges
templates:
binary_sensor.*_motion:
templates:
icon: >
if (state == 'on') return 'mdi:motion-sensor';
return 'mdi:human-male';
icon_color: >
if (state == 'on') return 'yellow';
return 'grey';
binary_sensor.*_occupancy:
state_card_mode: badges
templates:
icon: >
if (state == 'on') return 'mdi:motion-sensor';
return 'mdi:human-male';
icon_color: >
if (state == 'on') return 'yellow';
return 'grey';
device_tracker.*:
state_card_mode: badges
templates:
packages: !include_dir_named packages/
I had to template the lights:
- platform: template
sensors:
ha_uptodate:
# friendly_name_template: > # <--this is not available for the binary_sensor integration
# {{states('sensor.ha_local_version')}}
value_template: >
{{states('sensor.ha_local_version') == states('sensor.ha_available_version')}}
icon_template: >
{% if states('sensor.ha_local_version') == states('sensor.ha_available_version') %}
mdi:check-circle-outline
{% else %}
mdi:close-octagon-outline
{% endif %}
garage_light:
friendly_name: Garage
value_template: "{{ is_state('light.garage_light','on') }}"
icon_template: mdi:lightbulb{% if is_state('light.garage_light', 'on') %}-on-outline{% endif %}
front_porch_light:
friendly_name: Front Porch
value_template: "{{ is_state('light.front_porch_light','on') }}"
icon_template: mdi:lightbulb{% if is_state('light.froont_porch_light', 'on') %}-on-outline{% endif %}
living_room_light:
friendly_name: Living Room
value_template: "{{ is_state('light.living_room_light','on') }}"
icon_template: mdi:lightbulb{% if is_state('light.living_room_light', 'on') %}-on-outline{% endif %}
fireplace_light:
friendly_name: Fireplace
value_template: "{{ is_state('light.fireplace_light','on') }}"
icon_template: mdi:lightbulb{% if is_state('light.fireplace_light', 'on') %}-on-outline{% endif %}
pole_lamp:
friendly_name: Pole Lamp
value_template: "{{ is_state('light.pole_lamp','on') }}"
icon_template: mdi:lightbulb{% if is_state('light.pole_lamp', 'on') %}-on-outline{% endif %}
office_lights:
friendly_name: Office
value_template: "{{ is_state('light.office_lights','on') }}"
icon_template: mdi:lightbulb{% if is_state('light.office_lights', 'on') %}-on-outline{% endif %}
bedroom_lamp_1:
friendly_name: Bedroom 1
value_template: "{{ is_state('light.bedroom_lamp_1','on') }}"
icon_template: mdi:lightbulb{% if is_state('light.bedroom_lamp_1', 'on') %}-on-outline{% endif %}
bedroom_lamp_2:
friendly_name: Bedroom 2
value_template: "{{ is_state('light.bedroom_lamps','on') }}"
icon_template: mdi:lightbulb{% if is_state('light.bedroom_lamp_2', 'on') %}-on-outline{% endif %}
bedroom_lamps:
friendly_name: Bedroom
value_template: "{{ is_state('light.bedroom_lamps','on') }}"
icon_template: mdi:lightbulb-multiple{% if is_state('light.bedroom_lamps', 'on') %}-outline{% endif %}
bathroom_light:
friendly_name: Bathroom
value_template: "{{ is_state('light.bathroom_light','on') }}"
icon_template: mdi:lightbulb{% if is_state('light.bathroom_light', 'on') %}-on-outline{% endif %}
1 Like
I see you are using custom-ui, but still have some deprecated code there. please note that state_card_mode is no longer supported (for a very long time, since Lovelace emerged ) and I suggest you take out that code. It is a remnant from home-assistant-custom-ui/docs/features.md at 5274c9b1e51d8a4ba409cbf510d286472d42c328 · andrey-git/home-assistant-custom-ui · GitHub, but was only used in Home Assistant States.
You can however use the custom- card Thomas made for badges is you so desire to show badges I the view: GitHub - thomasloven/lovelace-badge-card: 🔹 Place badges anywhere in the lovelace layout
(not sure if you updated custom-ui but here’s the current version)