A little tip: best way to thank me is with an awesome screenshotâŠ
thanks for this, does away with all my custom stack-in-cards (which itself did away with all vertical-stack-in-card cardsâŠ) this one is for @petro to, who inspired me to do that, and use entities all over 
a question for type: divider, is this the way to use that:
- type: custom:hui-element
row_type: divider
it does show, but has a distinct color I cant explain just yet, so maybe Iâm doing it wrong? (dont know how to style that yet, I need it to use the same margins as the other styles)
btw, thank you:
type: entities
entities:
- type: custom:hui-element
card_type: markdown
style: |
ha-card {
box-shadow: none;
margin: -16px -16px 0px -16px;
}
content: >
# <font color = {{states('sensor.trash_color')}}>Afvalwijzer</font>
<ha-icon icon= {{'mdi:delete-alert' if states('sensor.saver_trash_today') != 'Geen' else 'mdi:delete-outline'}}> </ha-icon> Vandaag, {{states('sensor.vandaag')}}: <font color= {{states('sensor.trash_color')}}>**{{states('sensor.saver_trash_today')|capitalize}}</font>**
<ha-icon icon= {{states('sensor.trash_next_icon')}}> </ha-icon> Volgende afval-ophaal over **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.saver_trash_first_next_in_days')}}</font>** {{'dag' if states('sensor.saver_trash_first_next_in_days') == '1' else 'dagen'}} op:
<ha-icon icon= 'mdi:delete-alert'> </ha-icon> {{states('sensor.trash_first_next_date_formatted')}}: **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.saver_trash_first_next_item')|capitalize}}</font>**
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: picture-entity
style: |
ha-card {
box-shadow: none;
margin: 0px -16px 0px -16px;
animation: {% if is_state('persistent_notification.trash_notification', 'notifying') and
states('sensor.saver_trash_today') != 'Geen' %} blink 2s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
100% {opacity: 0;}
}
entity: sensor.saver_trash_today
name: Vandaag
show_state: false
state_image:
'gft': /local/mijnafvalwijzer/gft3.png
'papier': /local/mijnafvalwijzer/papier3.png
'restafval': /local/mijnafvalwijzer/restafval3.png
'plastic verpakkingsafval': /local/mijnafvalwijzer/plastic3.png
'Geen': /local/mijnafvalwijzer/kliko_geen.png
- type: picture-entity
style: |
ha-card {
box-shadow: none;
margin: 0px -16px 0px -16px;
animation: {% if is_state('persistent_notification.trash_notification', 'notifying') and
states('sensor.saver_trash_tomorrow') != 'Geen' %} blink 2s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
100% {opacity: 0;}
}
entity: sensor.saver_trash_tomorrow
name: Morgen
show_state: false
state_image:
'gft': /local/mijnafvalwijzer/gft3.png
'papier': /local/mijnafvalwijzer/papier3.png
'restafval': /local/mijnafvalwijzer/restafval3.png
'plastic verpakkingsafval': /local/mijnafvalwijzer/plastic3.png
'Geen': /local/mijnafvalwijzer/kliko_geen.png
- type: picture-entity
style: |
ha-card {
box-shadow: none;
margin: 0px -16px 0px -16px;
}
entity: sensor.saver_trash_day_after_tomorrow
name: Overmorgen
show_state: false
state_image:
'gft': /local/mijnafvalwijzer/gft3.png
'papier': /local/mijnafvalwijzer/papier3.png
'restafval': /local/mijnafvalwijzer/restafval3.png
'plastic verpakkingsafval': /local/mijnafvalwijzer/plastic3.png
'Geen': /local/mijnafvalwijzer/kliko_geen.png
- type: custom:hui-element
card_type: custom:auto-entities
card:
type: glance
style: |
ha-card {
box-shadow: none;
margin: 0px -16px 0px -16px;
}
title: Next pickups
filter:
include:
- attributes:
next_pickup_in_days: '! none'
sort:
attribute: next_pickup_in_days
method: attribute
numeric: true
- type: custom:hui-element
row_type: divider
- type: custom:hui-element
card_type: custom:auto-entities
card:
type: entities
style: |
ha-card {
box-shadow: none;
margin: 0px -16px 0px -16px;
}
filter:
include:
- entity_id: sensor.*_trash_timestamp
options:
type: custom:template-entity-row
state: >
{{state_attr(config.entity,'date')}}
sort:
method: state
- type: custom:hui-element
card_type: entities
style: |
ha-card {
box-shadow: none;
margin: -16px -16px -16px -16px;
background: url('/local/mijnafvalwijzer/background.png');
background-size: cover;
}
show_header_toggle: false
entities:
- entity: automation.afval_vandaag
name: Notify vandaag
- entity: automation.afval_morgen
name: Notify morgen
- entity: input_boolean.trash_reminder
- entity: input_boolean.trash_outside
1 Like
It looks to me (may be tricket by the indentation, though) that your divider is in the entities: section of an entities card. If, so, just
- type: divider
is enough.
well spotted!
still, Iâd like it to be the full width. Think the blue color is simply the secondary card color, so wont touch the for now.
in many of my other entities cards I used type: hui-markdown-card where I now can use your hui-element. Is there a backend difference between the 2?
I canât see how thatâs related to hui-element. Youâd need a plugin which can be used to modify the CSS of an entities row to do that. Maybe you could set the margins of the div in the divider row to, say, 0 -16px using something like that.
yes, as we speak, I just found your post đč Card-mod - Add css styles to any lovelace card, and adjusted it to
- type: divider
style: |
div {
margin: 0px -16px 0px -16px;
border: 1px solid white;
}
working perfectly! your suggestion works too of course, I takeout it is shorthand for the same âŠ
only question for now: is there a difference between the hui-element, and using the âoldâ method of custom:hui-markdown-card (or any other are card)
Only whatâs clearly stated in the readme.
âŠ
of course I did read that, must admit I cant find anything on the difference between the 2, but will check again.
since you wrote the fold-entity-row too: cant we style a type:divider the same way the very thin line looks like created by the fold-entity-row:
this must be half the thickness of the smallest 0.5px I can set divider border-width toâŠ
Does this replace the
custom:hui-trick?
Yes. Thatâs where the name is from. Thecustom:hui-trick was always a dirty hack that worked by accident rather than design, and since 0.107 it works intermittently at best.
Or in other words: This works always. The old method works sometimes.
And Styles Have Nothing To Do WIth hui-element.
Not sure if this qualifies as âawesomeâ:
A couple of other reminders that rely on using the hui-element:
2 Likes
Yes, Iâve experienced that since installing your card in my setup, especially with markdown cards. No more Red cards in sight. No preloaded needed.
Magic!
Hope itâs awesome enough:
And in default:
Plenty of hui-element (23) but also layout-card, gap-card, template-entity-row, fold-entity-row, and liberal doses of card-mod⊠you get the picture. HA just wouldnât work without your cards.
1 Like
I second that Thomasâ cards are the first place i go looking, 'cos I know theyâll be useful for more than one thing, reliable and most importantly, well maintained.
@reste_narquois your setup is good, some ideas there I will take away. Have you considered using something like custom:stack-in-card to gel some sections (like your printer info) together, to look like one card?
simply use entities card for that, and the hui-element card of this thread 
Thanks! You mean like this? (using card-mod to get rid of the borderâbackground/box-shadow):
Yeah, tbh, I swing between having a flatter look like this, and the more stack-y look I have at the moment.
1 Like
I do, in places, but then you have to theme out the borders and drop shadow. Also, stack-in-card allows for horizontal or vertical layouts so itâs more flexible.
agreed, but once you get the hang of the style by card-mod, that is quite easy too
still, being able to forget about that and simply drop elements in a stack has its merits.
no definitive choice made here, was even forced to use the stack-in-card with a set of button cards, that wouldnât be styled using the hui-element technique.
1 Like
thereâs many ways to skin a cat
This looks cool. Thanks thomasloven. I am new to HA and starting to modify my UI.
On your example shown below, how do you remove the icon on the first entity âBed Lightâ and move the text to the left (to make it look like the âtitleâ of an entity card)? The show_icon: false doesnât seem to work for entities.
Thanks again!
type: entities
entities:
- light.bed_light
- type: custom:hui-element
card_type: glance
entities:
- light.kitchen_lights
- light.ceiling_lights
https://www.home-assistant.io/lovelace/entities/#options-for-entities
Best way to remove the icon is to set it to one that doesnât exist.
icon: mdi:no-such-icon
But for moving the test to the left, youâre better off looking for some other type of row.