Request: add bottom padding to footer and remove chevrons

[ASNNetworks]

Thanks for your help again! I now have almost recreated what I had in CH.

CH version:

Card mod version (don't mind the colors)

Right now I need the icons to go a little higer, with bottom padding 30px and spread out to fit 6 icons and lose the chevrons, to it looks exactly like on CH. Is this possible? Thanks again!

I use this code btw:

  card-mod-root-yaml: |
    paper-tabs:
      $: |
        .not-visible {
          display: none;
        }
        #selectionBar {
          bottom: unset !important;
        }
    "ha-app-layout":
      $: |
        #contentContainer {
          padding-top: 0px !important;
        }
    .: |
      app-toolbar {
        display: none;
      }
      .edit-mode, app-header, app-toolbar {
        background-color: var(--ch-background) !important;
        color: var(--ch-all-tabs-color) !important;
      }
      app-header {
        top: calc(100vh - 48px) !important;
      }
      app-header.edit-mode {
        border-bottom: 2px var(--primary-color) solid;
        padding-bottom: 10px;
      }
      app-header[shadow] > ::before {
        box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.3);
      }
      #add-view ha-svg-icon {
        background-color: var(--primary-color) !important;
        color: #EEE !important;
        border-radius: 5px !important;
      }
      .edit-icon {
        color: var(--primary-color) !important;
      }
      mwc-icon-button[label="Start conversation"] {
        top: 0;
        right: calc(48px * 1);
        z-index: 2;
        position: absolute;
      }
      mwc-icon-button[title="Help"] {
        top: 0;
        right: calc(48px * 2);
        position: absolute;
        z-index: 2;
      }
      mwc-icon-button[title="Close"] {
        top: 0;
        left: 0;
        position: absolute;
        z-index: 2;
      }
      mwc-icon-button#add-view {
        position: fixed;
        right: calc(48px * 1);
      }
      ha-button-menu {
        top: 0;
        right: 0;
        z-index: 2;
        margin-left: 5px;
        position: absolute;
      }
      app-toolbar > [main-title] {
        display: none;
      }
      menu-button[style="visibility: hidden;"] {
        display: none;
      }
      ha-menu-button {
        z-index: 2;
        top: 24px;
      }
      paper-tabs {
        --paper-tabs-selection-bar-color: var(--text-color) !important;
        margin-left: 48px !important;
      }
      paper-tab[aria-selected="true"] > ha-icon {
        color: var(--text-color) !important;
      }
      paper-tab[aria-selected="true"] {
        color: var(--text-color) !important;
      }
      @media (orientation: portrait) {
        paper-tabs {
          margin-left: 64px !important;
          margin-right: 32px !important;
        }
        ch-header > paper-tabs,
        app-header.edit-mode > * > paper-tabs {
          margin-left: 10px !important;
          margin-right: 10px !important;
        }
      }
      ch-header > ha-button-menu {
        top: unset;
      }
      ch-header > paper-tabs,
      app-header.edit-mode > paper-tabs {
        margin-left: 0;
      }
      app-toolbar a {
        color: var(--primary-text-color) !important;
      }

[KTibow]

Do a reinstall, choose main as the version, and see how it goes.

[KTibow]

And what's a chevron again? 🤔

[ASNNetworks]

And what's a chevron again? 🤔

the little arrows at the sides when you have more than 5 icons.

Right now, the menu and option buttons (three stripes and three dot icons) are hidden, but the space is empty. Ideally the icons are spread across the width, showing 6 icons and losing the arrows (chevrons).

[KTibow]

Does the overflow menu, voice button, and sidebar button matter to you?

[ASNNetworks]

Does the overflow menu, voice button, and sidebar button matter to you?

No, I strictly want icons for the tabs on the header (footer in this case) :)

[KTibow]

Asking the community's feedback, might make one user angry by making another one happy: https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/109?u=ktibow

[ASNNetworks]

Asking the community's feedback, might make one user angry by making another one happy: https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/109?u=ktibow

I tested your change btw, It was higher but not enough. I changed it myself and have achieved the ideal height with this code:

      app-header {
        top: calc(100vh - 80px) !important;
      }

One thing now: since it's a compact header, the area below the padding is transparant. Is it possible to increase the height of the header, while also setting the tabs higher to achieve the same result as I showed with CH?

So the part below the footer needs te be filled in as well.

For reference, I used to have this code for CH that did this:

  tab_container_css: >-
    padding-bottom: 30px !important;

[KTibow]

You don't need to keep quoting me... Anyway looks like you haven't set var(--ch-background), so just set it back to primary-color. I'm commiting and making it further away again. A release should be out soon.

[ASNNetworks]

Sorry about quoting. I do have var(--ch-background) set though, that's why it's slighlty different then #000000 (my primary-color). Setting that back to primary-color, makes it all black, but still shows empty area underneath.

Thanks, I will try the new release. I really appreciate all your help and work.

[KTibow]

Resolved?

[ASNNetworks]

I still have the chevrons and the space below is still transparent (it is higher yes, but below is empty like in the screenshot). I don't see a new update, or am I misunderstanding you?

[KTibow]

Can you install the dark soft UI theme with HACS, modify the YAML, and see if there's any problems?

[ASNNetworks]

I tried that, gives the exact same result as my screenshot. Menu button is still visible, also area below the header is transparent. I don't understand why the menu button is still there as well, I uncommented the code like it says.

  # Header
  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*/
        }
    ha-button-menu$mwc-menu$mwc-menu-surface$: |
      .mdc-menu-surface {
        margin: 10px;
        box-shadow: var(--ha-card-box-shadow);
      }
    .: |
      app-toolbar {
        height: 0;
      }
      .edit-mode, app-header, app-toolbar {
        background-color: var(--ch-background) !important;
        color: var(--ch-all-tabs-color) !important;
      }
      app-header {
        top: calc(100vh - 72px) !important;
      }
      app-header.edit-mode {
        border-bottom: 2px var(--text-color) solid;
        padding-bottom: 10px;
      }
      app-header[shadow] > ::before {
        box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.3);
      }
      #add-view ha-svg-icon {
        background-color: var(--ch-background) !important;
        color: #EEE !important;
        border-radius: 5px !important;
      }
      .edit-icon {
        color: var(--ch-background) !important;
      }
      mwc-icon-button[label="Start conversation"] {
        top: 0;
        right: calc(48px * 1);
        z-index: 2;
        position: absolute;
      }
      mwc-icon-button[title="Help"] {
        top: 0;
        right: calc(48px * 2);
        position: absolute;
        z-index: 2;
      }
      mwc-icon-button[title="Close"] {
        top: 0;
        left: 0;
        position: absolute;
        z-index: 2;
      }
      mwc-icon-button#add-view {
        position: fixed;
        right: calc(48px * 1);
      }
      ha-button-menu {
        top: 0;
        right: 0;
        z-index: 2;
        margin-left: 5px;
        position: absolute;
        display: none;
      }
      app-toolbar > [main-title] {
        display: none;
      }
      menu-button[style="visibility: hidden;"] {
        display: none;
      }
      ha-menu-button {
        z-index: 2;
        top: 24px;
      }
      paper-tabs {
        --paper-tabs-selection-bar-color: var(--text-color) !important;
        margin-left: 48px !important;
      }
      app-toolbar:not(.edit-mode) > div > paper-tabs {
        margin-left: 6px !important;
      }
      paper-tab[aria-selected="true"] > ha-icon {
        color: var(--text-color) !important;
      }
      paper-tab[aria-selected="true"] {
        color: var(--text-color) !important;
      }
      @media (orientation: portrait) {
        paper-tabs {
          margin-left: 64px !important;
          margin-right: 32px !important;
        }
        ch-header > paper-tabs,
        app-header.edit-mode > * > paper-tabs {
          margin-left: 10px !important;
          margin-right: 10px !important;
        }
      }
      ch-header > ha-button-menu {
        top: unset;
      }
      ch-header > ha-menu-button,
      app-toolbar.edit-mode > ha-menu-button {
        top: unset;
        margin-left: unset;
      }
      ch-header > paper-tabs,
      app-header.edit-mode > paper-tabs {
        margin-left: 0;
      }
      app-toolbar a {
        color: var(--ch-all-tabs-color) !important;
      }

To clarify I have this setup (which works fine with your code) ch-background: '#141414' ch-all-tabs-color: "rgba(255, 255, 255, 0.30)"

[KTibow]

Can you check for updates? Also, what do you think about applying a box shadow to the header?

[ASNNetworks]

I updated and edited the theme. It's very close now! The menu button and options are gone :) There still is space below the header though, just like on your screenshot as well. I think this cannot be set, because it's a compact header that is moved up a little. I think the only solution is to increase the size of the header itself, while moving the app-toolbar up (not sure it that's even possible).

I like the shadow to the header, though the selection stripe kinda ruins the rounded edges of the box (on your screenshot)

Though the chevrons just don't seem to go away. I don't understand, cause on HA forum people use the code and it's gone.

[KTibow]

Do you mean making there be some padding below? I know it does, I can fix that with some padding. It's hard to find other community feedback for it though, last time I tried to find a hue with a poll nobody responded. The current code only hides invisible chevrons. If the header overflows, chevrons will be displayed anyway. I think having the ability to see all tabs is important.

[ASNNetworks]

Yes, I mean padding below the header, so it's like this:

Do you think it's at all possible to hide chevrons? I ask because I have button-cards represent rooms on my main tab as well (which go to hidden tabs, so that's why I don't need the chevrons).

[KTibow]

Sure, I guess that would work. Yeah, just change https://github.com/KTibow/lovelace-light-soft-ui-theme/blob/6a9e0258472587b1e88401e851f5afb0cd7ff0bb/theme.yaml#L265-L267 to

        paper-icon-button {
          display: none;
        }

[ASNNetworks]

Thanks! Do you know how to increase the padding below the header?

[KTibow]

Okay, still waiting until the percent for the overflow menu is not equal to 50% in the vote, but I'll go ahead.

[KTibow]

Try reinstall from main.

[ASNNetworks]

Tried re-installing, which gave me the same code. I copied the code from the github (saw it was changed). Tried that, but the header moves when scrolling. I think because position is set to absolue? Tried sticky, but that lost the padding at the bottom again.

[KTibow]

Try this patch:

-        bottom: 60px;
-        position: absolute;
+        transform: unset !important;

[KTibow]

Install from main again and see if that fixes it.

[ASNNetworks]

Tried the patch first, then replaced all Header code with new one too. Gives same result: the area below the header simply is empty again. I'm guessing it's just not possisble to recreate this.. ?

I did notice, that when leaving bottom: 60px (in my case 80px) there was a padding but the background was completely transparent. For now, maybe just close this since I think it will break more then do actually good having the padding.

[KTibow]

I thought that was what you wanted?

[ASNNetworks]

No? The whole point was to recreate that image above. That still has not worked unfortunately. Either the space below is empty (so you can actually see content under the footer when scrolling, which is what I keep trying to fix) or it’s completely transparent (you can see all content through the footer when scrolling).

Increasing the height of the header (as footer) only created empty space below it. What I want is to add a background there like on the image, to recreate what I had with CH as a footer.

[KTibow]

Oh, thought the screenshot was of the current thing. Can you show a screenshot of the card-mod version?

[ASNNetworks]

See area with green arrow. That needs to be the same color as the app-toolbar. So the app-toolbar needs to be bigger, to cover the entire area since it’s moved up.

[KTibow]

Oh, let me see....

[ASNNetworks]

One thing I also noticed with the footer. The content in lovelace doesn't actually respect the area of the footer. So when you have more content than the height of the view, you can't see the bottom when you scroll to the end. Part of lovelace remains behind the footer. I suppose I can add a gap-card after the last card on each view, but just wanted to let you know.

[stale[bot]]

This is getting 👴 old. I'm going to ❌ this soon, because there's no point in keeping something open that's probably ✔. Mind closing? Thank you! ♥ Beep boop, I'm just a 🤖 bot that makes @KTibow's job easier by closing old issues.

[ASNNetworks]

Hi, did you find the time to see if it's possible to add the paddings / fix the space below? If it's not possible, then I suppose there is no point in keeping this issue open.

[KTibow]

Sorry, kind of overloaded by notifications right now. The stale bot is just because it's hard for me to manually close issues, but I'll get back to this soon.

[KTibow]

Can you please sum up your problem again? Sorry about that, but this is a long thread and I'm having trouble keeping up.

[ASNNetworks]

Ofcourse and totally understandable, take your time.

So right now I have the header in compact mode and as a footer. That works. However, it’s too close to the bottom. So I requested you to add paddings so it’s higher. That works too, but gives a problem at the same time:

I believe: because it’s in compact mode and is setup to be higher, the area below the header (in footer mode) is empty. So when you scroll, you actually see and can control content below the area under it. You can see that in this screenshot, see the area with green arrow.

The second problem is that the last content actually stays at the bottom of the display, behind ánd under the header. So you also cannot reach the final card completely.

So what needs to be solved: the final card needs to be ABOVE header (not behind and under it) when reaching the end of the page. And the header (app-toolbar) needs to be bigger when in compact mode, so the area below it is actually filled.