Custom Header

Share your Projects! Dashboards & Frontend
1153

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.

1154

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

4 Likes
1155

Where to place the code

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

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

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
1158

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

1159

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

1160

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.

1161

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

1162

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
1163

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.

1164

Thanks @mayker I’ll check that out.

1165

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
1166

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?

1167

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
1168

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

1 Like
1169

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
1170

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;
    }
1171

But how to get dark mode?

1172

As mentioned earlier in this thread card-mod can help you get some of the missing CH features back as well as the fact that CH is still mostly working on 0.116. Check out card-mod’s theme cookbok for inspiration and working examples. Any discussion on card-mod will get you more feedback and answers when posed on its official thread.

There has also been a built in method for hiding tabs per user in HA for quite some time now. Find instructions here. At the top of that same page are instructions on how to hide an entire dashboard from non-admin users.

This project has been around for close to 2 years now, still can’t believe it’s been that long. I am having the mods close this thread, but wanted one last opportunity to say thanks for everything and I’ll see you all around.

Stats on this thread and the original CCH thread before closing:

Compact-Custom-Header thread:
cch

Custom-Header thread:
image

Thanks for the crazy ride! You can find the original farewell post here.

Edit: I’ve created a quick card-mod config for the classic Custom Header look.

35 Likes