Voici des cartes permettant d'afficher l'heure un peu différemment que proposé nativement. Prérequis:Button Card: https://github.com/custom-cards/button-card card-mod 3: https://github.com/thomasloven/lovelace-card-mod Cartes:Vous pouvez bien entendu mettre cette carte dans le cadre de titre en haut de votre tableau de bord. Pour ce faire il suffit de cliquer sur le bouton permettant d'ajouter un titre, et de remplacer le YAML de la carte par celle que je propose. type: custom:button-card
layout: icon_name_state2nd
entity: sensor.date
size: 24px
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 0
- padding-top: 26px
grid:
- grid-template-areas: '''date s'''
- grid-template-columns: auto min-content
- grid-template-rows: auto min-content
custom_fields:
date:
- align-self: end
- justify-self: right
- margin-right: 15px
- margin-bottom: 9px
- font-size: 16px
- text-align: right
custom_fields:
date: |-
[[[
let now = new Date();
let month = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
return now.getDate() + ' ' + month[now.getMonth()] + ' ' + now.getFullYear();
]]]
card_mod:
style: |
ha-card {
backdrop-filter: none !important;
background-color: transparent;
box-shadow: none;
border: none;
}
grid_options:
columns: 6
rows: 1 type: clock
clock_size: medium
show_seconds: true
grid_options:
columns: 6
rows: 1
card_mod:
style:
.: |
ha-card {
backdrop-filter: none !important;
background: transparent;
box-shadow: none;
border: none;
}
ha-card > .time-wrapper.size-medium {
height: auto;
padding: 0;
row-gap: 12px;
}
ha-card > .time-wrapper.size-medium .time-parts {
font-size: 4rem;
}
ha-card > .time-wrapper.size-medium .time-parts .time-part.am-pm,
ha-card > .time-wrapper.size-medium .time-parts .time-part.second {
font-size: 24px;
margin-left: 8px;
} type: horizontal-stack
cards:
- type: clock
clock_size: medium
show_seconds: true
grid_options:
columns: 6
rows: 1
card_mod:
style:
.: |
ha-card {
backdrop-filter: none !important;
background: transparent;
box-shadow: none;
border: none;
float: right;
margin-right: -52px
}
ha-card > .time-wrapper.size-medium {
height: auto;
padding: 0;
}
ha-card > .time-wrapper.size-medium .time-parts {
font-size: 4rem;
}
ha-card > .time-wrapper.size-medium .time-parts .time-part.am-pm,
ha-card > .time-wrapper.size-medium .time-parts .time-part.second {
font-size: 22px;
margin-left: 8px;
}
- type: custom:button-card
layout: icon_name_state2nd
entity: sensor.date
size: 24px
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 0
grid:
- grid-template-areas: "'date'"
- grid-template-columns: auto
- grid-template-rows: auto
custom_fields:
date:
- height: 20px
- align-self: end
- justify-self: start
- margin-left: 20px
- margin-right: 15px
- margin-top: 22px
- font-size: 20px
custom_fields:
date: |-
[[[
let now = new Date();
let month = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
return now.getDate() + ' ' + month[now.getMonth()] + ' ' + now.getFullYear();
]]]
card_mod:
style: |
ha-card {
backdrop-filter: none !important;
background-color: transparent;
box-shadow: none;
border: none;
}
grid_options:
columns: full type: vertical-stack
cards:
- type: clock
clock_size: medium
show_seconds: true
grid_options:
columns: 6
rows: 1
card_mod:
style:
.: |
ha-card {
backdrop-filter: none !important;
background: transparent;
box-shadow: none;
border: none;
}
ha-card > .time-wrapper.size-medium {
height: auto;
padding: 0;
row-gap: 12px;
}
ha-card > .time-wrapper.size-medium .time-parts {
font-size: 4rem;
}
ha-card > .time-wrapper.size-medium .time-parts .time-part.am-pm,
ha-card > .time-wrapper.size-medium .time-parts .time-part.second {
font-size: 24px;
margin-left: 8px;
}
- type: custom:button-card
layout: icon_name_state2nd
entity: sensor.date
size: 24px
show_icon: false
show_name: false
show_state: false
styles:
card:
- padding: 0
grid:
- grid-template-areas: "'date s'"
- grid-template-columns: auto min-content
- grid-template-rows: auto min-content
custom_fields:
date:
- align-self: end
- justify-self: center
- margin-right: 15px
- margin-bottom: 9px
- font-size: 16px
custom_fields:
date: |-
[[[
let now = new Date();
let month = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
return now.getDate() + ' ' + month[now.getMonth()] + ' ' + now.getFullYear();
]]]
card_mod:
style: |
ha-card {
backdrop-filter: none !important;
background-color: transparent;
box-shadow: none;
border: none;
}