🔹 Card-mod - Super-charge your themes!

ham26 · April 7, 2023, 4:00pm

Maybe I faced your same problem, adding this setting for the margin-top in div#view worked for me:

card-mod-theme: Google - Dark
  header-height: 70px
  card-mod-root-yaml: |
    ha-app-layout$: |
      #contentContainer {
        padding-top: 0px !important;
        padding-bottom: 70px !important;
      }
    ha-tabs$: |
      #tabsContainer {
        display: flex;
        justify-content: center;
      }
    .: |
      div#view{
        margin-top:0  !important;
      }
      .toolbar:not([class="edit-mode"]) ha-icon-button { 
        display: none; !important;
      }
      ha-tabs {
        height: var(--header-height);
        --paper-tabs-selection-bar-color: var(--primary-color) !important;
        color: var(--app-header-text-color) !important;
      }
      .header { 
        top: calc(100vh - 70px) !important;
        bottom: 0 !important;
        transform: unset !important;
      }

remmob · April 9, 2023, 9:30am

Since the latest update 2023.4.1 & 2
this seem not to working anymore, does some one have a solution for this?

  card-mod-root: |
    ha-app-layout {
      background: url('/local/Images/backgrounds/witbolstraat_blur.png');
      background-size: cover;
      margin-left: -10px;
    }

remmob · April 9, 2023, 1:11pm

I found the solution, ha-app-layout has changed into #view
Only looking if hui-view has changed.

boneheadfraggle · April 9, 2023, 2:30pm

Did you ever find a solution to this?

Previous to 2023.4, I used

      ha-dialog[data-domain="camera"] {
          --mdc-dialog-max-width: 87vw;
        }

      ha-dialog[data-domain="camera"] .content,
      ha-dialog[data-domain="camera"] ha-header-bar {
        width: auto;
      }

…but that doesn’t work now.

I think it is so bad UX to open the picture in a dialog which is just as small as the picture on the dashboard. Seems so unnecessary to click the header just to get a full screen picture. If I didn’t want full screen, why did I even bother to click the picture?

It seems to open fullscreen on mobile though?

ASNNetworks · April 9, 2023, 6:37pm

Quick headsup for anyone that wants to hide the header, but has been having problems with theme mods (like empty spaces, or spaces at the bottom suddenly) or Kiosk Mode module (like not playing nicely with sticky card-mod), Browser-mod has been updated as of yesterday and hiding header and sidebar works again. It has some quirks (like in the main menu) but hiding header now works great (also with sticky card-mod).

Posting it here since I had the issues myself (described above) and saw many others looking for solutions in here through card-mod themes, which didn’t work that nice in my setup.

skynet01 · April 10, 2023, 6:49am

Orrr… if you just need to hide the header and don’t need any of the other Browser-mod features you can just install this and be done with it

remmob · April 10, 2023, 7:00am

I had a double scroll bar. Had something todo with the top menu bar height.
latest kios-mode update to 1.8.2 fixes that.

ASNNetworks · April 10, 2023, 9:26am

Yes, like I stated pretty clearly in my message:

Using that will break any sticky element currently. Which is why I posted this, since I saw others (like myself) using sticky elements and having issues with hiding header.

Don’t know if the 1.8.2 version has fixed this by any chance, but that came out after browser_mod update.

BradAU · April 10, 2023, 9:55am

Since upgrading to the 2023.4 release I’ve made a few changes to my card-mod themes to get things working as before but the the one I still can’t firgure out is hiding scroll bars, previously having this worked.

 card-mod-root: |
    #view {
      min-height: 100vh !important;
      overflow: hidden;
    }

The min-height works but I still get a vertical scrollbar in Chrome on mobile which I didn’t before.

Any assistance would be appreciated.

remmob · April 10, 2023, 12:42pm

Are you using kiosk-mode, if so please update to 1.8.2

BradAU · April 10, 2023, 1:43pm

I’ve removed kiosk-mode, cleared the cache and restarted HA but the vertical scroll bars are still visible, they disappear once I scroll but they weren’t visible at all before the update.

remmob · April 10, 2023, 1:57pm

I had 2 scroll bars, one disappeared after updating kiosk to 1.8.2

0kk0 · April 10, 2023, 2:18pm

No i havent figured out a solution for this. Also its not really consistent, while some popups from cards have an attribute camara popup hasnt…

boneheadfraggle · April 10, 2023, 2:34pm

I ended up using subviews for each camera, which is so backwards and unnecessary, but it works ok with Kiosk-mode hiding header and sidebar. It is a bit slower though.

smccoy · April 10, 2023, 4:26pm

I had my header set to translucent prior to 2024.4, but it is no longer working even after modifying the code to add div#view. The background loads and the border width flag is working, but the header is still not transparent. Did something also change with hui-view?

card-mod-root: |
    hui-view {
      background: none !important;
    }
    ha-app-layout, div#view {
      background-position: center !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-image: url("/local/lovelace/background_19.png") !important;
      background-attachment: fixed !important;
        --ha-card-border-width: 0px;
    }

scstraus · April 10, 2023, 9:23pm

Hi all,
Since 2023.4, on mobile, I can no longer swipe to get the sidebar (I hid the button). Any ideas?

Also my chevron has popped up again, I was using the following, any ideas what the new property names are?

        paper-icon-button[icon="paper-tabs:chevron-right"] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-left"] {
          display: none;

kajmaj · April 11, 2023, 1:18pm

After last update to 2023.4.2 I am not able to renew navigation panel at the bottom (without the gap on the top) and hide “search” icon (quickbar launcher)
Regarding search button
This worked for me before 2023.4

     .: |
       app-toolbar > ha-icon-button {
          display: none; 
          }

Any advice from smarter ones than I am?

ASNNetworks · April 11, 2023, 1:33pm

Yes, this has been disabled and will be introduced later, was mentioned somewhere in the changes or this thread. I use a button-card myself to go to settings page, which then shows me the menu icon again.

Mariusthvdb · April 11, 2023, 1:38pm

you can test it (swipe the menu) running the beta app

scstraus · April 11, 2023, 7:43pm

Thanks. I just noticed that for some reason my app hadn’t updated. I looked in updates under app store and didn’t see it, had to go to the homeassistant app in app store and then it asked me if I wanted to update, and it fixed it…

Still can’t figure out how to kill the chevrons again though…