Verticel Stack mit Custom:Mod-Card anpassen (Bekomme es nicht ausgerichtet)

HI!

Ich habe mir einr Vertical Stack Card gebastelt bekomme aber die beiden Linken bereiche nicht ausgerichtet…

Die Gauge sollte in der MItte sein und die beiden DC2 rechts davon…

Hat einer eine Tipp wie ich das angehen soll? Bekomme es nicht hin…

HIer der Code:

type: vertical-stack
cards:
  - square: true
    type: grid
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mod-card
            card:
              show_name: true
              show_icon: true
              type: button
              tap_action:
                action: toggle
              entity: sensor.kostalwr_dc1_voltage
              show_state: true
              name: DC1
              icon_height: 20px
              card_mod:
                style:
                  .: |
                    ha-card {
                      width: 80px;
                      height: 100px !important;
                      top: px;
                      padding: 0px 0px 0px 0px;
                      background: rgb(75, 75, 75);
                      border: 5px solid rgb(0, 0, 0);
                      border-radius: 10px;
          - type: custom:mod-card
            card:
              show_name: true
              show_icon: true
              type: button
              tap_action:
                action: toggle
              entity: sensor.kostalwr_dc1_current
              show_state: true
              name: DC1
              icon_height: 20px
              card_mod:
                style:
                  .: |
                    ha-card {
                      width: 80px;
                      height: 100px !important;
                      top: px;
                      padding: 0px 0px 0px 0px;
                      background: rgb(75, 75, 75);
                      border: 5px solid rgb(0, 0, 0);
                      border-radius: 10px;
      - type: custom:mod-card
        card:
          type: gauge
          entity: sensor.kostalwr_sum_power_of_all_pv_dc_inputs
          name: PV Leistung
          min: 0
          max: 10000
          theme: Graphite Light
          needle: false
          severity:
            green: 6666
            yellow: 3333
            red: 6666
          tap_action:
            action: navigate
            navigation_path: /pv-anlage
          card_mod:
            style:
              .: |
                ha-card {
                  width: 300px;
                  height: 200px !important;
                  top: 0px;
                  padding: 0px 0px 0px 0px;
                  background: rgb(75, 75, 75);
                  border: 5px solid rgb(0, 0, 0);
                  border-radius: 10px;
                }
                .name {
                  font-size: 17px !important;
                  font-weight: bold;
                  color: white !important;
                  position: absolute;
                  bottom: 2px;
                  padding: 0px 0px 0px 0px;
                  }
              ha-gauge$: |
                text.value-text {
                  font-size: 70px !important;
                  font-weight: bold;
                  fill: rgba(0,0,0, 1) !important;
                  text-anchor: middle;
                }
      - type: vertical-stack
        cards:
          - type: custom:mod-card
            card:
              show_name: true
              show_icon: true
              type: button
              tap_action:
                action: toggle
              entity: sensor.kostalwr_dc2_voltage
              show_state: true
              name: DC2
              icon_height: 20px
              card_mod:
                style:
                  .: |
                    ha-card {
                      width: 80px;
                      height: 100px !important;
                      top: px;
                      padding: 0px 0px 0px 0px;
                      background: rgb(75, 75, 75);
                      border: 5px solid rgb(0, 0, 0);
                      border-radius: 10px;
          - type: custom:mod-card
            card:
              show_name: true
              show_icon: true
              type: button
              tap_action:
                action: toggle
              entity: sensor.kostalwr_dc2_current
              show_state: true
              name: DC2
              icon_height: 20px
              card_mod:
                style:
                  .: |
                    ha-card {
                      width: 80px;
                      height: 100px !important;
                      top: px;
                      padding: 0px 0px 0px 0px;
                      background: rgb(75, 75, 75);
                      border: 5px solid rgb(0, 0, 0);
                      border-radius: 10px;
  - type: horizontal-stack
    cards:
      - graph: line
        type: sensor
        entity: sensor.kostalwr_home_power
        detail: 2
        name: Verbrauch
        theme: amoled
        icon: mdi:home-import-outline
      - graph: line
        type: sensor
        entity: sensor.kostalwr_battery_soc
        detail: 2
        name: Batrerie
        theme: amoled
        icon: mdi:home-battery-outline
grid_options:
  columns: 14
  rows: 6

       card_mod:
          style: >
            ha-card {
              left: -0%;
              width: 132%;
            }

Versuche es mal mit “%” anstatt “px”. Das hat bei mir geklappt…

2025-02-04 17-30-03

Hier habe ich es auch gemacht.

type: custom:vertical-stack-in-card
cards:
  - type: heading
    heading_style: title
    heading: Bambu Lab P1S
    icon: mdi:printer-3d
    badges: []
    card_mod:
      style:
        .: |
          ha-card {
            background-color: rgba(90, 90, 90, 0.5) !important;
            --card-mod-icon-color: grey;
            --primary-text-color: grey;
          }
  - type: custom:gap-card
    height: 6
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.p1s_dusengrosse
        primary_info: state
        secondary_info: name
        icon: mdi:printer-3d-nozzle
        layout: vertical
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 70%;
            }

                /* Do the SIMPLE background stuff */
                {% set color_icon = "blue" %} 
                  
                ha-state-icon {
                  color: rgb( 33, 150, 243 );
                  }

                mushroom-shape-icon {
                  --shape-color: rgba( 33, 150, 243, .2) !important;
                  }  

                /* Add subtle color on hover */
                ha-card:hover {
                 background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
                }
      - type: custom:mushroom-entity-card
        entity: sensor.p1s_aktueller_arbeitsschritt
        primary_info: state
        secondary_info: name
        layout: vertical
        icon: mdi:printer-3d
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              left: -30%;
              width: 160%;
            }

                /* Do the SIMPLE background stuff */
                {% set color_icon = "blue" %} 
                  
                ha-state-icon {
                  color: rgb( 33, 150, 243 );
                  }

                mushroom-shape-icon {
                  --shape-color: rgba( 33, 150, 243, .2) !important;
                  }  

                /* Add subtle color on hover */
                ha-card:hover {
                 background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
                }    
      - type: custom:mushroom-entity-card
        entity: sensor.p1s_dusentyp
        primary_info: state
        secondary_info: name
        icon: mdi:printer-3d-nozzle
        layout: vertical
        card_mod:
          style: |
            ha-card {
              /* Set size and spacing of button */
              width: 70%;
              left: 30%
            }

                /* Do the SIMPLE background stuff */
                {% set color_icon = "blue" %} 
                  
                ha-state-icon {
                  color: rgb( 33, 150, 243 );
                  }

                mushroom-shape-icon {
                  --shape-color: rgba( 33, 150, 243, .2) !important;
                  }  

                /* Add subtle color on hover */
                ha-card:hover {
                 background: color-mix(in srgb, var(--{{ color_icon }}-color) 25%, var(--card-background-color)) !important;
                }
card_mod:
  style: |
    ha-card {

      box-shadow: none;
      border-radius: 10px 10px 10px 10px;

      border: 1px solid rgba(90, 90, 90, 0.5); 
      padding: 6px;
       
      background: rgba(0, 0, 0, 0.5)
    }

1 „Gefällt mir“

Deine PV Leistung hat das Positionsattribut “absolut”. Alle anderen haben kein entsprechendes Attribut.

Häh? Keine Ahnung was Du da meinst.

Mit “%” habe ich das hinbekommen, mit “px” nicht.

Habs hinbekommen!

Vielen Dank!

type: vertical-stack
cards:
  - square: false
    type: grid
    cards:
      - type: vertical-stack
        cards:
          - type: custom:mod-card
            card:
              show_name: true
              show_icon: true
              type: button
              tap_action:
                action: toggle
              entity: sensor.kostalwr_dc1_voltage
              show_state: true
              name: DC1
              icon_height: 20px
              card_mod:
                style:
                  .: |
                    ha-card {
                      width: 50%; !important;
                      background: rgb(75, 75, 75);
                      border: 5px solid rgb(0, 0, 0);
                      border-radius: 10px;
          - type: custom:mod-card
            card:
              show_name: true
              show_icon: true
              type: button
              tap_action:
                action: toggle
              entity: sensor.kostalwr_dc1_current
              show_state: true
              name: DC1
              icon_height: 20px
              card_mod:
                style:
                  .: |
                    ha-card {
                      width: 50%; !inportant;
                      background: rgb(75, 75, 75);
                      border: 5px solid rgb(0, 0, 0);
                      border-radius: 10px;
      - type: custom:mod-card
        card:
          type: gauge
          entity: sensor.kostalwr_sum_power_of_all_pv_dc_inputs
          name: ""
          min: 0
          max: 10000
          theme: Graphite Light
          needle: false
          severity:
            green: 6666
            yellow: 3333
            red: 6666
          tap_action:
            action: navigate
            navigation_path: /pv-anlage
          card_mod:
            style:
              .: |
                ha-card {
                left: -55%;
                  width: 210%; !important;
                  background: rgb(0, 0, 0);
                  border: 5px solid rgb(0, 0, 0);
                  border-radius: 10px;
                }
              ha-gauge$: |
                text.value-text {
                  font-size: 320% !important;
                  font-weight: bold;
                  fill: rgba(124,252,0, 1) !important;
                  text-anchor: middle;
                }
      - type: vertical-stack
        cards:
          - type: custom:mod-card
            card:
              show_name: true
              show_icon: true
              type: button
              tap_action:
                action: toggle
              entity: sensor.kostalwr_dc2_voltage
              show_state: true
              name: DC2
              icon_height: 20px
              card_mod:
                style:
                  .: |
                    ha-card {
                    left: 50%;
                      width: 50%; !important;
                      padding: 0px 0px 0px 0px;
                      background: rgb(75, 75, 75);
                      border: 5px solid rgb(0, 0, 0);
                      border-radius: 10px;
          - type: custom:mod-card
            card:
              show_name: true
              show_icon: true
              type: button
              tap_action:
                action: toggle
              entity: sensor.kostalwr_dc2_current
              show_state: true
              name: DC2
              icon_height: 20px
              card_mod:
                style:
                  .: |
                    ha-card {
                    left: 50%;
                      width: 50%; !important;
                      background: rgb(75, 75, 75);
                      border: 5px solid rgb(0, 0, 0);
                      border-radius: 10px;
  - type: horizontal-stack
    cards:
      - graph: line
        type: sensor
        entity: sensor.kostalwr_home_power
        detail: 2
        name: Verbrauch
        theme: amoled
        icon: mdi:home-import-outline
      - graph: line
        type: sensor
        entity: sensor.kostalwr_battery_soc
        detail: 2
        name: Batrerie
        theme: amoled
        icon: mdi:home-battery-outline
grid_options:
  columns: 14
  rows: 6

Magst du mir vielleicht deinen Code geben? sieht auch interessant auc deine Karte der PVAnlage.

Bitte schön… Musst VERTICAL-STACK etc. installiert haben.

type: custom:vertical-stack-in-card
cards:
  - type: heading
    heading_style: title
    icon: mdi:information-outline
    badges:
      - type: entity
        entity: weather.mannheim_hourly
      - type: entity
        entity: sensor.solarfocus_biomass_boiler_outdoor_temperature
    heading: IdAW
    card_mod:
      style:
        .: |
          ha-card {
            background-color: rgba(90, 90, 90, 0.5) !important;
            --card-mod-icon-color: grey;
            --primary-text-color: grey;
          }
  - type: custom:gap-card
    height: 6
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-person-card
        entity: person.roberto_cravallo
        icon_type: entity-picture
        layout: vertical
        fill_container: true
        card_mod:
          style: |
            ha-card {
              width: 70%;
            }
            {% if is_state('switch.steckdose_elippsentrainer', 'on') %}
              ha-card {
                --ha-card-border-radius: 10px;
                --ha-card-border-color: #990000;
                --ha-card-border-width: 2px;
                --card-mod-icon-color: white;
            {% endif %}
            }
      - type: custom:flex-horseshoe-card
        card_mod:
          style: |
            ha-card {
              left: -31%;
              width: 132%;
            }
            {% if is_state('sensor.sma_strom_autarkie_prozent', "100" ) %}
            ha-card {
              --ha-card-border-radius: 10px;
              --ha-card-border-color: green;
              --ha-card-border-width: 1px;
              --card-mod-icon-color: white;
            {% endif %}
            }
        entities:
          - entity: sensor.sunny_boy_grid_power_safe
            decimals: 0
            icon: mdi:solar-power-variant
            name: Solaranlage
            area: Solarstrom
          - entity: sensor.sma_strom_eigenverbrauch_prozent
            decimals: 0
            name: Eigenverbrauch
          - entity: sensor.sma_strom_autarkie_prozent
            decimals: 0
            name: Autargie
        show:
          scale_tickmarks: true
          horseshoe_style: lineargradient
        layout:
          hlines:
            - id: 0
              xpos: 50
              ypos: 41
              length: 70
              styles:
                - stroke: var(--primary-text-color);
                - stroke-width: 2;
                - opacity: 0.5;
                - stroke-linecap: round;
              color: "#FFF6E3"
          vlines:
            - id: 0
              xpos: 50
              ypos: 56
              length: 20
              styles:
                - stroke: var(--primary-text-color);
                - opacity: 0.5;
                - stroke-width: 2;
                - stroke-linecap: round;
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 36
              styles:
                - font-size: 2.8em;
            - id: 1
              entity_index: 1
              xpos: 48
              ypos: 56
              styles:
                - font-size: 2.2em;
                - text-anchor: end;
                - font-style: normal;
                - opacity: 0.7;
            - id: 2
              entity_index: 2
              xpos: 52
              ypos: 56
              styles:
                - font-size: 2.2em;
                - text-anchor: start;
                - font-style: normal;
                - opacity: 0.7;
          names:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 94
              styles:
                - font-size: 1.5em;
                - text-transform: capitalize;
            - id: 1
              entity_index: 1
              xpos: 46
              ypos: 62
              styles:
                - font-size: 0.6em;
                - text-anchor: end;
                - opacity: 0.5;
                - text-transform: capitalize;
            - id: 2
              entity_index: 2
              xpos: 54
              ypos: 62
              styles:
                - font-size: 0.6em;
                - text-anchor: start;
                - opacity: 0.5;
                - text-transform: capitalize;
          areas:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 76
              styles:
                - font-size: 1.0em;
                - opacity: 0.4;
        horseshoe_state:
          color: "#43a047"
        horseshoe_scale:
          min: 0
          max: 5000
          color: "#2e7031"
          width: 2
        color_stops:
          "1000": "#43a047"
          "2000": "#32CD32"
          "3100": "#ADFF2F"
      - type: custom:flex-horseshoe-card
        card_mod:
          style: >
            ha-card {
              left: -0%;
              width: 132%;
            }

            {% set external_power =
            states('sensor.sunny_boy_metering_power_absorbed_safe') | round(0)
            %}

            {% if external_power > 0 %}

            ha-card {
              --ha-card-border-radius: 10px;
              --ha-card-border-color: #db4437;
              --ha-card-border-width: 1px;
              --card-mod-icon-color: white;
            {% endif %}

            }  
        entities:
          - entity: sensor.sunny_boy_metering_current_consumption_safe
            decimals: 0
            icon: mdi:solar-power-variant
            name: Netzdaten
            area: Strom
          - entity: sensor.sunny_boy_metering_power_absorbed_safe
            decimals: 0
            name: Netzbezug
          - entity: sensor.sunny_boy_metering_power_supplied_safe
            decimals: 0
            name: Überschuss
        show:
          scale_tickmarks: true
          horseshoe_style: lineargradient
        layout:
          hlines:
            - id: 0
              xpos: 50
              ypos: 41
              length: 70
              styles:
                - stroke: var(--primary-text-color);
                - stroke-width: 2;
                - opacity: 0.5;
                - stroke-linecap: round;
              color: "#FFF6E3"
          vlines:
            - id: 0
              xpos: 50
              ypos: 56
              length: 20
              styles:
                - stroke: var(--primary-text-color);
                - opacity: 0.5;
                - stroke-width: 2;
                - stroke-linecap: round;
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 36
              styles:
                - font-size: 2.8em;
            - id: 1
              entity_index: 1
              xpos: 48
              ypos: 56
              styles:
                - font-size: 2.2em;
                - text-anchor: end;
                - font-style: normal;
                - opacity: 0.7;
            - id: 2
              entity_index: 2
              xpos: 52
              ypos: 56
              styles:
                - font-size: 2.2em;
                - text-anchor: start;
                - font-style: normal;
                - opacity: 0.7;
          names:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 94
              styles:
                - font-size: 1.5em;
                - text-transform: capitalize;
            - id: 1
              entity_index: 1
              xpos: 46
              ypos: 62
              styles:
                - font-size: 0.6em;
                - text-anchor: end;
                - opacity: 0.5;
                - text-transform: capitalize;
            - id: 2
              entity_index: 2
              xpos: 54
              ypos: 62
              styles:
                - font-size: 0.6em;
                - text-anchor: start;
                - opacity: 0.5;
                - text-transform: capitalize;
          areas:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 76
              styles:
                - font-size: 1.0em;
                - opacity: 0.4;
        horseshoe_state:
          color: "#db4437"
        horseshoe_scale:
          min: 0
          max: 7000
          color: "#990000"
          width: 2
        color_stops:
          "0": "#db4437"
          "90": "#db4437"
      - type: custom:mushroom-person-card
        entity: person.sylvia
        icon_type: entity-picture
        layout: vertical
        fill_container: true
        card_mod:
          style: |
            ha-card {
              width: 70%;
              left: 30%
            }
            {% if is_state('switch.steckdose_elippsentrainer', 'on') %}
            ha-card {
              --ha-card-border-radius: 10px;
              --ha-card-border-color: #990000;
              --ha-card-border-width: 2px;
              --card-mod-icon-color: white;
            {% endif %}
            }
card_mod:
  style: |
    ha-card {

      box-shadow: none;
      border-radius: 10px 10px 10px 10px;

      border: 1px solid rgba(90, 90, 90, 0.5); 
      padding: 6px;
       
      background: rgba(0, 0, 0, 0.5)
    }

2025-02-06 08-57-28

Die Lösung mit den % war doch wohl von mir, oder? Du hast nicht die Lösung präsentiert, sondern das, was Du mit der Lösung (% statt px von mir) gemacht hast. Wäre schön, wenn Du das korrigieren würdest.

Hab ich doch… Deinen Vorschlag habe ich in der Mittleren Karte und an manchen Bereichen der kleinen drumrum angewendet.
Das was du da als Screenshot “markiert” markiert hast ist nur eine kleiner Teil der Nicht stört. Das ist nur die Größe vom Symbol der DC1 und 2 Eingänge. Das hat keine Probleme gemacht.

Ausschlaggebend für die Ausrichtung war

left: -55%; und left: 55%;

Habe den ganzen Code unter dem Bild angefügt.

Du hast aber Deinen Beitrag als “Lösung” markiert, nicht Meinen.

Achsoo… das meinst du… Ja, weil dort die Lösung dargestellt ist… Aber von Mir aus :laughing:

1 „Gefällt mir“