Problem with a code

Configuration Frontend
1

Here’s my YAML. I want to add a banner image, but when I refresh something in my code I briefly see the background image for half of a second.

See the picture.

image
image466×753 17.3 KB

image
image602×548 40 KB

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:banner-card
    card_mod:
      style: |
        ha-card {
          background: url('/local/qnap.jpg');
          background-repeat: no-repeat;
          background-size: 100% 115%;
          height: 110px;
          border: 0px;
        }
    heading: null
  - type: entities
    entities:
      - entity: sensor.nas_ssew_etat_du_lecteur_0_1
        type: custom:multiple-entity-row
        state_header: HDD 1
        name: Status
        icon: mdi:nas
        entities:
          - entity: sensor.nas_ssew_etat_du_lecteur_0_2
            name: HDD 2
          - entity: sensor.nas_ssew_etat_du_lecteur_0_3
            name: HDD 3
          - entity: sensor.nas_ssew_etat_du_lecteur_0_4
            name: HDD 4
      - entity: sensor.nas_ssew_temperature_du_lecteur_0_1
        type: custom:multiple-entity-row
        state_header: HDD 1
        name: Disques
        entities:
          - entity: sensor.nas_ssew_temperature_du_lecteur_0_4
            name: HDD 4
          - entity: sensor.nas_ssew_temperature_du_lecteur_0_3
            name: HDD 3
          - entity: sensor.nas_ssew_temperature_du_lecteur_0_2
            name: HDD 2
      - entity: sensor.nas_ssew_temperature_du_systeme
        type: custom:multiple-entity-row
        state_header: NAS
        name: Système
        entities:
          - entity: sensor.nas_ssew_temperature_du_processeur
            name: CPU
      - entity: sensor.nas_ssew_uptime
        icon: mdi:clock-check-outline
        name: Uptime
    card_mod:
      style: |
        ha-card {
          border: none;
          font-weight: 300;
          font-size: 11px;
          margin-right: -8px;
          margin-left: -15px;
        }
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.nas_ssew_utilisation_du_processeur
                color: rgb(76, 175, 80)
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 40%
                    margin: 0
              legend:
                show: false
              chart:
                height: 140px
            card_mod:
              style: |
                ha-card {
                  border: none; 
                }           
          - type: custom:mushroom-entity-card
            entity: sensor.nas_ssew_utilisation_du_processeur
            primary_info: name
            secondary_info: state
            name: CPU
            icon_color: green
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  top: -53px;
                  border: none;
                          }
                ha-state-icon {
                  --icon-symbol-size: 20px;
                      }
                mushroom-shape-icon {
                  --shape-color: transparent !important;
                  --shape-color-disabled: transparent !important;
                }
        card_mod:
          style: |
            ha-card {
              height: 108px;
              border: none;
              background: rgba(1, 81, 195, 0.3); 
            }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.nas_ssew_utilisation_de_la_memoire
                color: rgb(33, 150, 243)
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 40%
                    margin: 0
              legend:
                show: false
              chart:
                height: 140px
            card_mod:
              style: |
                ha-card {
                  border: none;
                }
          - type: custom:mushroom-entity-card
            entity: sensor.nas_ssew_utilisation_de_la_memoire
            primary_info: name
            secondary_info: state
            name: RAM
            icon_color: blue
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  top: -53px;
                  border: none; 
                }
                ha-state-icon {
                  --icon-symbol-size: 20px;
                      }
                mushroom-shape-icon {
                  --shape-color: transparent !important;
                  --shape-color-disabled: transparent !important;
                }
        card_mod:
          style: |
            ha-card {
              height: 108px;
              border: none;
              background: rgba(1, 81, 195, 0.3); 
            }
      - type: custom:stack-in-card
        cards:
          - type: custom:apexcharts-card
            chart_type: radialBar
            series:
              - entity: sensor.nas_ssew_volume_utilise_qnap
                color: rgb(255, 87, 34)
                max: 100
                show:
                  legend_value: false
            apex_config:
              plotOptions:
                radialBar:
                  offsetY: 0
                  startAngle: -108
                  endAngle: 108
                  hollow:
                    size: 80%
                  dataLabels:
                    name:
                      show: false
                    value:
                      show: false
                  track:
                    strokeWidth: 40%
                    margin: 0
              legend:
                show: false
              chart:
                height: 140px
            card_mod:
              style: |
                ha-card {             
                  border: none;
                }
          - type: custom:mushroom-entity-card
            entity: sensor.nas_ssew_volume_utilise_qnap
            primary_info: name
            secondary_info: state
            name: DISQUES
            icon_color: deep-orange
            layout: vertical
            card_mod:
              style: |
                ha-card {
                  top: -53px;
                  border: none;
                  
                }
                ha-state-icon {
                  --icon-symbol-size: 20px;
                      }
                mushroom-shape-icon {
                  --shape-color: transparent !important;
                  --shape-color-disabled: transparent !important;
                }
        card_mod:
          style: |
            ha-card {
              height: 108px;
              border: none;
              background: rgba(1, 81, 195, 0.3); 
              margin-bottom: 30px;
            }
    columns: 3
    card_mod:
      style: |
        ha-card {
          border: none;
          margin-top: -15px;
          background: rgba(1, 81, 195, 0); 
        }
  - type: custom:vertical-stack-in-card
    cards:
      - type: grid
        square: false
        columns: 2
        cards:
          - type: custom:mushroom-entity-card
            entity: sensor.nas_ssew_eth2_download
            primary_info: state
            secondary_info: name
            name: Download
            icon_color: orange
            card_mod:
              style: |
                ha-card {
                  border: none;
                  background-color: transparent !important;
                }
          - type: custom:mushroom-entity-card
            entity: sensor.nas_ssew_eth2_upload
            primary_info: state
            secondary_info: name
            name: Upload
            icon_color: blue
            card_mod:
              style: |
                ha-card {
                  border: none;
                  background-color: transparent !important;
                }
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.nas_ssew_eth2_download
            name: Download
            color: var(--orange-color)
          - entity: sensor.nas_ssew_eth2_upload
            name: Upload
            color: var(--blue-color)
            y_axis: secondary
        hours_to_show: 8
        points_per_hour: 8
        line_width: 2
        font_size: 50
        card_mod:
          style: |
            ha-card {
              border: none;
              background-color: transparent !important;
            }
        show:
          name: false
          icon: false
          state: false
          legend: false
          fill: fade
    card_mod:
      style: |
        ha-card {
          border: none;
          margin-top: -25px;
          background-color: transparent !important;
        }
card_mod:
  style: |
    ha-card {
      background-repeat: no-repeat;
      background: rgba(1, 81, 195, 0.3);  
        --paper-item-icon-color: red;
      }
3

It’s an issue with the custom stack card

Option 1 use custom:vertical-stack-in-card

type: custom:vertical-stack-in-card
cards:
  - type: custom:banner-card
    background: url("/local/qnap.jpg")
    heading: TEST
    card_mod:
      style: |
        ha-card {
          background-repeat: no-repeat;
          background-size: 100% 115%;
          height: 400px;
          border: 0px;
        }

Option 2

type: custom:vertical-stack-in-card
cards:
  - type: custom:banner-card
    card_mod:
      style: |
        ha-card {
          background: url('/local/qnap.jpg');
          background-repeat: no-repeat;
          background-size: 100% 115%;
          height: 110px;
          border: 0px;
        }

Option 3 use your original custom:stack-in-card

type: custom:stack-in-card
cards:
  - type: custom:banner-card
    card_mod:
      style: |
        ha-card {
          background: url('/local/qnap.jpg') !important;
          background-repeat: no-repeat !important;
          background-size: 100% 115% !important;
          height: 110px !important;
          border: 0px !important;
        }
    heading: null
1 Like
4

Option 3 :slight_smile: thanks @LiQuid_cOOled

1 Like
5

@LiQuid_cOOled do you know how to make a Tap action to open a specific URL on a custom:banner-card, in my case i want to add a URL action when I click on the image in your option 3

6

This is a possible method. There may be a more streamlined way

type: custom:stack-in-card
cards:
  - type: custom:banner-card
    entities:
      - entity: light.your_light
        action:
          service: light.turn_on
          brightness: 100
    heading: null
    card_mod:
      style: |
        ha-card {
         background: url('/local/qnap.jpg') !important;
         background-repeat: no-repeat !important;
         background-size: 100% 100% !important;
         border: 0px !important;
           }
        .entity-value {
          display: none !important;
           }
        .heading {   
         display: none !important;
           }
        .entity-name{
          width: 470px !important;;
          height: 120px !important;
          background: transparent !important;
          color: transparent !important;
           }
card_mod:
  style: |
    ha-card {
     background: none;
     border: none;
     }
7

I was more referring to this part of the code to be add into your opt3

tap_action:
  action: url
  url_path: https://192.168.0.1
8

It does not appear the navigate action is an available option for the Banner Card.

You do have the ability to define a link to a dashboard, but it does require an entry in heading:

link: /lovelace/living_room

type: custom:stack-in-card
cards:
  - type: custom:banner-card
    link: /lovelace/living_room
    heading: link example
    card_mod:
      style: |
        ha-card {
         background: url('/local/qnap.jpg') !important;
         background-repeat: no-repeat !important;
         background-size: 100% 100% !important;
         border: 0px !important;
           }
        .heading {   
         color: transparent !important;
           }
card_mod:
  style: |
    ha-card {
     background: none;
     border: none;
     }

We could overlay another card that does have tap_action on top, make it transparent and use:

tap_action:
      action: url
      url_path: https://google.com

type: custom:stack-in-card
cards:
  - type: custom:banner-card
    heading: null
    card_mod:
      style: |
        ha-card {
         background: url('https://demo.home-assistant.io/stub_config/t-shirt-promo.png') !important;
         background-repeat: no-repeat !important;
         background-size: cover !important;
         border: 0px !important;
           }
  - type: picture
    image: /local/pics/clear.svg
    tap_action:
      action: url
      url_path: https://google.com
    card_mod:
      style: |
        ha-card {
        height: 120px  !important;
        border: 0px !important;
        margin-top: -120px;
                 }
card_mod:
  style: |
    ha-card {
     background: none;
     border: none;
     }

This has a clear picture card over the Banner Card Image.

image
image812×234 43.9 KB

1 Like
10

It work now, found the issue on my side, bad indentation on the last part of the code to fit my code :slight_smile: Thx @LiQuid_cOOled