🔹 Card-mod - Super-charge your themes!

[KTibow (Kendell R)]

Sure. Can you help list out all of the features? Here’s a starting one:

• Update header on the bottom code, so it actually works

[scstraus]

All the features of custom header are listed here in the tabs “main config, buttons, tabs, exceptions config”.

Do you want me to put them into the cookbook or just list the ones I’ve found solutions for here in the thread?

[KTibow (Kendell R)]

All of the ones with the code should be added to the card-mod wiki.

[scstraus]

Okay, it’s 2am here so I will try to add some PR’s in the wiki’s cookbok starting tomorrow. Thanks again for all the help!

[odiv (Duta Ovidiu)]

Thank you @KTibow for your patience and your advices!
At the end I obtained the menu in the bottom!

[ASNNetworks]

What happens with the content if you scroll down on pages with content that exceeds the view? Does the bottom part stay behind the header, making it partly invisible/inaccessible?

Or does it sit above the header, regardless of how long page is?

[odiv (Duta Ovidiu)]

Everything is okay.
The bottom menu stay above the header.
I made 2 screenshots to see exactly.

[ASNNetworks]

That is great. I tried to re-create this (with the help of KTibow) but that kept coming back as an issue. Also, can you make the header higher/taller but keep the paddings? Perhaps this caused the issue I was having. The header was raised, but below it became empty and the cards were staying behind it.

Looked liked this whatever we tried back then:

Can you share your theme.yaml? I’m interested to try this again. I have my own solution now with an own bottom header by using sticky button cards, but it’s nice to have different alternatives to test!

[odiv (Duta Ovidiu)]

Sure, here it is…

  card-mod-theme: slate
  header-height: 0px
  card-mod-root-yaml: |
    ha-app-layout$: |
      #contentContainer {
        padding-top: 0 !important;
      }
    ha-tabs$: |
      #selectionBar {
        border-bottom: 0 !important; 
        height: 53px !important;
        border-block-start: 2px solid var(--paper-tabs-selection-bar-color, var(--paper-yellow-a100)) !important;
      }
    paper-tabs$: |
      /* Uncomment this for header on the bottom. You're 2/3 there. */
      #selectionBar {
        bottom: unset !important;
      }
    .: |
      /* This moves the header up. */
      app-header {
        transform: translate3d(0px, -48px, 0px);
        --header-height: 65px !important;
        
      }
      app-header.edit-mode {
        padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
        border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
      }
      app-toolbar.edit-mode {
        height: 0;
      }
      app-toolbar.edit-mode > mwc-icon-button {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
      app-toolbar.edit-mode > ha-button-menu {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
      }
      app-header.edit-mode > div {
        padding-left: 5px;
      }
      ha-tabs {
        height: var(--header-height);
        --paper-tabs-selection-bar-color: var(--button-card-background-color-on) !important;
        color: var(--app-header-text-color) !important;
      }
      paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
        color: var(--button-card-background-color-on) !important;
      }
      /* This hides the help button, menu button and title */
      a.menu-link[target="_blank"], ha-button-menu, [main-title] {
        display: none;
      }
      ha-menu-button {
        display: none !important;
      }
      paper-tab {
      padding-right: 10px !important;
      padding-left: 10px !important;
      }
      app-header {
        top: calc(100vh - 65px) !important;
        bottom: 0 !important;
        transform: unset !important;
      }

[ASNNetworks]

Thanks! Did you perhaps also find a way to hide certain tabs? I have 7 tabs, but only want to show 5 of them on the header. I couldn’t find a way to achieve that.

[odiv (Duta Ovidiu)]

I have only those tabs to show, the others are in a separate folder.

[Mariusthvdb (Marius)]

@KTibow

a) You can use the user variable in Jinja

how would that work? Ive tried it like this:

but I am not seen
or are you referring to Markdown card - Home Assistant ?

If this is a Markdown variable, can we then also use it in themes (and maybe elsewhere)?

[stban1983]

Hi there,
Is it possible to increase the size of the header bar icons ?

thanks

Is it possible to do that?

[KTibow (Kendell R)]

I’ll bookmark your post. In the meantime, could you not bump your own post?

[KTibow (Kendell R)]

How big do you want them?

[stban1983]

Whouhaa that’s a good question… I don’t know, I need to test.

[scstraus]

The hide_tabs functionality of Custom Header is now also standard in homeassistant with the visible: option found in the dashboard configuration of your lovelace dashboards.

This is one of a few edits that I have just made over at the theme cookbook to help other custom-header refugees with the examples that KTibow helped me with for my config. Check it out, maybe some of the other stuff I added there can be useful to you.

(@KTibow, please sanity check, I may have been too verbose or not accurate in some of my descriptions or examples because I worked backwards from what functionality I got rather than actually understanding everything in the way you do)

[scstraus]

@Mariusthvdb

how would that work? Ive tried it like this:

I’ve also provided the example of how to do that from my config in the theme cookbook

[ASNNetworks]

Is the visible option a new feature of HA 117? I’m still running HA 116.4.

Can’t update to HA117 till they have a revert/fix/solution of this markdown card issue.

[KTibow (Kendell R)]

This has been in there for a while, UI guide: