For a temperature sensor, I would like to have the temperature (so the state) big in the middle, the icon small in the right corner and the name centered below the temperature. But it simply does not work, the grid partly ignores how the parts should be arranged and just puts the state back at the bottom, the name does not take the two columns as expected, etc.
If I just exchange the i in the grid also with an s, it does suddenly move the state value up and positions the name as expected, so there is any internal logic that overwrites what I have defined in the grid:
You may confuse the grid with using an “l” (for label) or whatever name you like so it reserves the space you don’t want to be occupied for an entity that doesn’t exist:
Thanks, that generally works, with the downside that it takes exclusively space (now 20%) for a whole row to display the icon on the right side, instead of having that in the same row than the state (just aligned to the top right).
I find that not really logical/buggy, but was able to achieve my goal (still to be adjusted in details, but that was the main part to achieve).
decluttering_templates:
notification_template: # This is the name of a template
card:
type: custom:button-card
name: '[[name]]'
size: 50%
show_state: false
show_label: false
layout: icon_name
tap_action:
action: none
hold_action:
action: none
styles:
card:
- --ha-card-background: rgba(0,0,0,0.0)
- box-shadow: none
- height: 10px
name:
- font-size: 18px
- font-family: Helvetica
- justify-self: start
- font-weight: normal
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 2% 1fr
- grid-template-rows: 1fr
However, now i’m trying to do the same but instead of putting in the name “Er zijn lampen aan” , i want to count the lamps that are on.
I have a sensor for that, thats has state equal to number lights that are on.
However i dont succeed in putting that into "Er zijn (states('sensor.current_lights_on) lampen aan
Someone at decluttering card pointed me that i need to use javascript templates (o ow)
It seems i’m trying to use Jinja2 templates with button card. That doesn’t work. Probably cause i used markdown before. He said i had to try this
Just play around with the tamplate-areas. This would be my favourite layout (note: aspect_ratio destroys the button on my HAss completely –on any button-card– so I had to disable it):
type: custom:button-card
#aspect_ratio: 1/1
entity: sensor.hmip_dg_t2_temp
name: Temperatur
show_state: true
show_icon: true
styles:
grid:
- grid-template-areas: '"s s i" "n n n"'
- grid-template-columns: 40% 40% 1fr
# - grid-template-rows: 1fr min-content
state:
- justify-self: right
name:
- font-size: 12px
- align-self: end
- justify-self: center
- padding-bottom: 0px
icon:
- width: 50%
- margin-top: '-20%'
card:
- width: 100px
Yeah thanks, the more I play around with it the more buggy I find this.
If state and icon are in the same row, the state can be positioned with justify-self and align-self, but the icon not at all - unless i insert a negative margin-top, that seems to increase the box in which the icon can be positioned and then align-self does work.
type: custom:button-card
entity: sensor.bsb_lan_trinkwassertemperatur
name: Temperatur
show_state: true
show_icon: true
styles:
grid:
- grid-template-areas: '"s s i" "n n n"'
- grid-template-columns: 40% 40% 1fr
state:
- justify-self: right
name:
- font-size: 12px
- align-self: center
- justify-self: center
- padding-bottom: 0px
icon:
- width: 100%
- margin-top: '-100%'
- align-self: start
card:
- height: 100px
Now align-self: end puts it on the height of the state, start puts it to the top. But the top is only determined by the negative margin (which I need to position with try & error) - which the state does not need to be positioned in its full part of the grid. Without the margin, align-self does not work.
I find this example based on yours also a bit “dirty” with the state being aligned to the right in its 80% box. That is why I tried to have the state in its own row, but every way seems to have some drawbacks.
I like the idea of the grid, but either there are CSS specialties that I do now understand so far, or it does not always behave like it should based on the definition. Is that a bug or why do state and icon behave differently in the grid positioning?
Hey Kongo! I tried for hours to- get this working but I can’t, I’m getting errors no matter which way I try to set up the scripts. Can’t put them in configuration.yaml, but not in a separate yaml either. The card I got looks way out of whack too. Could you perhaps share your full config to compare?
Or do you have an updated version? I’ve been trying for months to get my humi/puri setup in HA and im going crazy! Thanks for your work.
