How can we center Title in a ''stack-in-card''?

Configuration Frontend
1

I have the following mushroom template card in a ‘‘stack-in-card’’ and I can’t find a way to center the ‘‘stack-in-card’’ title (Porte Poulailler), is there anyway to do so ?

thanks for any help on this.

image

type: custom:stack-in-card
title: Porte Poulailler
mode: vertical
cards:
  - type: custom:mushroom-template-card
    layout: vertical
    primary: >-
      {% if is_state('lock.serrure_poulailler','unlocked') and
      is_state('binary_sensor.maison_zone_27','on') %}
        Open and Unlocked
      {% elif is_state('binary_sensor.maison_zone_27','on') %}
        Door Open
      {% elif is_state('lock.serrure_poulailler','unlocked') %}
        Unlocked
      {% else %}
        Locked
      {% endif%}
    icon: >-
      {% if is_state('lock.serrure_poulailler','unlocked') and
      is_state('binary_sensor.maison_zone_27','on') %}
        mdi:door-open
      {% elif is_state('binary_sensor.maison_zone_27','on') %}
        mdi:door-open
      {% elif is_state('lock.serrure_poulailler','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    icon_color: >-
      {% if is_state('lock.serrure_poulailler','locked') and
      is_state('binary_sensor.maison_zone_27','off') %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: >-
      {% set battery_level = (states('sensor.serrure_poulailler_battery_level')
      | int / 10) | round(0) | int * 10 %} {% if battery_level == 100 %}
      mdi:battery {% elif battery_level > 0 %} mdi:battery-{{ battery_level }}
      {% else %} mdi:battery-alert-variant-outline {% endif %}
    badge_color: >-
      {% set battery_level = states('sensor.serrure_poulailler_battery_level') |
      int %}

      {% if battery_level > 90 %} green

      {% elif battery_level > 60 %} light-green

      {% elif battery_level > 50 %} lime

      {% elif battery_level > 40 %} yellow

      {% elif battery_level > 30 %} amber

      {% elif battery_level > 20 %} orange

      {% elif battery_level > 10 %} deep-orange

      {% else %} red

      {% endif %}
    tap_action:
      action: none
    secondary: >
      Dernier changement
      {{as_timestamp(states.lock.serrure_poulailler.last_changed) |
      timestamp_custom('%Y.%m.%d %H:%M:%S') }}

      {{ states('input_text.serrure_poulailler_last_status') }}

      {{ states('input_text.serrure_poulailler_last_user_name') }}
    multiline_secondary: true
    card_mod:
      style: |
        :host {
          --ha-card-border-width: 0px;
          }
  - type: grid
    square: false
    columns: 1
    cards:
      - type: custom:mushroom-lock-card
        entity: lock.serrure_poulailler
        name: Front Door
        primary_info: none
        secondary_info: none
        icon_type: none
        card_mod:
          style: |
            :host {
            --ha-card-border-width: 0px;
            }
card_mod:
  style: |
    ha-card {
      {% if is_state('lock.serrure_poulailler','locked') and
      is_state('binary_sensor.maison_zone_27','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }
2

not sure with stack-in-card title. most probably possible with card_mod.

I use this solution provided by @LiQuid_cOOled which works better personally.

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:mushroom-title-card
    title: Porte Poulailler
    alignment: center
    card_mod:
      style: |
        ha-card {
            margin-top: -10px;
            margin-bottom: -10px;
            --title-color: var(--secondary-text-color) ;
            --title-font-weight: 300;
            --title-font-size: 27px;
            background-color: transparent !important;
            border: none;
            }
  - type: custom:mushroom-template-card
    layout: vertical
    primary: >-
      {% if is_state('lock.serrure_poulailler','unlocked') and
      is_state('binary_sensor.maison_zone_27','on') %}
        Open and Unlocked
      {% elif is_state('binary_sensor.maison_zone_27','on') %}
        Door Open
      {% elif is_state('lock.serrure_poulailler','unlocked') %}
        Unlocked
      {% else %}
        Locked
      {% endif%}
    icon: >-
      {% if is_state('lock.serrure_poulailler','unlocked') and
      is_state('binary_sensor.maison_zone_27','on') %}
        mdi:door-open
      {% elif is_state('binary_sensor.maison_zone_27','on') %}
        mdi:door-open
      {% elif is_state('lock.serrure_poulailler','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    icon_color: >-
      {% if is_state('lock.serrure_poulailler','locked') and
      is_state('binary_sensor.maison_zone_27','off') %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: >-
      {% set battery_level = (states('sensor.serrure_poulailler_battery_level')
      | int / 10) | round(0) | int * 10 %} {% if battery_level == 100 %}
      mdi:battery {% elif battery_level > 0 %} mdi:battery-{{ battery_level }}
      {% else %} mdi:battery-alert-variant-outline {% endif %}
    badge_color: >-
      {% set battery_level = states('sensor.serrure_poulailler_battery_level') |
      int %}

      {% if battery_level > 90 %} green

      {% elif battery_level > 60 %} light-green

      {% elif battery_level > 50 %} lime

      {% elif battery_level > 40 %} yellow

      {% elif battery_level > 30 %} amber

      {% elif battery_level > 20 %} orange

      {% elif battery_level > 10 %} deep-orange

      {% else %} red

      {% endif %}
    tap_action:
      action: none
    secondary: >
      Dernier changement
      {{as_timestamp(states.lock.serrure_poulailler.last_changed) |
      timestamp_custom('%Y.%m.%d %H:%M:%S') }}

      {{ states('input_text.serrure_poulailler_last_status') }}

      {{ states('input_text.serrure_poulailler_last_user_name') }}
    multiline_secondary: true
    card_mod:
      style: |
        :host {
          --ha-card-border-width: 0px;
          }
  - type: grid
    square: false
    columns: 1
    cards:
      - type: custom:mushroom-lock-card
        entity: lock.serrure_poulailler
        name: Front Door
        primary_info: none
        secondary_info: none
        icon_type: none
        card_mod:
          style: |
            :host {
            --ha-card-border-width: 0px;
            }
card_mod:
  style: |
    ha-card {
      {% if is_state('lock.serrure_poulailler','locked') and
      is_state('binary_sensor.maison_zone_27','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }

Screenshot_20240501_174704_Home Assistant
Screenshot_20240501_174704_Home Assistant1066×548 25.2 KB

3

OK you can do it with card_mod
just add to stack-in-card

card_mod:
  style:
    $: |
      h1.card-header {
        text-align: center;
      }
4

GREAT thanks alot !!!