Compact Custom Header

[Rikkie80]

Probably something stupid, but I cannot find why line breaks are at the wrong position (also after correction). They should be after each ‘;’… Result is that the tab icons only get the default color (white).

cch:
  conditional_styles:
    template:
      - tab:
          - '2':
              - icon: >
                  if (states["sensor.postnl_deliveries"].state <> 0)
                  "mdi:mailbox"; else "mdi:mailbox-up";
              - color: >
                  if (states["sensor.postnl_deliveries"].state <> 0) "#FFFFFF";
                  else "red";
      - tab:
          - alarm:
              - icon: >
                  var alarm = entity["alarm_control_panel.thuis_alarm"].state;
                  if (alarm == "disarmed") "mdi:shield-check"; if (alarm ==
                  "armed_away") "mdi:shield-lock"; if (alarm ==
                  "armed_custom_bypass") "mdi:security"; if (alarm ==
                  "armed_home") "mdi:shield-home"; if (alarm ==
                  "armed_night")"mdi:shield-home"; if (alarm == "pending")
                  "mdi:shield-outline"; if (alarm == "triggered")
                  "mdi:bell-alert"; "mdi:shield-check";
              - color: >
                  if (states["alarm_control_panel.thuis_alarm"].state ==
                  "disarmed") "#00FF00"; else "red";

I formatted like below but after saving, reloading and re-opening the text editor it is automatically changed to the format above.

cch:
  conditional_styles:
    template:
      - tab:
          - 2:
              - icon: >
                  if (states["sensor.postnl_deliveries"].state <> 0)  "mdi:mailbox";
                  else "mdi:mailbox-up";
              - color: >
                  if (states["sensor.postnl_deliveries"].state <> 0) "#FFFFFF";
                  else "red";
      - tab:
          - 'alarm':
              - icon: >
                  var alarm = entity["alarm_control_panel.thuis_alarm"].state;
                  if (alarm == "disarmed") "mdi:shield-check";
                  if (alarm == "armed_away") "mdi:shield-lock";
                  if (alarm == "armed_custom_bypass") "mdi:security";
                  if (alarm == "armed_home") "mdi:shield-home";
                  if (alarm == "armed_night") "mdi:shield-home";
                  if (alarm == "pending") "mdi:shield-outline";
                  if (alarm == "triggered") "mdi:bell-alert";
                  else "mdi:shield-check";
              - color: >
                  if (states["alarm_control_panel.thuis_alarm"].state == "disarmed") "#00FF00";
                  else "red";

[mayker (maykar (pronounced "maker" with a southern accent))]

The formatting is fine, when using storage mode those breaks are automatically added.

However, this is not valid JS:

@Rikkie80

if (states[“sensor.postnl_deliveries”].state <> 0)

Try this instead (if state does not equal zero):

if (states["sensor.postnl_deliveries"].state != 0)

Or if you’re not worried about negative numbers (state is greater than zero):

if (states["sensor.postnl_deliveries"].state > 0)

[mayker (maykar (pronounced "maker" with a southern accent))]

I’m not entirely sure what you’re after here. CCH does not change the layout of cards. You could just make 2 views for this. One formatted for desktop and one formatted for mobile. Then use CCH to hide the desktop view when on mobile and vice versa.

[Rikkie80]

Thanks! Corrected and now it works

[John_Gratis]

Just as a heads up, the url for exception config has changed. That is the updated one.

https://maykar.github.io/compact-custom-header/Exception-Config

[mayker (maykar (pronounced "maker" with a southern accent))]

Pre-Release 1.3.6

This one is marked as a pre-release (beta) as a fair bit has been changed or added, so I expect there may be some issues. If you use HACS you’ll need to “show beta” in order to see it. The readme has yet to be updated and none of the new features are in the editor yet, but the new features are explained below. I will update readme & editor on full release.

Added Features (explained in detail below):

• Mobile status bar customization.
• Added ability to use custom CSS to elements for advanced styling.
• Swipe groups feature: Define ranges that can be swiped through.
• swipe_skip_hidden: Automatically skip hidden tabs when swiping. Set to true or false, default true. This was previously always true.

Fixes for…

• default_tab: not working for some tabs.
• Menu item hiding (added localization)

I’ve also tweaked swipe animations, swipe navigation in general, and a few other things under the hood.

---

New Features in Detail:

Mobile Status Bar:

By default CCH will now match your mobile status bar color to the header background color, but this is also customizable. Use statusbar_color: "#fff" for example to make the status bar white.

Swipe Groups:

You can use ranges to define groups of tabs that are to be swiped. For example: using swipe_groups: "2 to 4, 6 to 8" will mean you can only swipe on tabs between 2-4 or 6-8 but not any other tab. Wrapping works within each group as well.

Custom CSS:

You can now add custom CSS for buttons, tabs, header, and view. This will solve a few feature requests without having to rely on separate features for each and allow for more customization.

Since this is directly editing the CSS of elements it could require a good bit of trial and error on the user’s part, not all elements will react the same or as expected.

The three new config options are header_css:, tab_css:, button_css:, and view_css:.
view_css: is the entire container under the header. It is mainly useful to adjust the padding between the header and view to account for any custom css to the header that changes it’s height.

Examples:

This screenshot was made using the code below it:

cch:
  tab_indicator_color: transparent
  background: black
  header_css: "border-bottom: 1px dashed pink;"
  view_css: "padding-top:63px;"
  button_css:
    menu: "margin-top: 17px; border-radius: 10px; padding-bottom: 20px; background: red; border: 1px dashed pink;"
    options: "margin-top: 129px; border-radius: 0 0 10px 10px; padding-bottom: 20px; background: red;border: 1px dashed pink;"
  tab_css:
    0: "margin-left:15px;"
    1: "border-right:1px dashed pink"

Add white line separator after tab 1:

cch:
  tab_css:
    1: 'border-right: 1px solid white;'

You could also use this to change the font of the clock:

cch:
  options: clock
  button_css:
    options: 'font-family: "Times New Roman", Times, serif;'

This one pairs nicely if you add fonts to lovelace.

[gabe565 (Gabe)]

Thanks for responding quickly to my Pull Request. Agreed that overall CSS customization is cleaner. The options are working great for me!

Quick question, though. Any reason that the CSS config is configured as a string instead of an object? I am just wondering if passing them in as an object and looping over each entry to set the styles could keep the removeStyles() less complicated.

Either way, I’m excited for the update!

[greengolfer]

Hello!
Thanks for this great tool!
I have a configuration issue with the default_tab, redirect and hide tab setup.
Here is an extract of my ui-lovelace.yaml:

cch:
    disable_sidebar: true
    compact_header: true
    clock_format: 24
    menu: hide
    notifications: hide
    voice: hide
    header: true
    chevrons: true
    notify_indicator_color: "#e80000"
    swipe: true
    swipe_wrap: false
    background: 'rgba(0,0,0,0.3)'
    default_tab: 'home'
    redirect: true
    kiosk_mode: false
    conditional_styles:
       template:
          - tab:
             'home':
               display: >
                   if (states["sensor.alarm"].state == "armed_away") "hide";
                   else "show";

HA: 0.97.2 on hassos 2.12
Same behaviour with firefox, safari and chrome on Mac and fully on Android.

On fully kiosk I use http://hassio:8123/lovelace and when my alarm if not in armed_away mode, the ‘move’ view is available in the header and is displayed.

In ‘armed_away’ mode, the tab is hidden (all good!) but if I try to access http://hassio:8123/lovelace I still end up on http://hassio:8123/lovelace/home

From the documentation I understand that I should be redirected on the next visible tab. However, it is not the case.
‘move’ tab is not in the header but still accessed as the default…

Am I doing something wrong?

Ideally, the default_tab should be templatable

The idea behind this setup is to hide all views except the one where the alarm can be disabled when the alarm is on.

Thanks,

GV

[mayker (maykar (pronounced "maker" with a southern accent))]

@gabe565

Any reason that the CSS config is configured as a string instead of an object?

To keep config a bit more manageable/clean and avoid a breaking change. The screenshot example in my post above is 11 lines, but if CSS config was an object it would be over twice as large at 27 lines.

It would probably make my life easier if it was an object, but I feel it’s a better user experience as is. If I had to do the whole thing over and not worry about breaking changes, I may have done it differently.

[mayker (maykar (pronounced "maker" with a southern accent))]

@greengolfer

Am I doing something wrong?

Nope, I am .

Default tab is currently ignoring redirects and I’ll change that soon, but I also like the idea of a template option.

[greengolfer]

@mayker

Nope, I am .

Nobody’s perfect!
I’ll wait for the fix.
GV

[iamhueman (Hue)]

Upgraded to the latest version of CCH last night using HACS.
The CCH settings work on my Admin user, disabled tabs to test and it works.

But when I add an exception for a user, nothing happens. User case-sensitive or not, still not working. Cleared Safari and Chrome browser caches, still not working. Browsers are on the most recent versions.
I tried it on four computers (3 Windows 10 and a Mac) still not working.

I deleted and re-created exception still not working for this user. Not sure what I’m doing wrong.

[mayker (maykar (pronounced "maker" with a southern accent))]

I need to start insisting that issues be posted to the GitHub page. 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.

Please, post the issue there and fill out as much of the template as you can:

https://github.com/maykar/compact-custom-header/issues/new/choose

This will be the post that I link to for issues posted in this thread moving forward. I have updated the first post to reflect this as well. This will make it much easier for me to track and fix issues. Thanks!

[raul]

Is there a simple way to link a custom panel_iframe to a header button instead of the sidebar?

[mayker (maykar (pronounced "maker" with a southern accent))]

Not with CCH, but there are multiple ways to make buttons in Lovelace that navigate to URLs (entity-button-card, the custom button-card, picture elements, etc).

Here’s a couple of posts about it. I imagine you could just replace the “view” urls with panel url

How to create a button linking to another HA tab (or view)?

I have searched around the forums here, but not been able to find out how to create a button that links to another view/tab of HA. I look forward to suggestions! Thanks, Tomas

Lovelace - buttons at first view path to other views

Is there a way to use buttons as links to other views. From here: You can link to one view from another view by its path. For this use cards that support navigation (navigation_path). Do not use special characters in paths. So there is an example on how to do this with pictures. However I tried that but my picure wasn’t clickable (nothing happened). Any advice? Do I have to restart ha for this?

[ludeeus]

Off-topic… sorry…

How about a view (in panel mode) with a single iframe card?

[mayker (maykar (pronounced "maker" with a southern accent))]

After your suggestion I wanted to play around a bit and was searching around as I couldn’t get it to fill to the full view height. Then I came across this post (looks like they’ve been down this road).

Panel: true w/ iframe card, how to span full height? SOLVED

I am trying to put a tab in my custom compact header for my music player. I am using this on a wall mounted tablet where the sidebar will be hidden so I would like it to be up top in the header. I have tried the following, but it does not auto adjust to the height in portrait views. Is there an easy way to make it always fill the vertical height. EDITED for solution. Requires card-mod title: Music panel: true cards: - type: iframe style: | #root { heigh…

If I figure something out I’ll let you know @raul

[raul]

@mayker thank you. That post is actually me as well. I’m going to continue playing with it myself, but I think it’s a limitation of the iframe card itself and how it sets the top padding.

[gabe565 (Gabe)]

@mayker

To keep config a bit more manageable/clean and avoid a breaking change. The screenshot example in my post above is 11 lines, but if CSS config was an object it would be over twice as large at 27 lines.

It would probably make my life easier if it was an object, but I feel it’s a better user experience as is.If I had to do the whole thing over and not worry about breaking changes, I may have done it differently.

Ah that makes sense. Didn’t realize there was currently a CSS config option you had to keep support for.

I’ve been using the beta and it’s been working great for me! Can’t wait for the release.

[raul]

That is what I tried already:post.

I cannot get the card to span the full height of the window reliably when it is resized. Looking at the card I do not think it will be possible without using card-mod or rewriting the card itself. iframe-card

Before I got too deep I checked here, since it doesn’t seem all that crazy for someone to want to link a sidebar item in the header and thought it might have been attempted already…