Lovelace: Banner card

xfinitybanchang · January 18, 2021, 5:46am

I’m still finding it hard to style this card… I’m using it in side a homekit card and want the lower “darker” section to be smaller. Also the text on the bottom is too close to the border.
Anyone out there who can help me make this look better?

type: 'custom:homekit-card'
useBrightness: false
useTemperature: false
enableColumns: true
statePositionTop: true
rows:
  - row: 1
    columns:
      - column: 1
        tileOnRow: 3
        entities:
          - title: Overig
            entities:
              - card: 'custom:banner-card'
                wider: true
                widerSize: 3
                noPadding: true
                cardOptions:
                  style: |
                    ha-card .heading{
                      color: white;
                      font-size: 2em;
                      margin-top: 15px;
                      margin-bottom: 15px;
                    }
                  heading:
                    - "\U0001F4A1"
                    - Lights
                  entities:
                    - entity: light.ceiling_lights
                    - entity: light.livingroom_lights
                    - entity: sensor.broadlink_rm4_pro_temperature
                      name: Temperature
              - entity: light.divider_lights
              - entity: light.tv_lights
              - entity: light.sofa_lights
  - row: 2
    columns:
      - column: 1
        tileOnRow: 3
        entities:
          - title: Livingroom Lights
            entities:
              - entity: light.ceiling_lights
                name: Ceiling Lights
                icon: 'mdi:led-strip-variant'
                popupExtend:
                  actions:
                    - service: scene.turn_on
                      service_data:
                        entity_id: scene.ontspannen
                      color: '#FDCA64'
                      name: ontspannen
                    - service: scene.turn_on
                      service_data:
                        entity_id: scene.helder
                      color: '#FFE7C0'
                      name: helder
                    - service: scene.turn_on
                      service_data:
                        entity_id: scene.concentreren
                      color: '#BBEEF3'
                      name: concentreren
                    - service: scene.turn_on
                      service_data:
                        entity_id: scene.energie
                      color: '#8BCBDD'
                      name: energie
              - entity: light.tv_lights
                name: TV Lights
                icon: 'mdi:floor-lamp'
              - entity: light.divider_lights
                name: Divider Lights
                icon: 'mdi:ceiling-light'
              - entity: light.desk_light
                name: Desk light
                icon: 'mdi:ceiling-light'

HadiHassaoui · April 10, 2021, 5:01am

Is there a way to have a background image based on state?

Argonaute · April 10, 2021, 10:54pm

Hello,
Is it possible to configure a button instead of an entity (for instant to call a service to call a script) ?

nogueirasa · April 14, 2021, 3:19am

Hi @nervetattoo , very nice card.

Is there a way to take this lines out?

Galadinos · April 23, 2021, 2:04pm

Hi,

It’s possible to use show_state: false ?

Thanks for your help

ViperRNMC · April 26, 2021, 9:36am

can you share you card config?

Galadinos · April 26, 2021, 9:38am

Yes off course.

type: 'custom:banner-card'
heading:
  - Entrée
background: ''
link: /lovelace/
entities:
  - entity: sensor.netatmo_galahome_galastation_temperature
    name: Température
  - entity: sensor.netatmo_galahome_galastation_humidity
    name: Humidité
  - entity: light.entree
    name: Lumiére
  - entity: cover.volet_entree
    name: Volet
    show_header_toggle: false
    show_state: false
    state_color: true
    type: 'custom:multiple-entity-row'
    entities:
      - icon: 'mdi:arrow-up-box'
        state_color: false
        tap_action:
          action: call-service
          service: cover.open_cover
          service_data:
            entity_id: cover.volet_entree
      - icon: 'mdi:arrow-down-box'
        state_color: false
        tap_action:
          action: call-service
          service: cover.close_cover
          service_data:
            entity_id: cover.volet_entree
      - icon: 'mdi:square'
        state_color: false
        tap_action:
          action: call-service
          service: cover.stop_cover
          service_data:
            entity_id: cover.volet_entree
      - icon: 'mdi:menu'
        state_color: false
        tap_action:
          action: call-service
          service: cover.set_cover_position
          service_data:
            entity_id: cover.volet_entree
            position: 84

ViperRNMC · April 26, 2021, 10:12am

Problem is the combination banner-card and multiple-entity-row. Without show-state:false works.

Galadinos · April 26, 2021, 10:17am

Ok, then it’s possible to add the 4th icon without used the multiple-entity-row ?

theCrow · April 28, 2021, 12:18pm

Is it possible to show icons next to the values? I’d like to have thermometer and waterdrop icons to the left of these values.

dgooglr · May 30, 2021, 9:16pm

Im loving the banner card and working on a dashboard for my iPad pro.
I want to display the camera feed on my 3d printer as background image.

type: ‘custom:banner-card’
heading: “\U0001F3C6 3d Printer”
link: /lovelace/bathroom
background: ‘url(“http://url//webcam/?action=stream”)’
entities:

entity: switch.koogeek_2
name: Turn on 3D Printer
entity: sensor.3d_printer
name: Temperature
entity: sensor.ender5_current_progress
name: Current Progress

Is there a way I can define how large the banner card should be, or simply display the camera feed.

Right now I only get the top part of the camera feed which gives me nothing
Thanks!

bkr1969 · August 3, 2021, 9:30pm

Any way to add a picture rather than an icon in the heading?

dmwaeschle · August 24, 2021, 7:10pm

I am having a struggle with using the “link” function within this banner card. I’m hoping someone can provide me some guidance.
Here is what I am experiencing, if I create another dashboard and on the first view I use the banner-card and I can get the heading to link back from this secondary dashboard to the default “Overview” dashboard first page view.
BUT what I’d really like to do is on my primary dashboard have a view that contains multiple banner-cards for several rooms within my house. I want to have a secondary dashboard where each view is a room within the house where more details and entites can be shown or controlled. I want to be able to link from one dashboard to another and a specific view within the dashboard and that dashboard banner-card on that view is able to link back to the main primary dashboard.
I can get the link function work in one direction but not the other. and I can not get the link function to go to a specific view within the dashboard. I’ve tried…
link: /lovelace/laundry - ( I suspect this would work if I wanted all the views in the same dashboard)
link: /lovelace/rooms/laundry

Overview - (primary dashboard)
Rooms - (first view within the dashboard) ((room specific banner-cards are placed here)
View 2
View 3
etc

Rooms - (Secondary dashboard)
Laundry (view 1)
Master Bedroom (view 2)
Family Den (view 3)
etc

Maybe I am making this harder than it has to be. But I am hoping it is doable. I hope this is clear as mud and can make sense of what I am saying.

gooorooo · September 18, 2021, 10:26pm

Hi! I’m looking the way to round a value of the sensor entity when displaying with Banner Card. Is it possible with map_state feature, or any other way (without creating a new template sensor)?

oxymoron1629 · November 17, 2021, 2:32pm

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 · November 17, 2021, 11:48pm

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 · November 29, 2021, 6:31pm

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 · November 30, 2021, 5:43am

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

dexstar · November 30, 2021, 9:14am

Not sure if this may help you out somehow ?

thanasegar · November 30, 2021, 10:47am

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.