Bonjour,
malgré mes tentatives et des téléchargements d’intégrations en frontend sur HACS
je ne trouve pas comment faire des « Titres sans fond »
J’aimerais que le titre de la carte qui suit ou au quel il est attaché soit « détaché » et sans fond.
Un peu comme ce thème GitHub - pqpxo/SWAKES_hassio: Home Assistant
Merci d’avance pour vos réponses
Bonjour,
tout dépend ou tu mets le titre :
- type: grid
columns: 1
square: false
title: Carte des précipitations
cards:
- type: iframe
la, il sera au dessus :
- type: grid
columns: 1
square: false
cards:
- type: iframe
tille: Carte des précipitations
la, il sera dans la carte :
Tu as la chance d’avoir les sources. Profite en 
- content: >
# <img width="30" height="30" src='/local/unifilogo.png'
style='vertical-align:middle' /> UniFi Network
style:
.: |
ha-card {
background-color: transparent !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 25px;
# font-weight: bold;
text-align: center;
letter-spacing: '-0.01em';
}
type: markdown
depuis cette source :
Tu auras besoin de card-mod j’ai l’impression
La j’utilise « button-text-card » sur HACS.
Mais c’est pas ce que je cherche.
Je voudrais que le titre « Lumière » fasse partie de la carte (car la c’est un titre séparé), qu’il soit sur fond transparent et à la même position que lorsqu’il est inséré en titre normal de la carte.
Voici mon code actuel :
title: Lumières
type: entities
entities:
- entity: light.chevet
name: Chevet (chambre)
- entity: light.trepied
name: Trépied (chambre)
theme: Serenity
card_mod:
style: |
ha-card {
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* Safari 9+ */
box-shadow: 0px 10px 15px 10px rgb(0 0 0 / 15%);
}
Et voici quelque chose que j’ai rajouté
ha-card .card-header{
background-color: red;
}
Qui me fait obtenir :
C’est bien (à peu près) cette zone que je souhaite rendre transparente.
Peut être un peu moins bas. Et je souhaite préserver des bords transparent en haut à gauche et en haut à droite.
Quand je fais « transparent » au lieu de red, rien ne change
Voici un résultat plus proche
même il s’agit de deux cartes différente, alors que j’aimerais que ça ne soit qu’une seule. Le titre lumière doit se retrouver un peu plus proche également
text-divider-row card peut-être
Salut @Ayno
Quelque chose de ce genre ?
title: Lumières
type: entities
entities:
- entity: light.chevet
name: Chevet (chambre)
- entity: light.trepied
name: Trépied (chambre)
theme: Serenity
card_mod:
style: |
ha-card {
background-color: transparent ;
}
.card-content{
background: var(--card-background-color);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* Safari 9+ */
box-shadow: 0px 10px 15px 10px rgb(0 0 0 / 15%);
border-radius: var(--ha-card-border-radius);
}
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: none
styles:
card:
- font-size: 20px
- font-family: Kalam
- padding-top: 10px
- padding-bottom: 0px
name: Pièce de vie
- type: horizontal-stack
cards:
- type: entities
entities:
- type: divider
style: |
ha-card {
margin-top: -5px;
margin-bottom: 10px
}
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: none
styles:
card:
- font-size: 22px
- padding-top: 0px
- padding-bottom: 0px
- font-family: Kalam
- background: rgb(190,4,84)
- background: >-
radial-gradient(circle, rgba(190,4,84,1) 0%, rgba(188,27,193,0)
100%)
- '--keep-background': true
style: |
ha-card {
--ha-card-background: none;
margin-bottom: 10px
}
name: Salon
- type: horizontal-stack
cards:
- type: button
entity: light.ambiance
name: Spots
icon: mdi:lightbulb-spot
- type: button
entity: light.ambiance
name: Ambiance
icon: mdi:lamp
- type: button
entity: light.ambiance
name: Ambiance2
icon: mdi:lamp
- type: button
entity: switch.pcbureau
name: PC
icon: mdi:desktop-classic
@John @vinula
Merci pos vos réponses
J’ai réussi voici le résultat
Je l’ai fais avec card-mod
Je vais essayer aussi la technique de @John
peux-tu poster le code de ton résultat??
Ce serait sympa.
Cordialement
C’est le code de @Christianb233
Le truc que je n’arrive pas à résoudre c’est que j’ai découvert que j’avais un bug.
C’est qu’en faisant du layout-card toute mes cards se mettent à la suite des autres. Donc sur téléphone c’est génial, pas de problème. Mais sur ordinateur ou tablette ça serait bien que les cartes changent de disposition…
Désolé mais je trouve bien son dashboard, mais je n’ai pas trouvé le code…
Pourtant j’adore ton résultat sur smartphone
Merci
c’est des layoud-card, avec du style appliqué grâce à mod-card, comme le code que j’ai donné ci dessus
ensuite c’est un fond de montagne.
rien d’exceptionnel ^^
Je’ ai déjà testé ces possibilités, mais je rame encore un peu pour les différents paramètres et leur hiérarchie.
Actuellement j’essaie de faire ceci, mais je galère pour faire une card simple:
Button simple
