Home Assistant Community

Compact Custom Header

#1

Compact Custom Header

Customize the Home Assistant header!

Features:

  • Compact design that removes header text.
  • Style or hide anything in the header.
  • Conditionally style the header based on the state of entities.
  • Per user/device settings using user names, user agents, and media queries.
  • Hide tabs/buttons from user’s and devices.
  • Any icon button can be hidden, made into a clock with optional date, or placed in the options menu.

Visit Github for installation, configuration, and troubleshooting.
Read through the troubleshooting guide before posting issues here or on Github.


Buy Me A Coffee

Before:

After:

Conditional Styling Demo:

33 Likes

Lovelace - Hide top header
iOS app - iPhone X/XS space area around home bar
Lovelace config for pc/iPhone
Different GUIs for Each User?
Auto close Menu
Hide hass.io
Is it possible to create a second user that controls automations that other users cant see?
Lovelace UI released!
Lovelace UI Showing Excluded Entities
Lovelace badge+notification banner
Lovelace and/or Legacy UI: Show or hide cards (or views or groups) on a per-user basis
Home Assistant for iOS 2.0 Beta Testing
#4

Very nice!

One comment though: I had to specify menu: false because my menu icon and my first view’s icon were overlapping and it was impossible to click to open, basically, /lovelace/0

If this helps reproducing the issue, I should mention that I enabled ‘lovelace’ as my default skin.

0 Likes

#5

Great idea!!! But I have one issue. My first view don’t display anything. I use layout-card with panel: true option. Maybe this cause the issue.
My configuration:

title: 'Dom'
views:
  - id: home
    icon: mdi:home
    title: 'Pomieszczenia'
    panel: true
    cards:
      - id: e6593c353c63a0df4ee61a1ca28879f1
        type: custom:compact-custom-header
        notification: true
        menu: true
        options: true
        voice: false
        clock: notification
        clock_format: 24
        clock_am_pm: false
        header: true
      - id: 1df7fd2745823cd0ee3a19d048d2da11
        type: custom:layout-card
        cards:
0 Likes

#6

Have you tried a full refresh after?

0 Likes

#7

Doesn’t look like it plays nice with panel view yet. Will look into it.

0 Likes

#8

Found a workaround for panel view. Place this “card” at the end of a vertical stack with the card used in panel view. So in your posted code, try this:

title: 'Dom'
views:
  - id: home
    icon: mdi:home
    title: 'Pomieszczenia'
    panel: true
    cards:
    - type: vertical-stack
      cards:
      - type: custom:layout-card
        cards:
          ------------cards in layout-card--------
      - type: custom:compact-custom-header
        voice: false
        clock: notification
        clock_format: 24
1 Like

#9

Nice work!
Doesn’t seem to affect the mobile version… it works on my PC, but not on my wall mounted tablet or phone.

0 Likes

#10

Should work on mobile just fine. Try refresh/clearing cache.

0 Likes

#11

Yes, now my first view displays but there is something wrong with margin:

image

On mobile (Chrome/Opera) the clock and menu icon cover the view icons:

0 Likes

#12

Place “card” last to fix your spacing issue.

Will fix overlap soon. Only an issue with too many tabs. Will limit number of tabs and you’ll just have to scroll through them.

0 Likes

#13

I don’t know if the additional functionality you have in here could work like this, but one of the cool things about the gist from @ciotlosm is that it’s NOT a card and you can choose to include the functionality for particular clients, or exclude it for particular clients by just pointing the browser at a specific URL.

It would be cool if you could implement the various card options as URL query string params and not require a custom card at all in the ui-lovelace.yaml. For example:

http://my.ha:8123/?compact-custom-header&notification=true&menu=false

0 Likes

#14

The reason I made this into a card was so that it survives being navigated away from, restarts, etc as well as being easier to configure. The gist unfortunately didn’t play well with those things. I agree that it would be helpful, but I think something like mobile/touchscreen detection and separate views for those devices might be a better solution and I’m currently working on it.

0 Likes

#15

Can you guys help me out?

When I have one tab/page (id) it’s working, but when I add a second one it’s not working anymore.

So this works:

title: 'Dom'
views:
  - id: home
    icon: mdi:home
    title: 'Pomieszczenia'
    panel: true
    cards:
    - type: vertical-stack
      cards:
      - type: custom:layout-card
        cards:

      - type: custom:compact-custom-header
        voice: false
        clock: notification
        clock_format: 24

But this does not:

title: 'Dom'
views:
  - id: home
    icon: mdi:home
    title: 'Pomieszczenia'
    panel: true
    cards:
    - type: vertical-stack
      cards:
      - type: custom:layout-card
        cards:

      - type: custom:compact-custom-header
        voice: false
        clock: notification
        clock_format: 24

  - id: home2
    icon: mdi:home
    title: 'Pomieszczenia'
    panel: true
    cards:
    - type: vertical-stack
      cards:
      - type: custom:layout-card
        cards:

      - type: custom:compact-custom-header
        voice: false
        clock: notification
        clock_format: 24
0 Likes

#16

Not sure. Just created 2 tabs both with panel view, vertical-stack, and custom header as the last card and it works fine here. Did you try a full browser refresh / clear cache?

0 Likes

#17

Really strange, yes I did a clear browser refresh and also a clear cache. Can you post you sample code? Maybe it’s just me making a stupid mistake?

*one tab is still working after a browser refresh

0 Likes

#18

This is what I used to test, just copy pasted your code and replaced the card with forecast:

views:
  - id: home
    icon: mdi:home
    title: 'Pomieszczenia'
    panel: true
    cards:
    - type: vertical-stack
      cards:
      - type: weather-forecast
        entity: weather.yweather
      - type: custom:compact-custom-header
        voice: false
        clock: notification
        clock_format: 24
  - id: home2
    icon: mdi:home
    title: 'Pomieszczenia'
    panel: true
    cards:
    - type: vertical-stack
      cards:
      - type: weather-forecast
        entity: weather.yweather
      - type: custom:compact-custom-header
        voice: false
        clock: notification
        clock_format: 24
0 Likes

#19

:frowning: strange, it’s not working. Will try some more settings…

Well was just thinking…one tab is also not working as when there is only one tab it’s already compact :slight_smile: I also not see the clock in the right corner.

0 Likes

#20

This is great. Very valuable. I’d even say it should replace what we currently have. No reason for all that whitespace just to display the name.

Anyways, it would be great if this could be translated into a component that adds a second layer of views.

Example: I have 4 main views: Home, Sensors, Lighting, Network. Sensors has 2 views, indoor and outdoor. Lighting has N views, where each view is a room in the house.

2 Likes

#21

Not sure why you’re not seeing the clock now either, but you are right, I need to make an exception for only one tab.

0 Likes

#22

Got it working!! Deleted everything and started over. Not sure what happened but it’s working! Tnx for your quick replies!

Really nice :slight_smile:

1 Like