Custom Header

:sob:
I completely understand your decision. We’re in a very very delicate transition state of HA at the moment.
A lot of bad coding is being exposed everywhere, and tough (and sometimes wrong, IMHO) decisions are being made, which has to be made.
The benefit is of course that the code will get cleaner, but at the same time we currently loose a LOT of good functions, and some will not come back.
I completely agree that it’s important to keep it clean, and when people learn to code, they make strange things, until they learn ‘the right’ way of doing it.

What I’m going to loose:

  • A lot of real estate in the Android app (it’s REALLY poorly optimized, menu, header, chevrons etc.).
  • Sleak interface on my wallpanel tablet.

Very sad, and I hope that these things will be taken up in the GUI development soon.
Maybe you could be the next hire for nabu_casa and work on that part :smiley:

@tom_l Dangerous is an odd definition, what is dangerous, and for whome? with the current almost complete lack of ACL in the interface, everything is dangerous, and nothing is if people know what they do and the world is a perfect place. But I still consider it a necessity to have this enhanced in the GUI, it won’t solve it, as entities also needs ACL for it to be really usefull (so that my son can’t turn on/off the light on my daughters room or something like that). For now I have visibility of tab’s are turned on/off, which has nothing to do with security, but merely simplifies the interface for the different people in the household.

1 Like

Ah, thank you. That was not an option the last time I looked.

Too bad, but totally understandable. Thank you for all your work.

Hopefully HA core will implement at least hiding header and allowing a footer (like 99,99% of apps work with changing tabs). Or a dev will create a PR with only the basics like CH once was.

I went this route to regain a compact header. Works great!

4 Likes

Where to place the code

no-header:
  card-mod-theme: no-header

  card-mod-root: |
    app-toolbar {
      display: none;
    }

After card-mod is installed,

In your theme, place…

( your existing theme name: )


  card-mod-theme: your existing theme name
  card-mod-root: |
    app-toolbar {
      display: none;
    }
4 Likes

/config/themes/yourname/yourname.yaml ???

Thanks for your work on this. I will miss it.

Thank you for all your hard work. I loved this and it was one of those things that worked so perfectly to make my HA experience great that I take it for granted. Will be said that these features will be gone. Like many others here, hoping most of these features make into HA itself.

@mayker Thanks very much for all your work on this, it makes such a huge difference to the UI’s we can create even if only used to hide the header or have kiosk mode.
I appreciate there are lots of awesome features in custom header, but like many others have noted I only use it to hide the header and use kiosk mode for some users, so hopefully someone can make something just for those things.
Thanks again and I look forward to seeing what you create in HA moving forward.

For everyone looking for a new way to get a compact mode, kiosk mode, hiding header, etc. Along with many other things, card-mod can do that.

Check out the wiki’s theme cookbook. It’s recently been updated since I archived CH and more things keep being added. Almost everything that CH could do card-mod can do for you, with a bit of extra work. Configs are easily shared so be sure to check out what folks are doing with it.

13 Likes

Thank you so much for all the hard work you’ve put in creating, maintaining, and providing support for CH. I appreciate all you do for the community. Thanks for pointing us to card mod, I will see what I can do with it.

Thanks @mayker I’ll check that out.

Thank you for the heads up on this. I have been flip flipping between appreciation for all of your hard work that saved me from a lot of hard work and hating you for making me have to rewrite a lot of lovelace dashboards :joy::joy::joy:. I think I am heading off to look into card mod’s theming stuff now.

3 Likes

I’ve looked at the card-mod theme stuff and have reduced the header size using this;

no-header:
  card-mod-theme: no-header
  card-mod-root: |
    app-toolbar {
      display: none;
    }

This is a good start but still leaves the header bar with all the view buttons and chevrons, does anyone know what needs to be added to hide the header completely?

To hide the complete header even when views are there:

  card-mod-theme: night
  card-mod-root: |
    app-header {
      display: none;
    }

In order to get back control, simply change the theme :slight_smile:
But, when hided the sidebar as well, then… :slight_smile: :joy:
PS: app-toolbar is not nessecary. Modified this.

3 Likes

Works a treat! Thanks @Pirol62. I’ll work on hiding the sidebar next :rofl:

1 Like

Nice to see we have solutions for certain CH options so quick with card mod. Is it possible to have the footer option through card mod? I use the tabs at the bottom like 99% of iOS apps work, which works a lot better on mobile.

1 Like

Can you say where this goes if I’m using the default theme?

edit:
Just create a theme file named default.yaml…

default:
  card-mod-theme: default
  card-mod-root: |
    app-toolbar {
      display: none;
    }

But how to get dark mode?