Request: hide header and show footer

[ASNNetworks]

I dug thourgh the theme.yaml, but I couldn’t figure out if this code was present. Basically, I want the header to be compact and as the footer. So nothing as header and only a compact footer.

Also, the tab selection ‘thingy’ needs to be at the top and the option to color active and inactive tabs. No chevrons either and bottom padding. Is this possible?

Picture for reference:

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.80. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[github-actions[bot]]

Hey! This is your first issue, so I just want to make sure you've read the docs and fourm thread. Thanks!

[KTibow]

It's possible. Putting this in my saved notifications.

[KTibow]

Config is a problem. Some people want it at the top, some at the bottom. Any config ideas? You could try to install some JS that adds on that CSS.

[ASNNetworks]

Config is a problem. Some people want it at the top, some at the bottom. Any config ideas? You could try to install some JS that adds on that CSS.

Honestly, for me just the code is enought since I have my own theme.yaml that I maintain :) Perhaps you can add the # in front in this theme so people can decide which one they want.

[KTibow]

Yahoo, release on the way! Close when ready.

[KTibow]

Refresh HACS by rebooting, or clicking HACS > Frontend > scroll to my theme > 3 dots > Update information > wait > click update

[ASNNetworks]

Refresh HACS by rebooting, or clicking HACS > Frontend > scroll to my theme > 3 dots > Update information > wait > click update

Awesome! Could you perhaps point me to the piece of code, so I can use that in other theme.yaml files?

[KTibow]

It's here: https://github.com/KTibow/lovelace-light-soft-ui-theme/blob/c100d1627ae8605e102ec72e9fb2ea95921347dd/theme.yaml#L261-L374

[ASNNetworks]

It's here: https://github.com/KTibow/lovelace-light-soft-ui-theme/blob/c100d1627ae8605e102ec72e9fb2ea95921347dd/theme.yaml#L261-L374

Thanks, I can't seem to get it to work. I have:

  card-mod-root-yaml: |
    paper-tabs:
      $: |
        .not-visible {
          display: none;
        }
        selectionBar {
          bottom: unset !important;
        }
    "ha-app-layout":
      $: |
        contentContainer {
          padding-top: 0px !important;
        }
    .: |
      app-toolbar {
        height: 0;
      } 

Did I mess it up with uncommenting? Tried multiple times, but I can't seem to get it to work. Btw I also have more-info styling. so the complete card mod setup in my theme.yaml is:

  card-mod-theme: night-footer
  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        -webkit-backdrop-filter: blur(17px);
        backdrop-filter: blur(17px);
        background: rgba(0,0,0,0.25);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        background: none !important;
        box-shadow: none;
        border-radius: 0px;
      }
    ha-header-bar:
      $: |
        .mdc-top-app-bar {
          background: none !important;
        }
  card-mod-root-yaml: |
    paper-tabs:
      $: |
        .not-visible {
          display: none;
        }
        selectionBar {
          bottom: unset !important;
        }
    "ha-app-layout":
      $: |
        contentContainer {
          padding-top: 0px !important; /*Change this to 0px if you want the header on the bottom*/
        }
    .: |
      app-toolbar {
        height: 0;
      }             

[KTibow]

Select all of it, not just the top part.

[KTibow]

Mind if I close?

[ASNNetworks]

Mind if I close?

I can't get it to work, but I suspect I have something else that prevents it. I can't even get the simple code to remove top part of header to work (https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook).

You can close this, since I probably have some other issues why this isn't working.

[KTibow]

Probably card-mod-theme, make sure it's correct, also make sure card-mod is installed, also try refreshing the page.

[ASNNetworks]

Probably card-mod-theme, make sure it's correct, also make sure card-mod is installed, also try refreshing the page.

Yeah, I already use card mod for quite some time. I already have it setup with more-info in my theme yaml. Refreshed lik 30x on different browsers. I guess I'll keep investigating. Just to confirm: this does work on HA 115 right, or do those codes only work on HA 116?

[KTibow]

Should be cross-compatible, just updated and seems to still work.

[ASNNetworks]

Should be cross-compatible, just updated and seems to still work.

I got it to work! I didn't realize I had to uninstall CH as well (I was trying to recreate it through card mod first before removing CH). I now have the footer working :)

Two things: is it possible to add padding to the footer (so it's a little higher)? Also, somehow I can't seem to delete the chevrons.

This is how it now looks:

I need the icons to go a little higher with a bottom padding of 30px and more spread out and lose the chevrons. Is that possible?

I wanted to re-open this issue, but not sure what is ideal.

[KTibow]

Just create a new issue.