Custom Header

Mariusthvdb · July 10, 2020, 11:50am

must have been something odd, since it works now… was a bit peculiar, because because of the error, the full CH didn’t load, not only the one tab_color.

since we’re on the topic of customizing the CH tabs, can we do this too:

using this code in my button card menu bar:

        state:
          - operator: template
            value: >
              [[[ return (states['sensor.count_alerts_notifying'].state > 0) ]]]
            spin: true

and

          card:
            - animation: >
                [[[ return (states['sensor.hubs_badge'].state > 0 ||
                          states['sensor.status_badge'].state > 0)
                    ? 'blink 2s ease infinite' :'none';
                ]]]

would be a nice enhancement… that is, if not already possible using the css properties.

ASNNetworks · July 11, 2020, 7:52pm

So I’ve noticed something a long time ago, but didn’t get around to test if. I (user1) noticed that if you have a card hidden, but accessible (so hidden_tab_redirect: false) the view scrolls to the top randomly. I have created two special tabs that I access via a button card (made rooms on my homescreen as buttons). I don’t want those to tabs on the bottom visible, so I have hidden them from my user and set hidden_tab_redirect: false.

I initially thought I had some custom cards that caused this. I removed the codes that could have caused it, but the issue remained. Now I have made those rooms visible to see if it’s due to Custom Header and it looks like it is. When they’re not hidden, they don’t scroll to the top randomly (like al other tabs) Is this a bug or am I doing someting wrong? This is my Custom Header configuration:

custom_header:
  hidden_tab_redirect: false
  chevrons: false
  compact_mode: true
  footer_mode: true 
  split_mode: false
  exceptions:
    - conditions:
        user: user1
        device_id: 1140f2a9-f13b5785
      config:
        show_tabs: '0,1,2,3,4,5'
    - conditions:
        user: user2
        user_agent: Mobile
      config:
        show_tabs: '0,1,2,3,4,6'
        disable_sidebar: true
    - conditions:
        user_agent: Smartphone PC
      config:
        show_tabs: '0,1,2,3,4,5'
        disable_sidebar: true        
  all_tabs_css: 'width: calc(16.8vw - 3.6px) !important; padding: 0px !important;'
  header_css: >-
    padding-bottom: 0px !important; padding-left: 0px !important;
    padding-right: 0px !important; padding-top: 0px !important; padding: 0px;
  tab_container_css: >-
    padding-bottom: 30px !important;
  stack_css: >-
    padding: 0px !important;
  hide_config: true
  indicator_top: true
  menu_dropdown: true
  options_hide: true
  reverse_button_direction: true
  hide_help: true
  hide_unused: true
  menu_hide: true
  shadow: false
  voice_hide: true

mikehaguy · July 12, 2020, 12:56am

is it possible to completely hide the header normally but be able to access the tabs to open other views? I want all the screen space that my small tablet has but i dont want to lose the ability to have multiple dashboard views.

if its not possible would be nice if there was a way to swipe from the side to pick a different view instead of a sidebar as an option

Langh_Tamas · July 12, 2020, 7:48am

I am just wondering whether the following proposal is possible or not.

I would intend to combine customer header tab hidder function and auto-entities card in the following way:

create multiple tabs ahead distributed by areas - let’s say light, climate, etc.
each tab contain one auto-entities card that collects - based on the filter setting - relevant entities
if there is no entity based on the filter aka the card is actually empty, hid the tab as well and only show if a new matching entity will appear

Of course I am open for any other suggestion to reach my goal. Feel free to share your view.

mayker · July 13, 2020, 2:37pm

@ASNNetworks Looking into it

@mikehaguy hide_header: true will hide the header and keep the sidebar. If you use the always hide sidebar option in HA (or if the screen width is small enough) then you would just swipe in the sidebar from the left, otherwise the sidebar is visible and you are able to navigate to other dashboards.

@Langh_Tamas Use a Jinja template in hide_tabs to match the auto-entity card’s condition

Langh_Tamas · July 14, 2020, 11:58am

Many thanks @mayker actually I have checked the ‘hidden_tabs’ function in your documentation but somehow was not connected with jinja2 template part. Now I use the following jinja template (ignore th name of the tab it is hungarian):

hide_tabs: >-
    {% if states|selectattr('domain', 'in', 'cover') |
    map(attribute='entity_id') | join(', ')|length < 1 %} arnyekolok {% endif %}

I am open for any better/more developer flavored solution from the community

mayker · July 14, 2020, 2:18pm

That’s a much more creative and clean solution than what I would have come up with. Sorry for the vague answer, but you didn’t share the conditions that you were working with and I was quickly replying on mobile.

mikehaguy · July 14, 2020, 7:56pm

Unless I made a mistake in my testing, hide_header: true will hide it all including the tabs to access the different views. I have “always hide the sidebar” turned on in the profile in HA as well but when I swipe the sidebar from the left, I only get the sidebar but not the view tabs for the current dashboard.

Should I be seeing the view tabs when i swipe from the left with hide_header: true? If so maybe i am doing something wrong somewhere.

mayker · July 14, 2020, 8:19pm

Nope, I thought that’s what you were after since you mentioned “dashboard views”, but now I understand what you’re looking for. No there is no slide out feature or anything like that with Custom Header, I’ll consider adding something like that though. Something else you could try in the mean time: make an input boolean that turns off/on kiosk_mode with a template and add that to every view.

Vetsus · July 15, 2020, 4:22pm

i was testing out options and clicked the toggle to hide the option button (the 3 dots in the upper right corner) and… now i can’t make lovelace changes? how do i reverse this?

mayker · July 15, 2020, 9:26pm

As mentioned in the first post here on the forums, warning on the github readme, warning in the docs, important notes in the docs, warning in the editor, etc, etc… just add ?disable_ch to the end of your URL.

There is currently a bug preventing CH’s editor from showing up in the menu when CH is disabled, so if you’ve never used the “Raw Config Editor” you can find it by going to the 3 dots menu in the top right, click “configure ui”, then click the top right button again, and hit “raw config editor”. You can then find custom_header: in your config and remove options_hide: true.

Vetsus · July 15, 2020, 9:57pm

i figured it would be something a little more complicated. luckily i have the automated backups setup frequently so i just reloaded a snap and got back up and running

Jokerigno · July 16, 2020, 11:42am

Hi everyone, does anyone know how you can make a default dashboard for all mobile devices? I saw that through the HA interface you can do it but you have to do it “manually” on each device. Custom Header instead from what I know allows you to hide tabs for example based on the user agent, but I have not found anything for the choice of the dashboard. Has anyone managed it?

tom_l · July 16, 2020, 12:29pm

This is the answer I got from Thomas Loven:

I never tried it though.

mayker · July 16, 2020, 12:31pm

CH doesn’t have a dashboard redirect feature yet, there is already a feature request for it on GitHub and I’ll be working on it when I get a chance.

Jokerigno · July 16, 2020, 3:18pm

great to know. Will manage this manually until CH will be able to do it

audenbuch · July 20, 2020, 7:48pm

hi, i solved this by editing the lovelace file in (/usr/share/hassio/homeassistant/.storage)

mayker · July 20, 2020, 11:37pm

Not only is editing anything in .storage dangerous it is also unnecessary. I have already replied with the solution (I’m guessing you were replying to that post, but this is asked MANY times here and on github). CH has an easy way to disable itself and it is mentioned as the first warning everywhere CH is posted.

Vincenzo-8 · July 26, 2020, 10:25pm

hi, i need help. I installed Custom-Header and I don’t know what I touched and the top bar is completely gone, I just wanted to change it. If I uninstall it reappears but as soon as I install custom header it disappears again. Is there a way to go back to edit it?

mayker · July 27, 2020, 12:28am