Compact Custom Header

Customize the Home Assistant header and much more!

1.1.0 Breaking changes:

• CCH is no longer required to be a card and only needs added as a resource.
• Configuration happens at the root of your lovelace config in cch: (see links below).
• The UI editor can now be found in the options menu after selecting "Configure UI".

I've made a quick guide for the upgrade process and updated the docs quite a bit and they can now accept PR's, so please contribute if anything is unclear or missing.

See the Docs for installation and configuration.

Follow the troubleshooting guide before submitting issues here or on the forums.

Features:

• Compact design that removes header text.
• Per user/device settings.
• Hide tabs/buttons from user's and devices.
• Style & hide anything in the header & the header itself.
• Dynamically style header elements based on entity states/attributes.
• Add swipe navigation to Lovelace for mobile devices.
• Any button can be hidden, turned into clock with optional date, or placed in the options menu.
• Set a default/starting view.

Before:

After:

Conditional Styling Demo:

Important Notes

• Hiding the header or the options button will remove your ability to edit from the UI.
• You can disable CCH by adding "?disable_cch" to the end of your URL.
• After using the raw config editor you will need to refresh the page to restore CCH.
• While in edit mode select "Show All Tabs" in the options menu to display hidden tabs.

This card requires type: module. More info in the installation instructions

resources:
  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
    type: module