Custom Header

While using ?disable_ch open your raw config editor (top right button, configure ui, then top right again, raw config editor) and remove kiosk_mode: true from the custom_header: config

I had never used the raw config editor. Now I understand. Thanks!

yes, that is possible:

    card:
      - background: var(--primary-color)
      - opacity: >
          [[[ return variables.view == variables.path
              ? '0.7' : '1';
          ]]]

though unfortunately that also causes the icon to go transparent.
not all of the filters are available as property (brightness nor contrast)… and the RGBA() method doesnt work on the variables, though this suggests otherwise https://github.com/home-assistant/frontend/blob/d392695ab75ab48461cbfe42ba56ec1f0ccd5d8b/src/resources/styles.ts#L11

cant get it to work though…
wait!:

    card:
      - background:  >
          [[[ return variables.view == variables.path
              ? 'rgba(var(--rgb-primary-color), 0.6)' : 'rgba(var(--rgb-primary-color),1)';
          ]]]

creates this:

or in a darker theme:

which seems to be just what I was looking for. cool. Thanks for helping me on the right track!

well, not sure about this one, neither variant succeeds:

  home_summary: >-
    {% if states('sensor.hubs_badge') > '0' or states('sensor.status_badge') > '0' %} red
    {% else %} green
    {% endif %}

or

    {{'red' if states('sensor.hubs_badge') > '0'
    or states('sensor.status_badge') > '0'
    else 'green'}}

seems to ‘read’ the space after the ‘or’ and create ‘orn’… how should I write this please?

Hmm, not sure what’s going on there. Both of your examples are working for me just fine (straight copy and paste from your post). Will look into it more when I get a chance as I’ve only check in storage mode.

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:
Jul-10-2020 13-52-33

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.

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

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

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:

  1. create multiple tabs ahead distributed by areas - let’s say light, climate, etc.
  2. each tab contain one auto-entities card that collects - based on the filter setting - relevant entities
  3. 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. :slight_smile:

@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

2 Likes

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

1 Like

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.

1 Like

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.

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.

1 Like

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?

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.

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

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?

This is the answer I got from Thomas Loven:

I never tried it though.

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.

3 Likes