Hi bleakvin 
I added this in my theme
card-mod-root: |
app-toolbar {
display: none;
}
You will need this
1 Like
Then I have a problem integrating the Scenes buttons, I have imported the 01_home.yaml but they don’t want to work for me…
everything else works fine
1 Like
same for me
1 Like
Show me your file I could maybe help you
1 Like
I have shortened almost everything for the purpose of overview:
Pastebin Link
The “Scenes” lines would be at: Line 46 to 76
Line 77 to 123 is e.g. a working switch card.
Thank you very much.
1 Like
Thank you it is just beautiful and easy to use.
I have created a specific card for my ligths using custom:slider-card
light_buttons:
variables:
entity: "cover.fibaro_cover_balcon"
name: "Lumière"
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: "[[[ return variables.entity ]]]"
name: "[[[ return variables.name ]]]"
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: "[[[ return variables.entity ]]]"
template:
- icon_info
- light
type: "custom:button-card"
item2:
card:
template: list_items_light
type: "custom:button-card"
custom_fields:
item1:
card:
type: custom:slider-card
entity: "[[[ return variables.entity ]]]"
radius: 14px
height: 42px
mainSliderColorOff: var(--google-grey-500)
secondarySliderColor: "rgba(var(--couleur-theme),0.05)"
secondarySliderColorOff: "rgba(var(--couleur-theme),0.05)"
thumbColorOff: white
item2:
card:
icon: "mdi:palette"
tap_action:
action: more-info
type: "custom:button-card"
entity: "[[[ return variables.entity ]]]"
template: widget_icon
8 Likes
Très belle interface ! Merci du partage 
Very nice interface! Thanks for sharing
2 Likes
I would also like the rest of this template. Thanks
Oups sorry 
list_items_light:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
@tben Already lots of people love your work! 
Why don’t you create a github repository with the cards as generic building blocks? And others enthusiasts with visuals skills like @schumijo could start adding to it!
I could help with the setup if you want, but frontend dev is definitely not my thing unfortunately. That’s why I need something like this where I can just pick the card I want and copy/paste yaml
Anyway, keep up the good work!
2 Likes
Hi guys the goal was to share my setup asap. I’ll take care of sharing on Github next week when I return from vacation
5 Likes
FR:
Comme je l’ai déjà dit : Merci pour le thème et le partage
Voici une modeste contribution (surtout si c’était déjà présent dans le code 
)
L’ajout par rapport au modèle (template) déjà fournis, est l’utilisation de la clé id afin de combiner plusieurs modèle (template)
EN :
As I said before: Thanks for the theme and sharing
My small contribution (especially if it was already present in the code )
I have added to the template already provided, the id key to merge several template: +1:
Porte / Door :
#Carte/Card
type: custom:button-card
entity: binary_sensor.porte_cuisine
template:
- icon_info_bg
- ouverture_porte
name: Cuisine
#Modèle/Template
button_card_templates:
ouverture_porte:
template:
- rouge_on
- vert_off
state:
- icon: mdi:door-open
label: Porte Ouverte
id: rouge_on
value: 'on'
- icon: mdi:door-closed
label: Porte Fermée
id: vert_off
value: 'off'
Fenêtre/Window
#Carte/Card
type: custom:button-card
entity: binary_sensor.fenetre_bureau
template:
- icon_info_bg
- ouverture_fenetre
name: Bureau
#Modèle/Template
button_card_templates:
ouverture_fenetre:
template:
- rouge_on
- vert_off
state:
- icon: mdi:window-open-variant
label: Fenêtre Ouverte
id: rouge_on
value: 'on'
- icon: mdi:window-closed-variant
label: Fenêtre Fermée
id: vert_off
value: 'off'
Modèles inclus dans les modèles / Templates includes in template (inception )
button_card_templates:
vert_off:
state:
- id: vert_off
styles:
icon:
- color: rgba(var(--couleur-vert),1)
img_cell:
- background-color: rgba(var(--couleur-vert), 0.2)
value: 'off'
vert_on:
state:
- id: vert_on
styles:
icon:
- color: rgba(var(--couleur-vert),1)
img_cell:
- background-color: rgba(var(--couleur-vert), 0.2)
value: 'on'
rouge_on:
state:
- id: rouge_on
styles:
icon:
- color: rgba(var(--couleur-rouge),1)
img_cell:
- background-color: rgba(var(--couleur-rouge), 0.2)
value: 'on'
rouge_off:
state:
- id: rouge_off
styles:
icon:
- color: rgba(var(--couleur-rouge),1)
img_cell:
- background-color: rgba(var(--couleur-rouge), 0.2)
value: 'off'
Edit :
Merci beaucoup, très jolie
Thank you very much it makes it really pretty:
6 Likes
This will be the next scoop here, looking forward to it.
J’ai retravaillé la carte alarme pour qu’elle colle mieux au désign. Je laisse le code pour ceux qui veulent l’améliorer
I reworked the alarm card to match the minimalist design. I share the code for those who want to improve it
type: vertical-stack
cards:
- card:
entity: alarm_control_panel.alarme
states:
- arm_home
style:
.: |
ha-card > ha-label-badge{
--alarm-state-color: var(--google-green-500) !important;
}
ha-card{
padding-top: 16px;
padding-bottom: 12px !important;
border-radius: 21px;
}
ha-card > h1{
padding-top: 0;
color: transparent;
}
ha-card > h1::before{
content: "Désactivée";
color: var(--google-green-500);
position: absolute;
font-variant: small-caps;
}
#alarmCode{
display: none;
}
#keypad{
display: none !important;
}
'#armActions':
mwc-button:
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "Activer";
margin: 0 0 0 50%;
}
title: Alarme
type: alarm-panel
conditions:
- entity: alarm_control_panel.alarme
state: disarmed
type: conditional
- card:
entity: alarm_control_panel.alarme
states:
- arm_home
title: Alarme
type: alarm-panel
style:
.: |
ha-card > ha-label-badge{
--alarm-state-color: var(--google-red-500) !important;
}
ha-card{
padding-top: 16px;
padding-bottom: 12px !important;
border-radius: 21px;
}
ha-card > h1{
padding-top: 0;
color: transparent;
}
ha-card > h1::before{
content: "Activée";
color: var(--google-red-500);
position: absolute;
font-variant: small-caps;
}
'#armActions':
mwc-button:
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "Désactiver";
margin: 0 0 0 50%;
}
'#keypad':
mwc-button:
$: |
#button{
border-radius: 12px
}
conditions:
- entity: alarm_control_panel.alarme
state_not: disarmed
type: conditional
Il reste a reprendre les couleurs… Fait
It would be necessary to use the colors of the theme… Done
6 Likes
this is sexy. many thanks.
Thanks a lot guys !
Sans optimiser le code, voici 2 nouvelles cartes que j’utilise.
Without optimizing templates, 2 cards that I use (like covers).
@tben : correct them if you want, I’m not a designer …
#templates
button_card_templates:
list_items_1:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
- column-gap: 7px
garage_button:
variables:
entity: binary_sensor.default
name: Default name
icon: mdi:home
entity_command: input_boolean.default
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: more-info
template:
- icon_info
- ouverture
state:
- icon: mdi:garage-open-variant
value: 'on'
id: 'on'
label: Ouvert
- icon: mdi:garage-variant
value: 'off'
id: 'off'
label: Fermé
type: custom:button-card
item2:
card:
template: list_items_1
type: custom:button-card
custom_fields:
item1:
card:
icon: '[[[ return variables.icon ]]]'
tap_action:
action: call-service
service: input_boolean.turn_on
service_data:
entity_id: '[[[ return variables.entity_command ]]]'
type: custom:button-card
template: widget_icon
portail_close_button:
variables:
entity: binary_sensor.default
name: Default name
icon: mdi:home
entity_command: input_boolean.default
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: more-info
template:
- icon_info
- ouverture
state:
- icon: mdi:gate-open
value: 'on'
id: 'on'
label: Ouvert
- icon: mdi:gate
value: 'off'
id: 'off'
label: Fermé
type: custom:button-card
item2:
card:
template: list_items_1
type: custom:button-card
custom_fields:
item1:
card:
icon: mdi:arrow-left-bold
tap_action:
action: call-service
service: input_boolean.turn_on
service_data:
entity_id: '[[[ return variables.entity_command ]]]'
type: custom:button-card
template: widget_icon
list_items_2:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
portail_button:
variables:
entity_pieton: input_boolean.default
entity_voiture: input_boolean.default
name: Default name
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: more-info
template:
- icon_info
- ouverture
state:
- icon: mdi:gate-open
value: 'on'
id: 'on'
label: Ouvert
- icon: mdi:gate
value: 'off'
id: 'off'
label: Fermé
type: custom:button-card
item2:
card:
template: list_items_2
type: custom:button-card
custom_fields:
item1:
card:
icon: mdi:run
tap_action:
action: call-service
service: input_boolean.turn_on
service_data:
entity_id: '[[[ return variables.entity_pieton ]]]'
type: custom:button-card
template: widget_icon
item2:
card:
icon: mdi:car
tap_action:
action: call-service
service: input_boolean.turn_on
service_data:
entity_id: '[[[ return variables.entity_voiture ]]]'
type: custom:button-card
template: widget_icon
#cards
type: grid
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: binary_sensor.door_012
state: 'off'
card:
type: custom:button-card
variables:
entity: binary_sensor.door_012
entity_pieton: input_boolean.portail_pieton_command
entity_voiture: input_boolean.portail_voiture_command
name: Portail
template:
- portail_button
- type: conditional
conditions:
- entity: binary_sensor.door_012
state: 'on'
card:
type: custom:button-card
variables:
entity: binary_sensor.door_012
entity_command: input_boolean.portail_pieton_command
name: Portail
template:
- portail_close_button
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: binary_sensor.porte_du_garage
state: 'off'
card:
type: custom:button-card
variables:
entity: binary_sensor.porte_du_garage
entity_command: input_boolean.garage_command
name: Garage
icon: mdi:arrow-up-bold
template:
- garage_button
- type: conditional
conditions:
- entity: binary_sensor.porte_du_garage
state: 'on'
card:
type: custom:button-card
variables:
entity: binary_sensor.porte_du_garage
entity_command: input_boolean.garage_command
name: Garage
icon: mdi:arrow-down-bold
template:
- garage_button
columns: 2
square: false
détecteur de fumée / smoke detector
#card:
entity: binary_sensor.smoke_sensor_salon
type: custom:button-card
template:
- icon_info_bg
- ouverture
name: Salon
state:
- icon: mdi:fire
value: 'on'
id: 'on'
label: Incendie !
- icon: mdi:shield-check
value: 'off'
id: 'off'
label: RAS
Toujours avec l’utilisation des id / Always with id key :
#template
ouverture:
template:
- rouge_on
- vert_off
state:
- label: Ouvert(e)
id: 'on'
value: 'on'
- label: Fermé(e)
id: 'off'
value: 'off'
J’aime vraiment le rendu et je suis sûr que @tben tu pourras rendre les cartes encore plus belles
Edit for bilingual : I really like this theme and I’m sure @tben you can make the cards look even better
4 Likes
Toujours en partant de l’existant, voici pour mes volets somfy :
Modification of the initial code for my somfy shutters :
#templates
button_card_templates:
cover_somfy:
tap_action:
action: more-info
icon: |
[[[
var icon = 'mdi:window-shutter';
if (entity.attributes.current_position == 0){
var icon = 'mdi:window-shutter';
} else
var icon = 'mdi:window-shutter-open';
return icon ;
]]]
label: |-
[[[
if (entity.state == 'opening'){
return 'Ouverture';
}
else if (entity.state == 'closing'){
return 'Fermeture';
}
else{
if (entity.attributes.current_position == 0){
var etat = "Fermé";
}else if (entity.attributes.current_position == 100){
var etat = "Ouvert" ;
}else{
var etat = (entity.attributes.current_position) + '%' ;
}
return etat ;
}
]]]
state:
- styles:
icon:
- color: rgba(var(--couleur-vert),1)
img_cell:
- background-color: rgba(var(--couleur-vert), 0.2)
value: closed
- styles:
icon:
- color: rgba(var(--couleur-jaune),1)
img_cell:
- background-color: rgba(var(--couleur-jaune), 0.2)
value: open
- styles:
icon:
- color: rgba(var(--couleur-bleu),1)
img_cell:
- background-color: rgba(var(--couleur-bleu), 0.2)
value: opening
- styles:
icon:
- color: rgba(var(--couleur-bleu),1)
img_cell:
- background-color: rgba(var(--couleur-bleu), 0.2)
value: closing
list_items_cover_favorite:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item1 item2"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
cover_buttons_with_favorite:
variables:
entity: cover.default
name: Default name
sun_position: 0
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
template: list_items_cover_favorite
type: custom:button-card
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: more-info
template:
- icon_info
- cover_somfy
type: custom:button-card
item2:
card:
icon: mdi:weather-sunset-down
tap_action:
action: call-service
service: cover.set_cover_position
service_data:
entity_id: '[[[ return variables.entity ]]]'
position: '[[[ return variables.sun_position ]]]'
type: custom:button-card
template: widget_icon
item2:
card:
template: list_items
type: custom:button-card
custom_fields:
item1:
card:
icon: mdi:arrow-down
tap_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
item2:
card:
icon: mdi:pause
tap_action:
action: call-service
service: cover.stop_cover
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
item3:
card:
icon: mdi:arrow-up
tap_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: '[[[ return variables.entity ]]]'
type: custom:button-card
template: widget_icon
#carte
type: custom:button-card
template: cover_buttons_with_favorite
variables:
entity: cover.volet_parent
name: Parents
sun_position: 13
5 Likes