Column-card did not create the banner, it make use of panel:true, 1st card will be full width and then let the cards under the 1st one auto flow based on screen size/orientation.
In my banner done with picture-element card, I created composite ‘badge’ using combinations of state-icon/image/state-label types. You can also use the simple state-badge but I found it does not scale.
In column-card case, I can use my banner or you can just use badge under view badge in view
Thanks for the PNG.
Hi,
Can you please share a sample code with your latest changes.
how did you change the badge css (red/green circle).
Thanks,
The ‘green’ (actually the primary color of the theme) circle is created from border-radius/border under style here:
- type: image
entity: sensor.local_date
state_image:
“open”: /local/lightbulb-outline.png
“closed”: /local/lightbulb-outline.png
filter: opacity(0)
style:
. . . .
border-radius: 100%
border: var(–primary-color) double 0.2vw
The state_image does not matter here since filter: opacity(0) make whatever it is ‘disappear’ and showing only the border/circle.
I have theme change periodically and wanted the badges to look part of the theme, so I set the border color to var(–primary-color). You can set border to any color you want, just replace var(–primary-color) with a color name.
The red circle is actually an animated gif 
, I overlay that on top the ‘green’ circle image:
- type: image
entity: binary_sensor.motion
state_image:
“on”: /local/loading.gif
“off”: /local/loading.gif
state_filter:
‘on’: opacity(1)
‘off’: opacity(0)
style:
. . . .
border-radius: 100%
I wanted the red circling to ‘appear’ only when the binary_sensor.motion is on, so I used opacity(0) to make it ‘disappear’ when off.
These 2 images have to been defined in this order to have the correct overlay result.
Have fun.
Getting the state-badges to align was a minor pain, but I got it working somehow, with the exception of the gap between the first and the second badge, which is smaller.
But my problem is the friendly_names of my sensors, which in case of the DWD weather sensor come from the sensor-attributes so I can’t change them in customization. This wrecks the panel pretty much:
Does anyone have an idea how to style around this?
That’s one of the reasons I do ‘composite’ badges instead of limited by state-badge design.
If the friendly_name can be changed in config or customize.yaml, that would be easiest.
Otherwise, reconstruct it with:
I highly recommend plan-coordinates for positioning/sizing in picture-element.
You mean as you explained in the post about badges and animated gifs?
Anyway, I got around the very long friendly names that I unfortunately can’t change in customization - I simply created a value_template-sensor that gives me the state of the real sensor, now I can set a friendly name as I like.
Yes, I layered different types (icon,label,etc) to look like a badge.
Glad you solved it.
While the relative positioning of entities on picture-maps is fine for a floor, it doesn’t suit a panel. If I resize the browser window, the background image of the floor scales and all icons move, effectively “staying in the same place” - that is fine and as it should be. But with
top: 50%
left: 10%
the badges slide around and change their positions and distances. No go! But since this is CSS, you can use absolute positioning. I didn’t find any documentation in the HA-docs about that, but it worked alright:
top: 30px
left: 70px
And all badges stay fixed where they are.
Sorry to hijack the thread but does anyone have a working example of badges under view?
Cheers,
Linton
The default badges of lovelace work like this:
# default view
- title: RokuTV
id: RokuTV
badges:
- binary_sensor.internetI’m looking to create similar views in Lovelace as I have in legacy frontend using CustomUI, is that at all possible? Different colors if family members are home or not, and diffrent colors depending on temperature and humidity etc.
I used binary_sensor/input_boolean state to do color change in type: state-icon, those are relatively easy, under style, --paper-item-icon-color is the off state color, --paper-item-icon-active-color is the on state color.
To use this method for sensor entities, like temperature and humidity, you’ll have to create template binary_sensor for each of them, that may not be what you want.
You may also want to look at this discussion about icon-template and customization.
So in order to get color change of the badges I can use state-icon?
Any example of config?
I have tried some but cannot get any positive results…
Here is what I used to display my motion sensors, changes color from lightgreen when off, to red when on:
- type: state-icon
entity: binary_sensor.front_porch_motion
tap_action:
action: more-info
hold_action:
action: none
style:
top: 50%
left: 50%
filter: opacity(0.6)
"--paper-item-icon-color": lightgreen
"--paper-item-icon-active-color": red
--iron-icon-height: auto
--iron-icon-width: 1.5vwI am trying to get this to work but I’m stuck. What I want is exactly shown at the beginning of this post. I want the first card full width and the following cards normal width.
What I understood is that I start with a vertical stack card where the banner is placed. What I do not get is where the rest of the cards come. If I place them in the vertical stack, all the cards are the full width. When I place them under the cards: from the view (first row) I only see the background image.
Someone knows what I am doing wrong? Thanks.
After the vertical-stack/banner, I’ve used 1 horizontal-stack that contains 4 vertical-stacks (4 columns).
Each vertical-stack (column) can have as many cards as you want.
Currently, I use custom:layout-card to replace the horizontal/vertical-stack combo.
Can you please post your updated ui-lovelace.yaml with the custom laycard added. I’ve been going nuts trying to convert this from old way (vertical-stack) to the new way.
Thanks
Here is what I did with 4 columns in one of my views.
Just a reminder, the layout-card does not work exactly the same as just horizontal-stack/vertical-stack combos.
Hope this helps.
views:
- title: Main
id: Main
icon: mdi:home-assistant
panel: true
cards:
- type: vertical-stack
cards:
- type: custom:layout-card
layout: auto
max_columns: 4
max_width: [30%, 30%, 25%, 15%]
cards:
- type: vertical-stack
cards:
### this is a set of 2x3 camera cards in 1st column
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- < camera card 1>
- < camera card 2>
- < camera card 3>
- type: vertical-stack
cards:
- < camera card 4>
- < camera card 5>
- < camera card 6>
- < other cards in 1st column>
- break
- type: vertical-stack
cards:
- <cards in 2nd column>
- break
- type: vertical-stack
cards:
- <cards in 3rd column>
- break
- type: vertical-stack
cards:
- <cards in 4th column>