[Help] Problem in card-modder Style, with (custom:vertical-stack-in-card)

gojonny · February 4, 2019, 5:32pm

because with the parameters of (style) do not work with (custom: vertical-stack-in-card) the background remains white I would like the background to be as in the graphics below as photos.

this is the code:

  - type: custom:card-modder
    card:
      type: entities
      title: Rasphberry
      show_header_toggle: false
      entities:
        - type: custom:vertical-stack-in-card
          cards:
            - type: custom:vertical-stack-in-card
              cards:
                - type: horizontal-stack
                  cards:
                    - type: "custom:mini-graph-card"
                      entity: sensor.temperatura_esterna
                      name: Temperatura esterna
                      animate: true
                      show:
                        labels: true
                      decimals: 1      
                      line_color: '#0000FF'
                      line_width: 5 
                      hours_to_show: 62
    
                    - type: "custom:mini-graph-card"
                      entity: sensor.umidita_esterna
                      name: Umidità esterna
                      animate: true
                      show:
                        labels: true
                      decimals: 1      
                      line_color: '#33FFFF'
                      line_width: 5 
                      hours_to_show: 62
    style:
      background-repeat: no-repeat
      background-color: rgba(50,50,50,0.3)
      background-size: 100% 68px
      border-radius: 12px
      border: solid 1px rgba(100,100,100,0.3)
      box-shadow: 4px 4px rgba(0,0,0,0.4)
      color: white

petro · February 4, 2019, 6:31pm

put both cards in the vertical stack in card modders. Card modder only works on the top level card, that’s why it says “card”.

gojonny · February 5, 2019, 2:41pm

would you be so kind as to give me a practical example is all the morning that I try various configurations drawing inspiration from your suggestion but I can not …

petro · February 5, 2019, 3:10pm

not really sure what to give you… you already have an example in your posted code. You just need to get the correct style to remove the background color.

  - type: custom:card-modder
    style:
      background-color: rgba(0,0,0,0.0)
    card:
      type: "custom:mini-graph-card"
      entity: sensor.temperatura_esterna
      name: Temperatura esterna
      animate: true
      show:
        labels: true
      decimals: 1      
      line_color: '#0000FF'
      line_width: 5 
      hours_to_show: 62

gojonny · February 5, 2019, 3:53pm

thank you!!! I did it

  - type: custom:card-modder
    style: {background-repeat: no-repeat, background-color: 'rgba(50,50,50,0.3)', background-size: 100% 68px, border-radius: "12px", border: "solid 1px rgba(100,100,100,0.3)", color: white,}
    card:
      type: entities
      title: Clima esterno
      color: white
      show_header_toggle: false
      entities:
        - type: custom:vertical-stack-in-card
          cards:


            - type: horizontal-stack
              cards:
                - type: custom:card-modder
                  card:
                    type: "custom:mini-graph-card"
                    entity: sensor.temperatura_esterna
                    name: Temperatura esterna
                    animate: true
                    show:
                     labels: true
                    decimals: 1      
                    line_color: '#0000FF'
                    line_width: 5 
                    hours_to_show: 62
                  style:
                    background-repeat: no-repeat
                    background-color: rgba(50,50,50,0.3)
                    background-size: 100% 68px
                    border-radius: 8px
                    border: solid 1px rgba(100,100,100,0.3)
                    box-shadow: 4px 4px rgba(0,0,0,0.4)
                    color: white

                - type: custom:card-modder
                  card:
                    type: "custom:mini-graph-card"
                    entity: sensor.umidita_esterna
                    name: Temperatura esterna
                    animate: true
                    show:
                     labels: true
                    decimals: 1      
                    line_color: '#0000FF'
                    line_width: 5 
                    hours_to_show: 62
                  style:
                    background-repeat: no-repeat
                    background-color: rgba(50,50,50,0.3)
                    background-size: 100% 68px
                    border-radius: 8px
                    border: solid 1px rgba(100,100,100,0.3)
                    box-shadow: 4px 4px rgba(0,0,0,0.4)
                    color: white

inutilis · March 3, 2019, 4:46pm

@gojonny thanks for the hint.
I was also struggling with this and solution to wrap vertical-stack-in-card in entities type card is not apparent at all.

You saved me a lot of time.

gojonny · March 4, 2019, 8:18am

… it’s a community to help each other