Lovelace: Banner card

[oxymoron1629]

Any idea why the cover entirely would just stop showing up all of the sudden? It was there last time I checked a few days ago and haven’t had any major changes that I can think off. The buttons still function as if they were there, so they’re just invisible.
Weird.

type: custom:banner-card
heading: 🚗 Garage
link: surveillance
entities:
  - entity: cover.garage_door
    name: Garage Door
  - entity: binary_sensor.garage_car_door_contact
    name: Garage Sensor
    map_state:
      'on':
        value: mdi:garage-open
        color: red
      'off':
        value: mdi:garage
        color: cyan
  - entity: sensor.last_time_garage_door_opened
    name: Last Opened
  - entity: binary_sensor.garage_door_sensor_contact
    name: Garage Door
    map_state:
      'off':
        value: mdi:door-closed
        color: cyan
      'on':
        value: mdi:door-open
        color: red
  - entity: switch.garage_light_switch
    name: Garage Light
    map_state:
      'off':
        value: mdi:lightbulb-outline
      'on':
        value: mdi:lightbulb-on
        color: yellow
  - entity: sensor.garage_car_door_temperature
    name: Garage Temp

[Eoin]

There is a bug open for this on git, there is also a workaround listed which partially works for me but the placement of the icons are out slightly, might just be my theme: Covers no longer shows after HA update · Issue #133 · nervetattoo/banner-card (github.com)

[thanasegar (Noob)]

Hi Guys,

Anyone able to guide me in the right direction, i am trying to change the color of the bottom banner to match as the same color as the top header.

I tried looking at the CSS and found that if i manually change the .overlaystrip background it will change the color. However when i apply the following code below in my banner card nothing happens.

              - type: custom:banner-card
                heading: 🛋 Living Room
                entities:
                  - attribute: state
                    name: Motion
                    entity: binary_sensor.hall_hue_motion_sensor_motion
                    map_state:
                      'off': mdi:motion-sensor-off
                      'on': mdi:motion-sensor
                  - attribute: state
                    name: Front Door
                    entity: binary_sensor.hall_multipurpose_sensor_contact
                    map_state:
                      'off': mdi:door-closed-lock
                      'on': mdi:door-open
                  - attribute: state
                    name: Front Gate
                    entity: binary_sensor.gate_sensor_contact_2
                    map_state:
                      'off': mdi:door-closed-lock
                      'on': mdi:door-open
                card_mod:
                  style: |
                    ha-card {
                      --bc-font-size-heading: 1.5em;
                      --bc-font-size-entity-value: 1.5em;
                      border-radius: 20px;
                      background-color: var(--background-color-);
                    }
                    .overlay-strip {
                       background: rgb(67, 73, 82);
                      overflow: hidden;
                      width: 100%;
                    }

[oxymoron1629]

The fix worked for me. Thanks for pointing me in the right direction.

[dexstar]

@thanasegar

Anyone able to guide me in the right direction

Not sure if this may help you out somehow ?

[thanasegar (Noob)]

Hi Dexstar,

Thanks for sharing, i did manage to figure out the proper syntax to get it to work as shown below

                  style: |

                    ha-card .overlay-strip {
                       background: rgb(67, 73, 82);
                    }
                    ha-card {
                      --bc-font-size-heading: 1.5em;
                      --bc-font-size-entity-value: 1.5em;
                      border-style: solid;
                      border-width: 0.0px;
                      border-radius: 20px;
                      background-color: var(--background-color-);
                    }

But now i notice the border is kinda missing on the bottom part as compared to the top.

[Kitkat (Amanda)]

Hi,

Still not clear how to make the banner heading text smaller???
Where does style: go?

Thx

type: custom:banner-card
heading:
  - mdi:bed
  - Bedroom
background: green
entities:
  - entity: group.bedroom
    name: Bedroom Group
  - entity: sensor.bedroom_temp_zigbee
    name: Bedroom Temp
  - entity: light.bedroom_lamp_1
    name: Bedroom Lamp 1

[Moonlight_Guest (Alexey)]

Hi Amanda,

For me it works like this:

card_mod:
  style: |
    ha-card .heading {
      font-size: 1.75em;
      font-weight: 400
    }

[Mogodon]

Has anyone managed to use entity acton to change the default tap action to a link>

I have the weather.home entity as one of my enties but I’d like to change the standard tap_action from opening further details to opening another view/tab on lovelace.

I’ve tried the following:
"`
entity: weather.home
name: Edinburgh
action: url
url_path: weather

entity: weather.home
name: Edinburgh
action: url
url: weather

entity: weather.home
name: Edinburgh
tap_action:
action: url
url_path: weather

entity: weather.home
name: Edinburgh
action: url
link: weather

entity: weather.home
name: Edinburgh
action: url(‘weather’)

entity: weather.home
name: Edinburgh
action: url
url_path: weather`"

Also tried using card-mod with a type web-link but to no avail.

[Tobias_Brage]

Hi, great card. Only thing I’m missing is the option to center the background image or contain it like in CSS.
The center of my current background image changes depending on what device I use.
An option to center it would be great!

[SpookyAwol]

Hey, great card - wondering if someone can kickstart me with some code for styling and sizing a background image?
I want to work on resizing to fit the card and fading

eg
type: custom:banner-card
background: url("/local/dining.jpg")
heading:

• mdi:oven
• Kitchen
  entities:

[FaBRiK]

Is it possible somehow mix the elements in different rows? I mean e.g. in our kithen there are 2 alarm related entities (wondow open and motion), 2 entities for temperature and humidity, 3 light switches and 1 media player. So It would be nice to have a row with 4 entities (motion, window open, temperature, humidity), another row with the 3 lights entities and 1 row with the medai player. The last 2 rows are OK, but in the first raw I’d like to show 4 entities. It is possible somehow?

[BigBlackBear (Mike)]

I agree that this would be useful. In my implementation, I’ve gotten around this by making the row_size as large as I need it for my largest row, then adjusting the sizes of individual entities to get as close as possible. It works, but my entities end up being different sizes in some cases.

[FaBRiK]

I found a workaround. I give a row_size 6 at the beginning and size 2 for entities I’d like to have 3 cells in a row and size 3 where I’d like to see 2 entities in a row. E.g. here is a block with 3 entities in the first row and 2 entities in the 2nd row

type: custom:banner-card
row_size: 6
heading:
  - mdi:silverware-fork-knife
  - Kitchen
entities:
  - entity: light.light1
    name: Light1
    size: 2
  - entity: light.light2
    name: Light2
    size: 2
  - entity: light.light3
    name: Light3
    size: 2
  - entity: light.light4
    name: Light4
    size: 3
  - entity: light.light5
    name: Light5
    size: 3

[BigBlackBear (Mike)]

That’s even better than what I had. Thanks!

[BigBlackBear (Mike)]

Is anyone else seeing switches now broken after the 2022.3 Home Assistant update?

[Bully89 (Bas)]

The same issue, don’t see any switch in my dashboard atm.

[swampylee]

Same for me, all switches have disappeared.

[Giuseppe_Venuti]

Same problem last update banner card levers are gone HELP

[johanndr (Johann)]

I am new on Home Assistant. I have also noticed that my levers are missing