lovelace-header-cards icon indicating copy to clipboard operation
lovelace-header-cards copied to clipboard

hi thumb question

Open MaxRei-dev opened this issue 2 years ago • 3 comments

Where to add the yaml ?

eg: header_cards: badges: - entity: binary_sensor.motion_trigger name: '' cards: - type: markdown content: | Hello it is {{ states("sensor.time") }} views:

i tried in the lovelace yaml, but the card ist then in the very top....

MaxRei-dev avatar Mar 07 '22 10:03 MaxRei-dev

2022-03-07 11_12_36-Übersicht – Home Assistant

MaxRei-dev avatar Mar 07 '22 10:03 MaxRei-dev

It should be at the very top of the dashboard. If you edit it through the UI you would edit it in the Raw Configuration Editor and it would look something like:

image (`views:` isn't part of the configuration of this, just an indication of where it should be in the config).

i tried in the lovelace yaml, but the card ist then in the very top....

If by this, you are referring to the custom cards being on the very right-hand side of the toolbar, like image Currently, that is a limitation of how it lays out the content - it is positioned to the left of the menu button and resizes to fit the badges and cards - if you add more badges or cards it will use more of the available space.

I am investigating whether it is possible to add alignment options.

gadgetchnnel avatar Mar 07 '22 17:03 gadgetchnnel

I've created a new version, 0.0.7, which includes a justify_content option allowing more control over the appearance of the cards and badges.

For example:

header_cards:
  justify_content: left
  badges:
    ...
  cards:
    ...

will display them on the left hand side.

Any value supported by the justify-content CSS property can be used - see here for the full list.

gadgetchnnel avatar Mar 18 '22 16:03 gadgetchnnel