Lovelace: Banner card

Nope, not really… Header is transparent but not the layout with entities. Dont know how to make this bottom grey part another color or how to make it transparent? Any ideas?

Also as you can see, on the left side… Under “Lyxläge” it should be a switch, but its not? I cant understand why?

Hi Guys,

can anyone help me pls?

type: 'custom:banner-card'
background: '#EDE7B0'
heading: "\U0001F6CB Living room"
link: /lovelace/living_room
entities:
  - entity: light.Philips_hue_Standlicht_on

standlicht

If I use this code, I will not see a toggle

Anyone a idea?

HA version have to be 0.100 or later to use the latest version, do you have that? If so, clear browser cache and try again.

Well, yes, the entities grid will always have a semi-transparent darker blended background.

What is the entity id of it? If its not a switch.<name> it won’t work, but you can try to force it with setting domain: switch in the card configuration for that entity.

You can see my post above,the entity is ”switch.lyxlage” and I have tried other switches but none of them appears correctly?

They work as expected in other cards! So its really strange i think.

Is it possible to add a feature to change color or make the bottom entity field transparent in future? :slight_smile:

Hi, the text color of the header is adjusted according to the background color. That works well with the standard theme. As soon as a dark theme background is selected, the text color alignment does not work:
Standard theme
image
image
dark theme

image
image
Did I forget a parameter?

Is this project dead? Not much activity…

I still cant get switches to work in my bannes card so its useless for me, to bad cause I really would like to use it! :frowning:

          - heading: DÖRRAR & FÖNSTER
            entities:
              - entity: switch.lyxlage
              - entity: switch.sovrum
            row_size: 2
            style: |
              ha-card {
                border: solid 0px var(--primary-color);
                background: rgb(47,126,253,0.1);
                box-shadow: none;
                overflow: hidden;
                top: 10px;
              }
            type: 'custom:banner-card'

This code only shows the switch name but not swtich itself! :confused:

I love your card, finally people at home accept to open HA interface on their phone :blush:

2 Likes

Switches work great for me and others, but it does require a recent version of Home Assistant. And the project isn’t dead there just aren’t anything important I want to add to it at the moment.

2 Likes

Really nice card!
Is long-press available?
Or what would be the right way to control dimming of a light?
Thinking simple click will do on/off and long-press open up “more info” for dimming

1 Like

Thanks.
Long-press is not supported. Tbh I dislike it as it is an unconventional and imo bad interaction pattern, so its not something I personally will be adding.
You can however click the entity heading to open the more info pop-up, albeit the heading is tiny and a bit hard to hit. (Something I should improve)

Actually I agree on the long-press :slight_smile: I didn´t know that you could click on the heading, it´s really hard to hit on a mobile. I´m not sure how it can be improved but you tend to turn off the lights instead of showing “more info”

Comparing my implementation with the screenshots in the original post (and the github repo), it looks like switches no longer have that “dimmed” effect when off. Am I crazy, or just doing something wrong?

And while I’m here… Does anyone know of an elegant way to hide an entire card if all the entities (media players in my case) are hidden? I’ve tried the auto-entities plugin (which works for me on other types of cards), but couldn’t get it to work with a banner card.

anyone know how to make a AC control banner ? like on/off ac and temp control with arrow up and down ?

Maybe a stupid question but where do you find the code for the icons? i mean the bathtub, computer etc

http://www.unicode.org/emoji/charts/full-emoji-list.html#1f6cf

1 Like

Thanks for your reply. I saw this yesterday as well somehwere in the thread but i think it doesn’t have the icons like the one on the first stop. Is there anything else?

I think not. As you can see in the list, different OS translating the icons different. So the symbol for the couch looks different on Windows and android

1 Like

Nice card, this is my result, I like simple and clean layouts:

image