I use hassbian so hacs is not available (by my knowlegde)
Is it possible to place the text on top of an image?
I tried without any luck.
HACS is just a custom component, it works everywhere.
What do you mean by âon topâ? You want to display for example the name on top of the icon?
Is there a way to place a entity_picture in the top right side of the card?
browns:
show_entity_picture: true
show_state: false
entity_picture: /local/icons/browns.png
aspect_ratio: 2/1
name: Next Game
styles:
card:
- background-color: '#000000'
- border-radius: 5%
- padding: 5%
- color: ivory
- font-size: 15px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i vs" "n n" "date date" "team team" "location location"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: >
[[[
if (entity.state < 60) return 'lime';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- size: 110%
# - margin-top: -15%
custom_fields:
vs:
- show_entity_picture: true
- entity_picture: /local/icons/jets.png
- align-self: start
- justify-self: end
- font_size: 25px
date:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
team:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
location:
- align-self: middle
- justify-self: start
custom_fields:
vs: >
[[[
return `<ha-icon
entity_picture="/local/icons/jets.png"
style="width: 20px; height: 20px; color: white;">
# </ha-icon><span>${"/local/icons/jets.png"}</span>`
]]]
date: >
[[[
return `<ha-icon
icon="mdi:calendar"
style="width: 20px; height: 20px; color: orange;">
</ha-icon><span> <span style="width: 100%; color: orange;">${states['sensor.browns_start'].state}</span></span>`
]]]
team: >
[[[
return `<ha-icon
icon="mdi:football"
style="width: 20px; height: 20px; color: orange;">
</ha-icon><span> <span style="width: 100%; color: orange;">${states['sensor.browns_game'].state}</span></span>`
]]]
location: >
[[[
return `<ha-icon
icon="mdi:map-marker"
style="width: 15px; height: 15px; color: orange;">
</ha-icon><span> <span style="width: 100%; color: orange;">${states['sensor.browns_location'].state}</span></span>`
]]]
Yes, but your vs custom field is wrong (ha-icon is for an icon, as its name tells it 
):
styles:
custom_fields:
vs:
- change the size here (width and/or height)
custom_fields:
vs: '<img src="/local/icons/jets.png">'
1 Like
Thanks for the reply.
ok I got the entity_picture to show!
but it is super big and covers the whole card.
custom_fields:
vs: >
return '<img src="/local/icons/jets.png">'`
and
styles:
custom_fields:
vs:
- height: 25%
but the size is not changing.
yes that would be nice.
I would be even more interested in an overlay_image. Usecase: Have a button with the image of a person(device_tracker), and overlay it with an image for the zone theyâre in.
Right now I have rather complex templates to accomplish that, and, more importantly, have many dedicated zoned icons for all persons in my houshold.
If Overlaying were possible, it would seriously cut down on the templates, and the amount of dedicated images.
could this be done with a custom_field: zone_image, have the base person image fill the full button, and show the custom zone_image in a corner?
âupdateâ
this seems to be a start:
button_picture_family_overlay:
size: 75%
show_state: false
show_label: false
show_name: false
show_entity_picture: true
color_type: card
aspect_ratio: 1/1
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
custom_fields:
zone_picture: '<img src="/local/flags/Nl.png" height= 50% width= 50%>'
styles:
custom_fields:
zone_picture:
- align-items: flex-start
- justify-content: flex-end
- padding: 2px 2px
# - opacity: 0.5
- position: absolute
- left: 45%
- bottom: 10%
card:
- border-radius: 6px
- box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
entity_picture:
- border-radius: 6px
state:
though I am totally confused as to the workings of left and right in the styles, and the way it interacts with the height and width in the html tag for the image. (I need the image to be in the corner of the image, and not the button. Since the image is scaled at 75% this is an extra challenge, and I donât know eg if I should use padding at all, and some of the other layout properties.)
More importantly even, I need a template for this in the entity_picture field:
{% set person = states.device_tracker.life360_name %}
{% set zones = states.zone | map(attribute='name')|list %}
{% if person.state == 'home' %} ' '
{% elif person.attributes.country_code and person.attributes.country_code != 'nl' and
person.state not in zones and
person.state not in ['moving', 'driving'] %}
/local/zones/overlay_{{person.attributes.country_code}}.png
{% else %}
/local/zones/overlay_{{person.state|lower|replace(' ','_')}}.png
{% endif %}
where the first line should be using the entity of the button. Hope you can help me here, would really be magic!
Okay, after another try I get the community tab. So something is fixed.
how can I get this template to show the image it points to in a custom_fields:
custom_fields:
zone_image: >
'<img src= states["sensor.person_overlay_image"].state;height= 50% width= 50%>'
the state is in the form of: /local/zones/not_home.png and of course there are images for the zonesâŚ
thanks for having a look and assist.
Like that (plus your img format was wrong):
custom_fields:
zone_image: >
[[[
return `<img src="${states["sensor.person_overlay_image"].state}" style="height: 50%; width: 50%;">`
]]]
thanks!
I can see of the correct sensor 
need some time to position it correctly now.
(deleted a previous posting, because i made an error causing it to not show correctly.) ignore the edit.
still would love a suggestion for post
which I made into a dedicated post on Rewrite this Jinja template to JS for use in Button-card concerning the template.
Hope you can find some time to have a look
Hi guys!
I am working with my project and I am trying to get an icon in the label section.
I get it to work if I set it like:
var icon_one = âmdi:door-openâ;
But how shall I do if I want to set that mdi so it mirrors the icon another sensor is having?
I want to show the icon of sensor.battery_kitchen_pir_sensor without 25 more lines in the lovelaceâŚ
Is it possible to fix that? Like something maybe like this?
var icon_one = âmdi: + {{ states.binary_sensor.motion_sensor_158d000165fff0.attributes.icon }}â or something?
youâre mixing JS and Jinja here which wonât goâŚ
if anything would work, try this:
[[[
var icon_one = 'mdi:' + states['binary_sensor.motion_sensor_158d000165fff0'].attributes.icon;
return icon_one;
]]]
if this would work (getting the attribute icon from your sensor), it would most likely already contain the âmdi:â bit in the attribute? if so, then leave that out of the template.
can you show the template in jinja ? does this {{ states.binary_sensor.motion_sensor_158d000165fff0.attributes.icon }} or {{ state_attr('binary_sensor.motion_sensor_158d000165fff0','icon') }}actually show an output in the dev-template?
if youâve set the binary_sensor with a device_class, it doesnât show the icon as attribute.
btw, please note that this is not valid for the custom_fields that need yet another language coding/syntax, and would be in the form of:
[[[ return `<ha-icon icon="mdi:lock-alert" style="width: 22px; height: 22px;"> </ha-icon>` ]]]
1 Like
I copypasted the wrong sensor in my question⌠Sorry! The sensor was sensor.battery_hallway_temp_sensor that is an template sensor only changing the icon according to the battery.
If I try {{ states.sensor.battery_hallway_temp_sensor.attributes.icon }} or {{ state_attr('sensor.battery_hallway_temp_sensor','icon') }}both of them return mdi:battery-50 so I guess this must be on the correct way 
I got it to work thx for the help!
var icon_one = states[âsensor.battery_hallway_smoke_sensorâ].attributes.icon; did the trick
In a regular computer browser, this plugin works fine.
But on a Kindle Fire in Fully Kiosk Browser, I get a red block with âCustom element doesnât exist: button-cardâ.
I saw some posts in this thread from a year ago that said custom components are a relatively new tech and not all browsers support them. Iâm not familiar with what exactly a âcustom componentâ is in the browser contextâŚIâve not heard the term before as some kind of standard or common framework. Given that itâs a full year later and there are still browser support issues, what should I be asking the developer of Fully Kiosk to do, exactly?
Your tablet probably doesnât support ES6 JacaScript. Making it impossible to show those cards. I have an iPad 3d gen which has the same problems. There are no ways to overcome this! You will either have to use core-cards or buy a new tablet.
I do have to mention that mods to cards (e.g. card-mod and markdown-mod do work with older tablets, donât confuse it with card-modder and useful-markdown-mod though as those can not be read by older tabs).
The problem is Amazon is running old webkit on their tablets. For custom cards to be able to work we would have to either have to sacrifice functionality and write in pure JavaScript or employ some form of translation such as Babel for the older browsers. Both require time and effort for devs already volunteering their time.
1 Like
I use a Kindle with fully kiosk and this card works for me. I have called is a âtype: jsâ and not module in the resource definition.
I rooted my Fire tablet and installed LineageOS. Runs Fully Kiosk perfectly and much smoother.