Salut,
tu peux virer le horizontal-stack
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
vertical-stack-in-card suporte le mode horizontal:
type: custom:vertical-stack-in-card
horizontal: true
cards:
Édit:
j’avais pas vu que @BBE en parler 
@WarC0zes L’intérêt de la horizontal stack au milieu c’est (dans mon cas) de conserver l’interface graphique.
J’en cause un peu dans mon 1er post…
Mais chez moi j’ai des effets de bords casse c… heu… casse pied. Donc ça reste dans un dashboard de test…
Ok, je vois. Je viens de tester et effectivement avec le mode horizontal pas d’éditeur ( moi je m’en fou 
).
j’ai viré les bordures de mon thème, depuis longtemps. avec :
ha-card-border-width: 0
Je sais bien, mais je n’ai pas encore franchi le cap…
Je vais plus vite avec pour faire des corrections mineures.
Va falloir que je travaille mes couleurs de background alors… J’ai un peu de boulot sur le thème… faut que je décortique le tien donné plus haut je suis sûr qu’il est plein d’astuces intelligentes !
Alors non je ne le vois pas plus que ça mais c’est peut être lié au thème plus !
J’ai la structure suivante :
mais je ne précise pas
horizontal: true
Alors je suis en construction test on va dire donc c’est à l’état de proto
En effet, j’ai l’impression que tu n’as pas de bordures du tout… Comme @WarC0zes donc…
Si je fais sauter
j’ai ceci
bref pas de différence sauf à avoir moins de ligne, mais aussi peut être plus de fluidité je sais pas
La question que je me pose c’est le decluterring au plus juste pour prendre tous les cas de figure sans avoir à faire 50 modèles et pour le moment j’ai pas les idées claires sur le sujet
En suivant ton modèle, j’ai réussi à en débarrasser avec border: none; dans card_mod
card_mod:
style: |
ha-card {
margin-right: -12px;
padding-right: -0px;
border: none;
}
Perso ce qui est compliqué c’est la gestion des pop-ups.
Je vois que comme moi tu as du browser mod pour generer des pop-ups un peu plus musclés que le « more-info » et ça c’est pas simple à passer à la moulinette decluttering (heu pardon Streamline)
Ce que je fais c’est que j’ai un dashboard « brouillon » où je garde une version de chaque « room card ». Je fais les modifs dedans et ensuite je fais des copier coller dans mes différents dashboards « de prod »…
Ce mode de fonctionnement marchait bien quand j’avais un dashboard mobile et un dashboard pc… Il devient moins utile avec les sections qui me permettent d’avoir un dashboard universel plus prévisible que la vue masonry…
Oui effectivement, mais en fait ce qui est compliqué dans ma tête aussi c’est faire un décluterring ou Streamline pour la partie porte seule en chips, un pour la partie fenêtre, pour les éclairages, pour les prises etc… et d’ajouter quand j’ai besoin le modèle template dans le chips mushroom !
On peut faire quelques choses que pour l’ensemble de la carte mushroom chips et pas pour chaque template qui la compose !
en gros j’aimerais avoir un decluttering individuel pour chaque flèche
Après en conditionnel on doit pouvoir faire une usinage à gaz 
Pour un besoin annexe, j’ai besoin d’une version hyper compacte…
Ben c’est chose faite avec 100% de cartes « header » (avec des pop-up sur les icones des badges entity) et 0% de card mod !!
Bon c’est tout petit pour cliquer avec des gros doigts… mais si on cherche du très compact, on peut guère faire mieux…
Le gain est monstrueux:
Attention, je ne vous encourage pas forcément à faire pareil… Il manque de mon point de vue plein de fonctionnalités pour le dashboard principal (en particulier des actions comme le hold_action et la capacité à colorer les icones des pieces en fonction d’entités…)
La section salon (la reference depuis le début…):
le code de la section:
type: grid
cards:
- type: heading
heading: Salon
heading_style: subtitle
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
badges:
- type: entity
entity: sensor.echo_jeanne_temperature
- type: entity
show_state: false
show_icon: true
entity: binary_sensor.echo_salon_mouvement
color: accent
icon: mdi:sofa
- type: heading
icon: ""
heading_style: subtitle
badges:
- type: entity
icon: mdi:flower
show_state: false
show_icon: true
entity: plant.alocatia
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Plante Marsupilami
content:
type: custom:flower-card
entity: plant.alocatia
show_bars:
- moisture
- temperature
- illuminance
- conductivity
battery_sensor: sensor.alocasia_zebrina_battery
display_type: compact
- type: entity
show_state: false
show_icon: true
icon: mdi:play-pause
entity: media_player.echo_jeanne
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Echo salon
content:
type: custom:stack-in-card
cards:
- type: custom:mini-media-player
entity: media_player.echo_jeanne
source: full
volume_stateless: false
group: true
artwork: full-cover
tts:
platform: alexa
entity_id: media_player.echo_jeanne
type: announce
shortcuts:
hide_when_off: true
columns: 3
buttons:
- name: Playlist Jeanne
type: AMAZON_MUSIC
id: Playlist Jeanne
- name: RTL2
type: custom
id: joue la station RTL deux
- name: Pop- Rock
type: custom
id: joue du pop rock
- name: Rock
type: custom
id: joue du rock
- name: Musique douce
type: custom
id: joue de la musique douce
- name: Piano
type: custom
id: joue de la musique au piano
- name: Queen
type: custom
id: joue du Queen
- name: Vianney
type: custom
id: joue du Vianney
- name: Louane
type: custom
id: joue du Louane
- name: Playlist Jeanne
type: AMAZON_MUSIC
id: Playlist Jeanne sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: RTL2
type: custom
id: >-
joue la station RTL deux sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Pop- Rock
type: custom
id: joue du pop rock sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Rock
type: custom
id: joue du rock sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Musique douce
type: custom
id: >-
joue de la musique douce sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Piano
type: custom
id: >-
joue de la musique au piano sur le groupe
rez_de_chaussee
icon: mdi:multicast
- name: Queen
type: custom
id: joue du Queen sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Vianney
type: custom
id: joue du Vianney sur le groupe rez_de_chaussee
icon: mdi:multicast
- name: Louane
type: custom
id: joue du Louane sur le groupe rez_de_chaussee
icon: mdi:multicast
- type: entity
entity: cover.salon
show_state: false
show_icon: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Volets du salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_apero
name: Volet Apero
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_tv
name: Volet TV
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
- type: entity
show_state: false
show_icon: true
icon: mdi:lightbulb
color: accent
entity: light.0x84ba20fffe4b2581
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lumières salon
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.0x84ba20fffe4b2581
name: Petite Lampe
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: true
tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.prise_lampadaire
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.prise_elephants
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
tap_action:
action: toggle
- type: custom:mushroom-light-card
entity: light.prise_cerisier
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
tap_action:
action: toggle
Ultra compact sur smartphone:
Salut, comment fait tu pour mettre un graph en arrière plan ? merci
tu as tout le code dans son post…
il te faut installer custom:mini-graph-card sur HACS…
Oui j’ai fait un mélange de sa carte et celle plus haute mais je bloque sur comment mettre le graph en arrière plan…
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.lampe_salon
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
yellow
{% else %}
grey
{% endif %}
primary: Séjour
secondary: "{{ states('sensor.sonde_salon_temperature') }}°C"
layout: horizontal
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.camera_salon_motion', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.camera_salon_motion', 'on') %}
orange
{% else %}
grey
{% endif %}
picture: ""
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 25px !important;
color: yellow !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
top: -42px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 75px;
top: 32px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.sonde_salon_temperature
name: Temperature
color: rgba(var(--orange-dark-rgb),var(--tint5))
height: 50
hours_to_show: 24
points_per_hour: 1
line_width: 2
font_size: 20
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.lampe_salon
tap_action:
action: toggle
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: cover.volet_fenetre_salon
hold_action:
action: toggle
tap_action:
action: toggle
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
green
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
- type: template
entity: cover.volet_porte_fenetre_salon
hold_action:
action: toggle
tap_action:
action: toggle
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
green
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 80%;
top: -200px;
background: none;
--chip-border-width: 0;
}
layout_options:
grid_columns: 2
grid_rows: auto
card_mod:
style: |
ha-card {
height: 178px ;
margin-left: auto;
margin-right: auto;
}
Salut,
un souci que j’ai remarqué aussi, sur un PC avec un grand ecran et la souris, c’est OK. Mais sur une tablette ou mobile, c’est trop galère. ( pourtant je n’ai pas de gros doigts 
)
Pour régler ce problème, je suis passé par un thème pour ma tablette et mobile
Pour le mobile :
#mushroom chip
mush-chip-icon-size: 23px
mush-chip-background: rgba(158,158,158,0.2)
mush-chip-spacing: 5px
mush-chip-font-size: 12px
mush-chip-padding: 0 0.4em
Pour la tablette :
#mushroom chip
mush-chip-icon-size: 35px
mush-chip-background: rgba(158,158,158,0.2)
mush-chip-spacing: 20px
mush-chip-font-size: 16px
mush-chip-padding: 0 0.4em
Avec stack-in-card tu « fusionnes » des cartes.
Mais tu ne peux pas changer la structure des cartes.
Bref il te faut une place « a part » pour le graphique dans ton empilage.
Dans le cas de @frankb il empile template puis graph puis chips et remonte un peu les chips pour qu’ils soient sur le graph…
Toi tu cherches a mettre le graph ailleurs. Il faut que tu lui trouves une place.
Un exemple en changeant « juste » le 178px à la fin de ton code:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.lampe_salon
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
yellow
{% else %}
grey
{% endif %}
primary: Séjour
secondary: "{{ states('sensor.sonde_salon_temperature') }}°C"
layout: horizontal
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.camera_salon_motion', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.camera_salon_motion', 'on') %}
orange
{% else %}
grey
{% endif %}
picture: ""
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 25px !important;
color: yellow !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
top: -42px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 75px;
top: 32px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.sonde_salon_temperature
name: Temperature
color: rgba(var(--orange-dark-rgb),var(--tint5))
height: 50
hours_to_show: 24
points_per_hour: 1
line_width: 2
font_size: 20
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.lampe_salon
tap_action:
action: toggle
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: cover.volet_fenetre_salon
hold_action:
action: toggle
tap_action:
action: toggle
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
green
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
- type: template
entity: cover.volet_porte_fenetre_salon
hold_action:
action: toggle
tap_action:
action: toggle
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
green
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 80%;
top: -200px;
background: none;
--chip-border-width: 0;
}
layout_options:
grid_columns: 2
grid_rows: auto
card_mod:
style: |
ha-card {
height: 220px ;
margin-left: auto;
margin-right: auto;
}
@Jujuka89 en jouant un peu plus avec cardmod, en modifiant la hauteur et la couleur du mini graph card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.ampoule_bureau
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
yellow
{% else %}
grey
{% endif %}
primary: Séjour
secondary: "{{ states('sensor.vindstyrka_temperature') }}°C"
layout: horizontal
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
hold_action:
action: toggle
badge_icon: >
{% if is_state('binary_sensor.detecteur_presence_bureau_occupancy', 'on')
%}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: >
{% if is_state('binary_sensor.detecteur_presence_bureau_occupancy', 'on')
%}
orange
{% else %}
grey
{% endif %}
picture: ""
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 25px !important;
color: yellow !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
font-size: 18px !important;
position: relative;
overflow: visible !important;
top: -42px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -40px;
top: 85px;
}
.: |
:host {
--mush-icon-size: 146px;
}
style: |
mushroom-badge-icon {
left: 75px;
top: 32px;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.alocatia_temperature_2
name: Temperature
color: yellow
height: 90
hours_to_show: 24
points_per_hour: 1
line_width: 2
font_size: 20
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style:
.: |
ha-card {
background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.ampoule_bureau
tap_action:
action: toggle
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% elif is_state(entity, 'off') %}
grey
{% else %}
grey
{% endif %}
- type: template
entity: cover.volet_du_bureau
hold_action:
action: toggle
tap_action:
action: toggle
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
green
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
- type: template
entity: cover.volet_du_bureau
hold_action:
action: toggle
tap_action:
action: toggle
icon: |-
{% if is_state(entity, 'open') %}
mdi:window-shutter-open
{% elif is_state(entity, 'closed') %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, 'open') %}
green
{% elif is_state(entity, 'closed') %}
grey
{% else %}
orange
{% endif %}
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 80%;
top: -200px;
background: none;
--chip-border-width: 0;
}
layout_options:
grid_columns: 2
grid_rows: auto
card_mod:
style: |
ha-card {
height: 220px ;
width: 220px ;
margin-left: auto;
margin-right: auto;
}
Par contre, personnellement, je n’ai jamais réussi à avoir quelque chose qui marche vraiment bien avec ces cartes « carrées » sur tous les types d’écran. Il y a toujours de la place « perdue » ou alors il faut les laisser « s’étaler » et j’aime moins le rendu… Sans compter qu’on met du card mod partout et dès qu’on change un truc, tout bouge et faut tout refaire… C’est pour ça que j’ai abandonné les versions carrées. Il vaut mieux partir sur du minimalist en full yaml que tenter de jouer avec du mushroom pour ça. (de mon point de vue bien sur…)
La même carte sans card mod, juste en jouant sur la position du graph, est déjà pas mal et tellement plus simple à maintenir (et moins gourmande en ressources):
et une fois collée dans des sections, on peut ajuster sa taille par rapport à la grille, sans avoir besoin de cardmod:
Le cas d’utilisation du menu hyper compact:
les deux vieux smartphones (avec une resolution / taille d’écran pas top) utilisés en mode wallpanel:
J’ai tout de visible d’un coup d’oeil, mais j’interragi très peu avec. donc ça me va.
Wouah ! Merci pour ton aide et tes conseils ! En effet je vais revoir ce que je veut et essayer différentes formes de cartes. Les dernières ont l’air pas mal en faite. 
