having this button (which for the purpose of this post was stripped of personal info):
and I want to align the left icon to the top spot, just like the number 24, the custom_field years is in the right side.
I am struggling with the grid-template-areas though, and am not sure what I should do. I can add several 1fr 's extra to the grid-template-rows, but then the name, date and Type are no longer on the bottom left side, which is what I want.
yaml for the button-template:
button_feest_alert:
template: styles_img_cell
aspect_ratio: 1
name: >
[[[ return entity.attributes.name + ' ' + entity.attributes.event; ]]]
icon: mdi:party-popper
show_state: false
size: 30px # size if the icon
state:
- operator: template
value: >
[[[ var id = entity.attributes.name.toLowerCase();
var notification = 'persistent_notification.' + id;
return states[notification]; ]]]
spin: true
styles:
icon:
# - align-self: start # does nothing ?
- color: orange
- justify-self: start
card:
- background-image: >
[[[ return `url("/local/family/${entity.attributes.name.toLowerCase()}.jpg")`; ]]]
- background-repeat: no-repeat
- background-size: 100%
- background-position: center
- color: white
- font-size: 10px
- padding: 5px
name:
- align-self: end
- color: pink
- justify-self: start
- padding-bottom: 4px
grid:
- grid-template-areas: '"i years" "n n" "original_date original_date" "type type"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
custom_fields:
years:
- align-self: start
- font-size: 20px
- justify-self: end
- color: red
- animation: >
[[[ var id = entity.attributes.name.toLowerCase();
var notification = 'persistent_notification.' + id;
return (states[notification]) ? 'blink 2s ease infinite' : 'none'; ]]]
original_date:
- align-self: end
- justify-self: start
- padding-bottom: 2px
- --text-color-sensor: red
type:
- align-self: end
- justify-self: start
- padding-bottom: 2px
- --text-color-sensor: yellow
custom_fields:
years: >
[[[ return entity.attributes.years; ]]]
original_date: >
[[[ return `Date: <span style='color: var(--text-color-sensor);'>
${entity.attributes.original_date}</span>`; ]]]
type: >
[[[ return `Type: <span style='color: var(--text-color-sensor);'>
${entity.attributes.type}</span>`; ]]]
which seems complex at first, but should be straightforward really…
please have a look if you are familiar with the grid-template-areas and help me out?
if I use:
grid:
- grid-template-areas: '"i years" "n n" "original_date original_date" "type type"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 2fr 1fr 1fr
it creates a bigger row for the top icon, and pushes the date and type fields down nicely, but the name is centered, and down with the date and type fields…
thx!