mayker
(maykar (pronounced "maker" with a southern accent))
1
This project is now depreciated and it’s replacement is Custom Header
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.
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.
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:
mayker
(maykar (pronounced "maker" with a southern accent))
6
Have you tried a full refresh after?
mayker
(maykar (pronounced "maker" with a southern accent))
7
Doesn’t look like it plays nice with panel view yet. Will look into it.
mayker
(maykar (pronounced "maker" with a southern accent))
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:
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:
mayker
(maykar (pronounced "maker" with a southern accent))
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.
mayker
(maykar (pronounced "maker" with a southern accent))
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?
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
mayker
(maykar (pronounced "maker" with a southern accent))
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.