Stack-in-card background remove

Configuration Frontend
1

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.

thumbnail_85270
thumbnail_852701125×1687 117 KB 

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
2

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.

3

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.

IMG_1014
IMG_10141125×1660 160 KB

4

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
5

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.

6

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.