🔹 Card-mod - Super-charge your themes!

Share your Projects! Themes
85

Hi, hiding the header and some other stuff works.
But I would like to keep the editing mode even when the header is unvisible.
There is a compact-header example in the theme coockbook.
But when I add that code, the header doesn’t disappear.
the card_mod part is at the bottom:

vintage:
  card-mod-theme: vintage
  turmeric-color: "#DEB853"
  light-turmeric-color: "#E2D9A2"
  slate-color: "#0A373A"
  light-slate-color: "#789F8A"
  maroon-color: "#862715"
  white-color: "#FFFFCC"
  primary-font-family: "Lucida Console"
  paper-listbox-background-color: "var(--turmeric-color)"
  light-primary-color: "var(--light-turmeric-color)"
  paper-item-selected_-_background-color: "var(--light-turmeric-color)"
  paper-grey-200: "var(--light-turmeric-color)"
  divider-color: "var(--light-turmeric-color)"
  primary-background-color: "var(--light-turmeric-color)"
  secondary-background-color: "var(--light-turmeric-color)"
  paper-slider-secondary-color: "var(--light-turmeric-color)"
  paper-toggle-button-checked-bar-color: "var(--light-turmeric-color)"
  primary-color: "var(--slate-color)"
  paper-grey-50: "var(--slate-color)"
  primary-text-color: "var(--slate-color)"
  secondary-text-color: "var(--slate-color)"
  paper-item-icon-color: "var(--slate-color)"
  label-badge-text-color: "var(--slate-color)"
  paper-item-icon_-_color: "var(--slate-color)"
  paper-slider-knob-color: "var(--slate-color)"
  paper-slider-knob-start-color: "var(--slate-color)"
  paper-slider-pin-color: "var(--slate-color)"
  paper-toggle-button-checked-button-color: "var(--maroon-color)"
  paper-toggle-button-unchecked-bar-color: "var(--slate-color)"
  paper-card-header-color: "var(--slate-color)"
  disabled-text-color: "var(--light-slate-color)"
  ha-card-background-color: "var(--light-slate-color)"
  label-badge-background-color: "var(--light-slate-color)"
  dark-primary-color: "var(--maroon-color)"
  paper-listbox-color: "var(--maroon-color)"
  paper-item-icon-active-color: "var(--maroon-color)"
  label-badge-red: "var(--maroon-color)"
  paper-slider-active-color: "var(--maroon-color)"
  paper-toggle-button-checked-ink-color: "var(--maroon-color)"
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  card-mod-root: |
  paper-tabs:
    $: |
      .not-visible {
        display: none;
      }
  "ha-app-layout":
    $: |
      #contentContainer {
        padding-top: 70px;
      }
  .: |
    app-toolbar {
      height: 0;
    }
    .edit-mode, app-header, app-toolbar {
      background-color: var(--primary-background-color) !important;
      color: var(--primary-text-color) !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(--primary-color) !important;
      margin-left: 48px !important;
    }
    paper-tab[aria-selected="true"] > ha-icon {
      color: var(--primary-color) !important;
    }
    paper-tab[aria-selected="true"] {
      color: var(--primary-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;
    }
````
86

Thank you very much, that has helped (I had forgotten the -yaml)
I still have a long way to go to be able to leave it as it was with the custom header but it is a great step.
Greetings

87

It’s not supposed to hide the header, it just makes it 1/2 of the height.

88

Hi, yes I know. It shrinks the header. But it would be great, to keep the editor-dots available.
For that, the button have to be moved down to the views frame.
And I guessed, that this sequence provides it. But for some reason, it doesn’t work.
Is there anything to modify?

89

What do you mean? Can you send a screenshot?

90

Nice to see we have solutions for certain CH options so quick with card mod. Is it possible to have the footer option through card mod? I use the tabs at the bottom like 99% of iOS apps work, which works a lot better on mobile.

91

I’m the developer of this option, which is in my theme:


If you want this option, consider opening an issue over there. It lets me keep track of feature requests.
2 Likes
92

Ran into the same thing. The last example in the cookbook does this.

93

I have a really dumb question but I can’t get the header to hide. I have this is my clear-dark.yaml file:

clear-dark:
  #Hide the massive header
  card-mod-theme: clear-dark
  card-mod-root: |
    app-toolbar {
      display: none;
    }

However the header is still massive:

image

I confirmed that is the theme I’m using and flushed out my browser cache. Is there something I’m missing here?

94

I’m using this to replace functionality found in Custom Header.
I previously used the Default theme with dark-mode enabled, as I wanted the Map and icons rendered on it to be in dark-mode. I haven’t found a theme that does this.

Is there possibly a workaround to use this with the HA default theme with dark-mode?
If not, can anyone point to the actual theme (or settings) that HA uses with dark-mode?

95

Try using frontend.reload_themes from Developer Tools > Services

1 Like
96

That got it, thanks much!!!

97

1d3f2b1cc7368c1ee5ff6ebd5f489b70f0a67a13
1d3f2b1cc7368c1ee5ff6ebd5f489b70f0a67a13745×294 7.25 KB

98

Sorry. I’m having a bit of trouble understanding. What should happen to the overflow menu dots? Should they go somewhere else? Be removed?

99
100

Do they dissapear? Should they be moved? It currently keeps them there. Sorry, “views frrame” is a very generic term, and I know I’m missing something.

101

Yes.

102

Well if you really want to lose ability to edit the UI, here I go editing the wiki…

103

Yes. I not want lo loose ability to edit UI. I want to keep it even when the header is shrinked.

104

What?

No, that is the problem. By hiding the header we lose the ability to edit the UI. That is the functionality we want back.

2 Likes