Hope I’m in the right thread here!
Please help!
How can I place a dividing line in the lower area and a text in the middle underneath?
should look like this!
type: custom:button-card
entity: sensor.tennis_atp_rafael_nadal_card
name: false
show_name: false
show_state: false
show_icon: false
styles:
grid:
- grid-template-areas: |
"template template template"
card:
- border-radius: null
- overflow: hidden
- position: relative
- padding: 0
- display: flex
- flex-direction: column
- justify-content: center
- align-items: center
custom_fields:
background-images:
- position: absolute
- inset: 0
- display: flex
- justify-content: space-between
- align-items: center
- opacity: 0.3
foreground-images:
- position: absolute
- inset: 0
- display: flex
- justify-content: space-between
- align-items: center
- z-index: 0
custom_fields:
template:
card:
type: custom:button-card
name: |
[[[
let state = states['sensor.tennis_atp_rafael_nadal'].state;
if (state === 'PRE') {
return `Text <br/>${entity.state}<br/> ${entity.attributes.pre_runde_start_zeit}`;
} else if (state === 'IN') {
return `${entity.attributes.in_ergebnis_sets}<br/>LIVE ${entity.attributes.in_live_ergebnis_score}<br/>
<div style="display: inline-block; text-align: right;">
${entity.attributes.in_spieler_score}<br/>
${entity.attributes.in_gegner_score}</div>`;
} else if (state === 'POST') {
return `Ergebnis ${entity.attributes.post_ergebnis_result}<br/>
<div style="display: inline-block; text-align: right;">
${entity.attributes.in_spieler_score}<br/>
${entity.attributes.in_gegner_score}</div>`;
} else if (state === 'NOT_FOUND') {
return 'Momentan Keine Tennis ATP Spiele';
}
]]]
styles:
card:
- background-color: transparent
- box-shadow: none
- font-weight: bold
- color: white
- font-size: 16px
background-images: |
[[[
return `
<img src="/local/sportpng/flagen/spanien.png" alt="Left Back" style="height: 13rem; width: 11rem;">
<img src="${states['sensor.tennis_atp_alexander_zverev'].attributes.opponent_logo}" alt="Right Back" style="height: 10rem; width: 10rem;">
`;
]]]
foreground-images: |
[[[
return `
<img src="/local/sportpng/nadal.png" alt="Left Foreg" style="height: 7.5rem; ">
<img src="https://a.espncdn.com/combiner/i?img=/i/headshots/tennis/players/full/${states['sensor.tennis_atp_alexander_zverev'].attributes.opponent_id}.png" alt="Right Foreg" style="height: 7.5rem; ">
`;
]]]