en faite ça marche partout, tu édite chaque bloc et tu rajoute
card_mod:
style: |
ha-card {
opacity:0.5
}
Tu peux modifier l’opacité des button-cards sans passer par card_mod
Styles:
card:
- opacity: 0.5
resultat sur portable avec image fixe et transparence des blocs. Après il faudrait faire la modif directement dans le template que toute les carte soit transparente, mais la je ne sais pas ou chercher si tu es sur le template home hassistant.
par contre l’image n’est pas responsive, mais la ça doit être propre à HA à voir si intégration pour cela.
Pour finir mes recherches, tu devrais pouvoir trouver ton bonheur dans ce post
en rajoutant à la base du template ça
ha-card-background: "rgba(46, 51, 58, 0.6)"
tu devrais réussir ce que tu veux. et ça ne rend pas transpartent les graphique par exemple.
Ne sachant pas comment accéder au template de base de home assistant tu peux télécharger celui là et le modifier pour avoir ce que tu souhaite.
puis faire des modif du fichier, je te joins le code yaml modifié pour intégrer sur la version blanche avec la transparence. si tu utilise la version noire il faudra modifier le code. pour cette version j’ai supprimer les marges et le box shadow des cartes.
Soft UI:
card-mod-theme: Soft UI
card-mod-card: |
ha-card {
margin: auto;
border-radius: auto;
}
app-header-background-color: var(--primary-background-color)
app-header-text-color: var(--primary-text-color)
app-header-selection-bar-color: var(--primary-color)
card-mod-root: |
paper-tab[aria-selected="true"] {
color: var(--primary-color);
}
accent-color: var(--primary-color)
divider-color: transparent
ha-card-background: var(--primary-background-color)
card-background-color: var(--primary-background-color)
lovelace-background: var(--primary-background-color)
paper-item-icon-color: var(--secondary-text-color)
modes:
dark:
primary-color: "#4C3FF9"
light-primary-color: "#7A71FB"
primary-background-color: "#222222"
primary-text-color: "#F7F8F9"
ha-card-box-shadow: "-5px -5px 15px #2c2c2c, 5px 5px 15px #191919"
soft-ui-pressed: "inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919"
light:
primary-color: "#7A71FB"
light-primary-color: "#918AFC"
primary-background-color: "#F3F5F7"
primary-text-color: "#222222"
#ha-card-box-shadow: "-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb"
soft-ui-pressed: "inset -4px -4px 5px #ffffff, inset 4px 4px 5px #ebebeb"
my-white-color: 'rgba(255, 255, 255, 0.5)' #ligne rajouté pour la pour la transparence avec base de couleur blanc
ha-card-background: var(--my-white-color) #appel du background
résultat
J’ai bien cette transparence, sur PC. C 'est l’image sur Iphone qui n’est pas responsive.
Je te joint le code de ce dashboard:
views:
- theme: Backend-selected
title: météo (nom de votre dashboard)
id: météo (nome de votre dashboard)
background: >-
center / cover no-repeat url('/local/Images Maison/Devanture Maison.jpg')
fixed
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
icon: ''
card_mod:
style: |
ha-card {
justify-content: center;
--chip-icon-size: 32px;
--chip-height: 56px;
width: var(--chip-height) !important;
border-radius: 50% !important;
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Accés Maison
title_tap_action:
action: navigate
navigation_path: /dashboard-pieces/2
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Piscine
title_tap_action:
action: navigate
navigation_path: /dashboard-pieces/Piscine?edit=1
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Jardin
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /dashboard-pieces/Jardin?edit=1
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Cuisine
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /dashboard-pieces/cuisine?edit=1
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Chambre Suite Parentale
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Salle de Bains Suite Parentale
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Dressing Suite Parentale
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Toilettes Suite Parentale
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Couloir Suite Parentale
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Salon Côté télé
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Salon Côté Verrière
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Garage
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Bureau 2 Etage
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Couloir Etage
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Espace Jeux Vidéo
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Salle à Manger
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Bureau 1 RDC
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Local Technique
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Cellier
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Chambre Enfants Etage
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Salle de Bains CH 1/2
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Chambre Amis Etage
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Chambre d'Hôtes
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Toilettes Etage
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Lingerie
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Cave à Vins
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Atelier Bricolage
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Toilettes Couloir Corridor
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Hall d'Entrée
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Facade Côté Piscine
subtitle: ''
title_tap_action:
action: navigate
navigation_path: /lovelace-tutorial/media
card_mod:
style:
mushroom-title-card$: |
.title {
--primary-text-color: rgb(var(--rgb-blue));
--title-font-size: 28px;
--title-font-weight: bolder;
}
dès que le nombre de card: type: custom:mushroom-title-card devient important, je perd la possibilité de faire défiler mes choix de devices sur un fond d’image fixe, sans que cette image ne soit utilisée avec un agrandissement à la taille de l’ensemble de mes champs.
Alors que sur PC tout se passe bien.
Alors si je comprends bien, l’image de fond qui est bien fixe après un grand nombre de défilement fait un agrandissement de l’image de fond?
je viens de reprendre l’ensemble de la conversation et j’avais pas compris que c’était ta vidéo. j’ai du mal à comprendre ce que tu veux car en regardant bien la vidéo le background pour le dashbord psicine semble bon, tu as la transparence et l’image semble ne pas bouger derrière. la piscine en fond ne bouge pas lorsque tu change de device.
après il y a un zoom par rapport à l’image qui est dans ton menu de départ car il n’y a pas la proportionnalité.
ou alors je ne vois pas ce que je devrais
c’est dommage qu’il n’y ai pas la possibilité de laissé un message vocal sur le forum ça irait plus vite
Qu’entends-tu par « template home assistant. »??
Pour ma part, les templates que j’utilise sont dans le yaml pour utiliser des services entre autre.
En fait c’est le trop grand nombre de cards dans une vertical-card, qui, sur Iphone modifie l’image sur le background.
La vidéo que j’ai envoyée, est un enregistrement de ma domotique actuelle réalisée avec Lifedomus
Je dois m’absenter pour la soirée.
Merci de l’intérêt que tu portes à mes questions.
A plus
dans le profil soit l’on choisi le template home assistant soit un que l’on télécharge sur HACS. lorsque l’on veut modifier la racine du template on va dans editor dossier theme et il y a ceux qu’on a telechargé mais pas avec le nom "home assistant que l’on trouve lorsque l’on selectionne le thème que l’on souhaite
Ah ok, en faite la vidéo est via l’appli de delta dore et tu mets actuellement en place le même thème sur HA pour basculer? si c’est ça tiens moi au courant il serait peut être mieux de partir différemment.
bonne soirée
Oui c’est cela que je veux réaliser. Je trouve que cette ergonomie est vraiment top, surtout à partir d’une certaine taille de maison.
L’interface Deltadore a été développée suite au rachat de Lifedomus par Deltadore.
Cette interface avait été développée à partie d’Adobe Air.
Cela fait bientôt 2 ans que je travaille sur le passage à HA, sous WM Proxmox, et j’ai déjà testé pas mal de choses (card, template, gestion de l’alarme, des volets à lames, des prévisions météo pour générer un coefficient de temps d’arrosage, transformation de porte de garage impulsionnelle, en commande réelle et proportionnelle),
Ok dans ce cas il vaut mieux partir d’un template que tu modifie avec par exemple la transparence à la base du template, mettre toute tes images dedans, faire le lien tes rubrique (ex: piscine, salon) avec l’image que tu souhaite par rubrique, et après travailler sur les cards que tu souhaite faire.
comme ça, ça serait beaucoup plus simple. pour tes rubriques tu fais justes une image de fond de la carte en lien avec ta rubrique dashboard.
je serais toi je ferai un autre dashbord, je télecharge soft theme via HACS, tu travail la mise en page, soit noir, soir blanc soit les deux. et après tu boss sur les cartes.
Ma page d’accueil ressemble à ceci
Je pense que j’ai une lacune sur ce type de Template.
Peux-tu détailler??
tu vas dans HACS > Interface > explorer et télécharger des dépôts > tu cherche et installe Soft theme.
ça va installer un template facilement modifiable.
après tu vas dans ton profil et la tu peux sélectionner le theme que tu souhaite.
à partir de la lorsque tu vas dans File Editor si tu la installé tu as accés aux dossiers dans home assistant et à partir de la il y a un dossier theme avec un fichier Soft que tu peux modifier (c’est la structure du template).
Un peu de retard pour répondre car panne totale internet par chez moi.
J’ai bien le soft thème dans mon dossier theme, mais je ne la trouve pas dans les choix de themes de mon profile. J’ai redémarré HA et ma VM, mais rien ne change???