🔹 Card-mod - Super-charge your themes!

KTibow · October 17, 2020, 1:45pm

I do not know where you got that code from.
Try this code: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook#compact-header

skank · October 17, 2020, 3:28pm

ok i copied that, but now the header is compact and at top again

atomicpapa · October 17, 2020, 3:35pm

Did you uncomment the line that moves it to the bottom?

skank · October 17, 2020, 3:37pm

Thats like this right?

card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }
      /*Uncomment this if you want the header on the bottom
      #selectionBar {
        bottom: unset !important;
      }
      */
    ha-app-layout$: |
      /* This corrects top padding for the view. */
      #contentContainer {
        /* Change this to 0px if you want the header on the bottom */
        padding-top: 48px !important;

into this:

card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }
      /*Uncomment this if you want the header on the bottom
      selectionBar {
        bottom: unset !important;
      }
      */
    ha-app-layout$: |
      /* This corrects top padding for the view. */
      #contentContainer {
        /* Change this to 0px if you want the header on the bottom */
        padding-top: 0px !important;

KTibow · October 17, 2020, 3:37pm

No, change the whole thing.

skank · October 17, 2020, 3:38pm

Sorry, but i dont understand

atomicpapa · October 17, 2020, 3:39pm

card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }
      /*Uncomment this if you want the header on the bottom */
      selectionBar {
        bottom: unset !important;
      }
    ha-app-layout$: |
      /* This corrects top padding for the view. */
      #contentContainer {
        /* Change this to 0px if you want the header on the bottom */
        padding-top: 0px !important;

skank · October 17, 2020, 3:42pm

Thats the same like i did right?

By uncomment , they mean ger rid of the #

KTibow · October 17, 2020, 3:42pm

Here’s the whole thing:

  # Header
  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }
      /*Uncomment this if you want the header on the bottom
      #selectionBar {
        bottom: unset !important;
      }
      */
    ha-app-layout$: |
      /* This corrects top padding for the view. */
      #contentContainer {
        /* Change this to 0px if you want the header on the bottom */
        padding-top: 48px !important;
      }
    ha-button-menu$mwc-menu$mwc-menu-surface$: |
      .mdc-menu-surface {
        margin: 10px;
        box-shadow: var(--ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
      }
    .: |
      /* This hides the unused portion of the header. */
      app-toolbar {
        height: 0;
      }
      /* This forces background-color and text-color. */
      .edit-mode, app-header, app-toolbar {
        background-color: var(--primary-background-color) !important;
        color: var(--primary-text-color) !important;
      }
      /* Uncomment this if you want the header on the bottom
      app-header {
        top: calc(100vh - 60px) !important;
        bottom: 0 !important;
        transform: unset !important;
      }
      hui-masonry-view {
        padding-bottom: 60px !important;
      }
      */
      /* This gives the header in edit mode a different look from the standard header. */
      app-header.edit-mode {
        border-bottom: 2px var(--primary-color) solid;
        padding-bottom: 10px;
      }
      /* Make the color of the plus white instead of black. */
      #add-view ha-svg-icon {
        color: #EEE !important;
      }
      /* Bring voice button back down */
      app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
        top: 0;
        right: calc(48px * 1);
        z-index: 2;
        position: absolute;
      }
      /* Bring help button back in */
      a[href="https://www.home-assistant.io/lovelace/"] > mwc-icon-button {
        right: calc(48px * 2);
        position: absolute;
        z-index: 2;
      }
      /* Bring close button back in */
      mwc-icon-button[title="Close"] {
        top: 0;
        left: 0;
        position: absolute;
        z-index: 2;
      }
      /* Bring add view button back in */
      mwc-icon-button#add-view {
        position: fixed;
        right: 48px;
      }
      /* Bring edit UI overflow menu back in */
      ha-button-menu {
        top: 0;
        right: 0;
        z-index: 2;
        position: absolute;
        /*Uncomment this out to hide the overflow menu
        display: none;
        */
      }
      /* Hide the title */
      app-toolbar > [main-title] {
        display: none;
      }
      /* Hide buttons that are taking up space, but invisible */
      menu-button[style="visibility: hidden;"] {
        display: none;
      }
      /* Bring sidebar button back in */
      ha-menu-button {
        z-index: 2;
        top: 24px;
      }
      /* Set margin on left to be smaller,
      and set the bar color to be the primary color
      instead of white */
      paper-tabs {
        --paper-tabs-selection-bar-color: var(--primary-color) !important;
        margin-left: 48px !important;
      }
      /* When not in edit mode, shrink the left margin */
      app-toolbar:not(.edit-mode) > div > paper-tabs {
        margin-left: 6px !important;
      }
      /* Color selected tabs */
      paper-tab[aria-selected="true"] > ha-icon {
        color: var(--primary-color) !important;
      }
      paper-tab[aria-selected="true"] {
        color: var(--primary-color) !important;
      }
      /* Styles for mobile */
      @media (orientation: portrait) {
        /* Hide sidebar button and keep room for the overflow menu button */
        paper-tabs {
          margin-left: 5px !important;
          margin-right: 48px !important;
        }
        /* Hide voice button */
        mwc-icon-button[label="Start conversation"] {
          display: none !important;
        }
        /* Hide sidebar button */
        ha-menu-button {
          display: none !important;
        }
      }
      /* Make help button have contrast */
      app-toolbar a {
        color: var(--primary-text-color) !important;
      }
  # Badges and columns
  card-mod-view-yaml: |
    hui-masonry-view$: |
      /*Uncomment this if you want the header on the bottom
      mwc-fab[title="Add Card"] {
        bottom: 96px !important;
      }
      */

Also I just realized someone might’ve modded maykar’s theme, or used an old version of mine.

skank · October 17, 2020, 3:56pm

its still not at the bottom, been trying for days to get what i want but i dont understand parts of the code
kTibow, if i copy exact your code, will it be at the bottom?

Nobody can share there minimum code, just to get it to the bototom

KTibow · October 17, 2020, 3:57pm

It’s hard to make it be at the bottom without making it be compact. It should be at the bottom.

skank · October 17, 2020, 3:59pm

I copied your code now, its not at the bottom, its at the top

KTibow · October 17, 2020, 4:00pm

Follow the instructions in the comments. If it says “uncomment this”, remove the whole line of text, not just the comment part.

skank · October 17, 2020, 4:01pm

Can you please share a code that is already uncommented?
I’m not sure what the get rid of
So i have a code that does put it to the bottom?

KTibow · October 17, 2020, 4:04pm

Are you using a translator? Anyway, I’ll help you just because, even though it’s a small task:

compact-header:
  card-mod-theme: compact-header
  # Header
  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }
      #selectionBar {
        bottom: unset !important;
      }
    ha-app-layout$: |
      /* This corrects top padding for the view. */
      #contentContainer {
        /* Change this to 0px if you want the header on the bottom */
        padding-top: 0px !important;
      }
    ha-button-menu$mwc-menu$mwc-menu-surface$: |
      .mdc-menu-surface {
        margin: 10px;
        box-shadow: var(--ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
      }
    .: |
      /* This hides the unused portion of the header. */
      app-toolbar {
        height: 0;
      }
      /* This forces background-color and text-color. */
      .edit-mode, app-header, app-toolbar {
        background-color: var(--primary-background-color) !important;
        color: var(--primary-text-color) !important;
      }
      app-header {
        top: calc(100vh - 60px) !important;
        bottom: 0 !important;
        transform: unset !important;
      }
      hui-masonry-view {
        padding-bottom: 60px !important;
      }
      /* This gives the header in edit mode a different look from the standard header. */
      app-header.edit-mode {
        border-bottom: 2px var(--primary-color) solid;
        padding-bottom: 10px;
      }
      /* Make the color of the plus white instead of black. */
      #add-view ha-svg-icon {
        color: #EEE !important;
      }
      /* Bring voice button back down */
      app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
        top: 0;
        right: calc(48px * 1);
        z-index: 2;
        position: absolute;
      }
      /* Bring help button back in */
      a[href="https://www.home-assistant.io/lovelace/"] > mwc-icon-button {
        right: calc(48px * 2);
        position: absolute;
        z-index: 2;
      }
      /* Bring close button back in */
      mwc-icon-button[title="Close"] {
        top: 0;
        left: 0;
        position: absolute;
        z-index: 2;
      }
      /* Bring add view button back in */
      mwc-icon-button#add-view {
        position: fixed;
        right: 48px;
      }
      /* Bring edit UI overflow menu back in */
      ha-button-menu {
        top: 0;
        right: 0;
        z-index: 2;
        position: absolute;
        /*Uncomment this out to hide the overflow menu
        display: none;
        */
      }
      /* Hide the title */
      app-toolbar > [main-title] {
        display: none;
      }
      /* Hide buttons that are taking up space, but invisible */
      menu-button[style="visibility: hidden;"] {
        display: none;
      }
      /* Bring sidebar button back in */
      ha-menu-button {
        z-index: 2;
        top: 24px;
      }
      /* Set margin on left to be smaller,
      and set the bar color to be the primary color
      instead of white */
      paper-tabs {
        --paper-tabs-selection-bar-color: var(--primary-color) !important;
        margin-left: 48px !important;
      }
      /* When not in edit mode, shrink the left margin */
      app-toolbar:not(.edit-mode) > div > paper-tabs {
        margin-left: 6px !important;
      }
      /* Color selected tabs */
      paper-tab[aria-selected="true"] > ha-icon {
        color: var(--primary-color) !important;
      }
      paper-tab[aria-selected="true"] {
        color: var(--primary-color) !important;
      }
      /* Styles for mobile */
      @media (orientation: portrait) {
        /* Hide sidebar button and keep room for the overflow menu button */
        paper-tabs {
          margin-left: 5px !important;
          margin-right: 48px !important;
        }
        /* Hide voice button */
        mwc-icon-button[label="Start conversation"] {
          display: none !important;
        }
        /* Hide sidebar button */
        ha-menu-button {
          display: none !important;
        }
      }
      /* Make help button have contrast */
      app-toolbar a {
        color: var(--primary-text-color) !important;
      }
  card-mod-view-yaml: |
    hui-masonry-view$: |
      mwc-fab[title="Add Card"] {
        bottom: 96px !important;
      }

Hope this works…

skank · October 17, 2020, 4:14pm

ok its at the bottom, thank you for that, but its not good yet
some stuff on my phone, is hidden behind the bottom header

I want to hide 2 tabs from that header too

and the top header should be visible so i can add messages in there

Sorry i keep asking help, but CH was so much easier
and yes i used a translator, which said to get rid of the # but that wasnt enough

KTibow · October 17, 2020, 4:24pm

Can you send a screenshot? You can already hide tabs based on users:

Can you give an example of what kind of messages you want?

skank · October 17, 2020, 4:34pm

When i hide the tab from users, they wont be visible anymore, i just dont want them to show in the header… they do have to able to be reached

For the messages, with CH i had the space to show following messages:

Current Temperature
When washing machine is ready
Welcome messages

It was using a vertical marquee

KTibow · October 17, 2020, 4:41pm

What should be the toggle between being hidden and unhidden?

I can try to whip something up to keep the header not compact but at the bottom.

Yes, having the header at the bottom without it being compact is a good idea
No, having the header at the bottom without it being compact isn’t a good idea

0 voters

atomicpapa · October 17, 2020, 6:13pm

Hiding them as @KTibow mentions using Visability only hides them in the header. They are still reachable. For example, I have views for my Roku remotes. I hide the tab (at the top in my case) but a long press on a button setup for on/off of the TV will take me to the remote.