Compact Custom Header

Share your Projects! Dashboards & Frontend
1

:warning: :warning: :warning:

This project is now depreciated and it’s replacement is Custom Header

:warning: :warning: :warning:


Compact Custom Header

Customize the Home Assistant header and much more!

Features:

  • Compact design that removes header text.
  • Per user/device settings.
  • Style & hide anything in the header & the header itself.
  • Dynamically style header elements based on entity states/attributes.
  • Add swipe navigation to Lovelace for mobile devices.
  • Any button can be hidden, turned into clock with optional date, or placed in the options menu.
  • Hide tabs/buttons from user’s and devices.
  • Set a default/starting view.

Visit Github for installation, configuration, and troubleshooting.
Read through the troubleshooting guide before posting or making an issue on Github.

Issues

The best way to report issues/bugs is to open an issue on the Github page , this will make it much easier for me to track and fix them. Same goes for feature requests.

Issues posted in a forum thread are difficult to track/follow and by filling out the issue template I will get all the info I need.

Before:

After:

Conditional Styling Demo:

Buy Me A Coffee

48 Likes
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.

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:
6

Have you tried a full refresh after?

7

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

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.

10

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

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:

Screenshot_20181210-162230
Screenshot_20181210-1622301080×2280 215 KB

1 Like
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.

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

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.

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
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?

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

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
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.

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.

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