Stack-in-card background remove

Hi,

Help… I kind of reached a dead end here, trying for hours to figure out how to remove the background from the bottom half of this multi-card configuration. I tried card-mod and many other solutions but I just can’t figure it out anymore.

Thanks.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:horizon-card
    refresh_period: 60
    fields:
      sunrise: true
      sunset: true
      dawn: true
      noon: true
      dusk: true
      azimuth: false
      sun_azimuth: false
      moon_azimuth: false
      elevation: false
      sun_elevation: false
      moon_elevation: false
      moonrise: true
      moonset: true
      moon_phase: true
    latitude: 44.89751662557094
    longitude: 26.080309152603153
    elevation: 122
    time_zone: Europe/Bucharest
    card_mod:
      style: |
        .horizon-card-header {
          margin-top: 0px !important;
        }
        .horizon-card-graph {
          margin-top: 10px !important;
          margin-bottom: -25px !important;
        }
        .horizon-card-footer {
          margin-bottom: 15px !important;
        }
        .horizon-card-footer > * {
          margin-top: 0px !important;
        }
        .horizon-card-field-name {
          font-size: 10px !important;
          font-weight: bold;
          color: #FF9109 !important;
        }
        .horizon-card-field-value {
          font-size: 13px !important;
          color: #E0E0E0 !important;
        }
        .horizon-card-field-row {
          margin-top: 25px !important;
        }
        .horizon-card-field-moon-phase {
          margin-top: -7.5px !important;
        }
  - type: custom:stack-in-card
    mode: vertical
    card-mod:
      styles: |
        ha-card {
          --ha-card-background: none;
        }
    cards:
      - type: custom:compass-card
        indicator_sensors:
          - sensor: sun.sun
            attribute: azimuth
            indicator:
              type: circle
        compass:
          north:
            show: true
            color: '#FF9109'
          east:
            show: false
            color: '#E0E0E0'
          west:
            show: false
            color: '#E0E0E0'
          south:
            show: false
            color: '#E0E0E0'
          circle:
            background_image: /local/compass_card_bgi_sat.png
            background_opacity: 0.5
            color: '#FF9109'
        value_sensors:
          - sensor: ''
      - type: custom:button-card
        color_type: label-card
        styles:
          card:
            - padding: 15px
          grid:
            - grid-template-areas: '"buttons"'
            - grid-template-columns: 1fr
            - grid-template-rows: 1fr
        custom_fields:
          buttons:
            card:
              type: vertical-stack
              cards:
                - entity: sensor.sun_solar_azimuth
                  name: Azimuth
                  show_state: true
                  icon: none
                  styles:
                    card:
                      - padding: 0
                      - height: 42px
                      - border-radius: 5px
                      - box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.5)
                    name:
                      - transform: translateY(-5px)
                      - font-size: 13px
                      - font-weight: bold
                      - color: '#FF9109'
                    state:
                      - margin-bottom: 3px
                      - font-size: 10px
                      - color: '#E0E0E0'
                  type: custom:button-card
                - entity: sensor.sun_solar_elevation
                  name: Elevation
                  show_state: true
                  icon: none
                  styles:
                    card:
                      - padding: 0
                      - height: 42px
                      - border-radius: 5px
                      - box-shadow: 3px 2px 2px rgba(0, 0, 0, 0.5)
                    name:
                      - transform: translateY(-5px)
                      - font-size: 13px
                      - font-weight: bold
                      - color: '#FF9109'
                    state:
                      - margin-bottom: 3px
                      - font-size: 10px
                      - color: '#E0E0E0'
                  type: custom:button-card

You have to apply it at the bottom of your last " custom:stack-in-card " … after the 2 buttons in a button
And in-line with " type: custom:stack-in-card " and " cards: " of the above last " custom:stack-in-card "

And dont use “styles” in card_mod , it’s “style”

BTW. Very nice styled card

Another time when you are building a looong stack, get use to apply the “common” card_mod, under the initial stack, then tab it down 1 step, and add the card-code … so you move automatic move it down all time ( in right possition… after i had don a handfull of looong stacks, i got tired of "tapping forth and back/copy pasting tapping again : one looses the overview in this Small-Edit-Windows, , which doesn’t follow the length of the Card-View to the right ( Or the code), quite annoying , the stack-card gets longer and longer, vanish below, and total loosing the point of a visual editor, as one have to scroll forth and back and total looses focus on the extensive scrolling in the code, because of the Fixed window height.

Thank you. I’m glad you like it. You know how they say that a good night’s sleep helps you solve a lot of problems. It did for me. I was to tired to observe that i had an unnecessary vertical stack-in-card. No matter where i put the card-mod, with style, yes, not styles, it didn’t do anything. But removing the secondary stack-in-card and indenting the compass card and the buttons in a button card under the parent stack-in-card together with the horizon card, solved the problem.

Interesting to see that people have same ideas in combining cads :slight_smile: …I added some template stuff into it so the compass shows the moon after sunset…

type: custom:stack-in-card
mode: vertical
style: |
  ha-card {
     border-width: 0px !important;
     background: none
  }
cards:
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: custom:card-templater
            card:
              type: custom:compass-card
              card_mod:
                style: |
                  ha-card {--ha-card-border-width: 0; 
                  background: none }
              indicator_sensors:
                - sensor_template: |
                    {% if states('sun.sun') == "below_horizon" %}
                        sensor.moon_api
                      {% else %}
                        sun.sun
                      {% endif %}
                  attribute_template: |
                    {% if states('sun.sun') == "below_horizon" %}
                      moon_azimuth
                      {% else %}
                        azimuth
                      {% endif %}                  
                  indicator:
                    type: circle
                    color_template: |
                      {% if states('sun.sun') == "below_horizon" %}
                        black
                      {% else %}
                        orange
                      {% endif %}
                    show: true
                  state_abbreviation:
                    show: false
              value_sensors:
                - sensor_template: |
                    {% if states('sun.sun') == "below_horizon" %}
                        sensor.moon_api
                      {% else %}
                        sun.sun
                      {% endif %}
                  attribute_template: |
                    {% if states('sun.sun') == "below_horizon" %}
                      moon_altitude
                      {% else %}
                        elevation
                      {% endif %}                   
                  decimals: 1
                  state_value:
                    show: true
                    color: white
              compass:
                circle:
                  background_image_template: |
                    {% if states('sun.sun') == "below_horizon" %}
                      /local/pictures/moon_phases/{{states.sensor.moon_phase.state}}.png
                    {% else %}
                      /local/pictures/house.jpg
                    {% endif %}
                  background_opacity: 0.7
                north:
                  show: true
                east:
                  show: true
                west:
                  show: true
                south:
                  show: true
            entities:
              - entity: sensor.moon_phase
              - entity: sun.sun

Hi,

Great idea… I’ll look into it and see how it works. I see you have used a templater card… got to get familiar with that. I’ve never used it before.

It is really nice to be able to add templating functionality to cards that by default do not offer this…can be a bit tricky to setup but it amplifies the options…with that I a.o. have a apexchart that I can offset bsaed on input helpers, i.e. compare todays consumption with offseted ones…and may other.