🔹 Card-mod - Super-charge your themes!

DNWY90 · November 1, 2020, 10:34am

DNWY90:

I took the Compact Header from the The Cookbook and made some changes. This forum is helping me a lot so maybe someone else also can use this. I just started so maybe some thing don’t make sense at all but it’s working for me.

I changed

Copy to clipboard
    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;
To

Copy to clipboard
padding-top: 0px !important;
It didn’t made my header go to the bottom, but it did move up my background behind my transparant header.

This part isn’t working anymore. I use a picture elements card with floorplan. Now there is more space between my card en the top menu. So on my tablet the lowest part of my floorplan isn’t visible without scrolling down. Anyone an solution?

KTibow · November 1, 2020, 2:15pm

Can you clarify? You can always add a gap-card to the bottom.

KTibow · November 1, 2020, 2:16pm

Don’t post in the theme section, post in the regular area.

KTibow · November 1, 2020, 2:16pm

You can try adding a gap-card.

skank · November 1, 2020, 2:21pm

sorry didnt see that, thx for the headup, reposted in correct topic

ASNNetworks · November 1, 2020, 3:03pm

Sorry for the cross-post, but perhaps there is a global way to fix the new issue that I’m having with how markdown styling works. I need to set the height of the markdown card globally (or better yet, completely remove it and use the one I already have set up).

With HA 117 there’s a new constructed stylesheet option that sets height to 100% of all my markdown cards. For the time being I fixed it by using !important everywhere, which now overrides the new variable. Though this is very hacky and doesn’t look nice when reloading (starts spaced then applies the height). I really hope some has a decent global solution for this.

Is there a way to set this in theme.yaml so that stylesheet gets ignored completely, so I have markdown syling as I had?

_{I wonder why HA is so keen on changing how markdown styling works every few releases}

Mariusthvdb · November 1, 2020, 3:06pm

would there be any way to alter the option dots? have it show something else than the 3 dots (like with below screen of the Custom Header) and, control which option is visible?

Schermafbeelding 2020-11-01 om 16.07.36
would really love to be able to customize that, as the current core way is so limited on the one hand, and shows all options I dont need in yaml mode on the other.

really hurts looking back to this realizing this is no longer supported…

KTibow · November 1, 2020, 3:07pm

Yeah, you can! Once you enter edit mode, though, the element will be recreated and it’ll stop working. Look in the history of the wiki, and search for box-shadow. That’ll get you started.

scstraus · November 1, 2020, 10:08pm

Hi all. I’m getting close to making sense of the post custom header world and the below is working pretty well for me, but there are still a couple things I can’t figure out.

The solution to remove the mic is apparently to disable almond, but I never enabled it. I don’t have it anywhere in my config or integrations. What am I missing, how do I get rid of that mic button?
The example I’m using below to remove the overflow menu from only mobile works okay but relies on the orientation of the device. I have some kiosk tablets where I want to keep the header but turn the overflow menu into a clock. This raises 2 issues.
a) Can I target only the kiosk tablets (in landscape mode) via their user agent or logged in user but not affect my desktop clients?
b) Is it possible to make clicking the clock bring up the overflow menu items as was possible in custom-header?

Here’s what I’m running to get rid of superflous buttons under .117 with the now built in compact header if anyone wants similar:

  card-mod-theme: "midnight"
  card-mod-root-yaml: |

    ha-app-layout$: |
    .: |
      /* This hides the help button, menu button and title */

      ha-menu-button {
        display: none !important;
      }

      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, [main-title] {
          display: none;
        }
      }

Thanks in advance for any ideas. I don’t really understand most of what’s going on here, but have gotten close via frankensteining stuff together.

KTibow · November 1, 2020, 10:13pm

Does it still show up with the default theme?
a) You can use the user variable in Jinja
b) Nope, that’s not how CSS works, unless you use ::before on the overflow menu instead of ::after on the tabs.

scstraus · November 1, 2020, 10:31pm

Kendell, you are our savior.

Unfortunately yes
Could you expand a bit? I’m hopeless with CSS unfortunately and just kind of stealing other’s creations. I went searching for the user variable in the template editor as hass.user, user.name, user etc… but I couldn’t get a value and even if I did I wouldn’t know what do do with it. I’m guessing something like:

      @user (username) {

? also unsure on what the ::before on the overflow menu. I assume you mean something like the below, but how do I get it to replace the overflow menu while still keeping the menu functional?

/* This adds the time */
  ha-tabs::before{
    display: inline-block;
    font-size: 12px;
    height: 20px; 
    width: 100px;
    margin-left: 0px;
    margin-right: 0px;
    content: "{{ states('sensor.time') }} - {{states.weather.dark_sky.attributes.temperature }}°";

KTibow · November 1, 2020, 10:34pm

Huh. Try creating a new topic, or checking all of your YAML files and grep for “conversation”.
a) It’d be something like this:

{% if user == 'Kendell' %}
ha-tabs {
  display: none;
}
{% endif %}

b) target ha-button-menu::before, but I haven’t tested this yet

gerard33 · November 1, 2020, 10:45pm

Thanks. I have changed this as follows to avoid the icons moving down and 6px gives enough space between the icons for me.

paper-tab {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

odiv · November 1, 2020, 11:12pm

Have you setup the menu at the bottom?
Please share you code!

KTibow · November 1, 2020, 11:20pm

Can you check your grammar?

scstraus · November 1, 2020, 11:57pm

@odiv,

KTibow fixed an example a few posts up that moves the header to the bottom. I tried it and it worked for me on .117 (just not for what I wanted to do).

  card-mod-theme: yourname
  # Header
  header-height: 0px # Change this to 0px for header on the bottom. You're 1/3 there.
  card-mod-root-yaml: |
    paper-tabs$: |
      /* Uncomment this for header on the bottom. You're 2/3 there. */
      #selectionBar {
        bottom: unset !important;
      }
    .: |
      /* This moves the header up. */
      app-header {
        transform: translate3d(0px, -48px, 0px);
      }
      /* Let's change the background. */
      app-header, app-toolbar {
        background: transparent !important;
        color: #A9A9A9 !important;
      }
      /* We're still going to need a way to see that we're in edit mode. */
      app-header.edit-mode {
        padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
        border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
      }
      /* This changes the color of the currently selected tab. */
      ha-tabs {
        --paper-tabs-selection-bar-color: #D2691E !important;
      }
      paper-tab[aria-selected=true] > ha-icon {
        color: #FF8C00 !important;
      }
      paper-tab[aria-selected=true] {
        color: #D2691E !important;
      }
      /* This hides the help button. */
      a.menu-link[target="_blank"] {
        display: none;
      }
      /* This makes the plus color the same as the background. */
      #add-view {
        color: var(--primary-background-color);
      }
      /* This hides the title. */
      [main-title] {
        display: none;
      }
      /* This hides the app-toolbar in edit mode. */
      app-toolbar.edit-mode {
        height: 0;
      }
      /* This moves the edit mode buttons back in. */
      app-toolbar.edit-mode > mwc-icon-button {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
      app-toolbar.edit-mode > ha-button-menu {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
      }
      /* This adds a bit more padding, mainly for unused entities. */
      app-header.edit-mode > div {
        padding-left: 5px;
      }
      /* Uncomment this for header on the bottom. You're 3/3 there. */
      app-header {
        top: calc(101vh - 60px) !important;
        bottom: 0 !important;
        transform: unset !important;
      }

scstraus · November 2, 2020, 7:40pm

Crap, thanks, I’m an idiot. Based on this, It looked like the key was almond: and since I didn’t expect it would be anything else, I didn’t bother to look further than that.

I tried the clock snippet without any conditionals both with ::before and ::after, and with both paper-tabs and ha-tabs, and moved it around in the config a bit but I actually couldn’t get it to display anything… Here’s one of the attempts, any idea?

  card-mod-theme: "midnight"
  card-mod-root-yaml: |

    /* This adds the time */
    ha-tabs::after {
      display: inline-block;
      font-size: 12px;
      height: 20px; 
      width: 100px;
      margin-left: 0px;
      margin-right: 0px;
      content: "{{ states('sensor.time') }} - {{states.weather.dark_sky.attributes.temperature }}°";


    ha-app-layout$: |
    .: |
      /* This hides the help button, menu button and title */
      ha-menu-button {
        display: none !important;
      }

      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, [main-title] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-right"] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-left"] {
          display: none;
        }
      }

KTibow · November 2, 2020, 7:42pm

Can you post your theme file? I know it’s mean, but this is the way for me to quickly help you and everyone.

scstraus · November 2, 2020, 7:54pm

Not mean at all! I just wanted to save you some scrolling. Here it is in it’s entirety, warts and all.

---
#
# Midnight Theme
#
midnight:
  accent-color: "#E45E65"
  card-background-color: "var(--primary-background-color)"
  dark-primary-color: "var(--accent-color)"
  disabled-text-color: "#7F848E"
  divider-color: "rgba(0, 0, 0, .12)"
  google-blue-500: "#4285f4"
  google-green-500: "#39E949"
  google-red-500: "#E45E65"
  google-yellow-500: "#f4b400"
#  ha-card-background: "#434954"
  label-badge-background-color: "#2E333A"
  label-badge-blue: "#039be5"
  label-badge-border-color: "green"
  label-badge-green: "#0DA035"
  label-badge-grey: "var(--paper-grey-500)"
  label-badge-red: "var(--accent-color)"
  label-badge-text-color: "var(--primary-text-color)"
  label-badge-yellow: "#f4b400"
  light-primary-color: "var(--accent-color)"
  markdown-code-background-color: "var(--paper-listbox-background-color)"
  paper-card-header-color: "var(--accent-color)"
#  paper-dialog-background-color: "#434954"
  paper-grey-200: "#414A59"
  paper-grey-50: "var(--primary-text-color)"
  paper-grey-500: "#9e9e9e"
  paper-item-icon_-_color: "green"
  paper-item-icon-active-color: "#F9C536"
  paper-item-icon-color: "var(--primary-text-color)"
  paper-item-selected_-_background-color: "#434954"
#  paper-listbox-background-color: "#2E333A"
  paper-listbox-color: "var(--primary-color)"
  paper-slider-active-color: "var(--accent-color)"
  paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
  paper-slider-disabled-active-color: "var(--disabled-text-color)"
  paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
  paper-slider-knob-color: "var(--accent-color)"
  paper-slider-knob-start-color: "var(--accent-color)"
  paper-slider-pin-color: "var(--accent-color)"
  paper-slider-secondary-color: "var(--secondary-background-color)"
  paper-tabs-selection-bar-color: "green"
  paper-toggle-button-checked-bar-color: "var(--accent-color)"
  paper-toggle-button-checked-button-color: "var(--accent-color)"
  paper-toggle-button-checked-ink-color: "var(--accent-color)"
  paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
  paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
  paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
#  primary-background-color: "#383C45"

  primary-color: "#5294E2"
#  primary-text-color: "#FFFFFF"
  secondary-background-color: "#383C45"
  secondary-text-color: "#5294E2"
  sidebar-background-color: "var(--paper-listbox-background-color)"
  sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
  sidebar-selected-icon-color: "var(--primary-color)"
  sidebar-selected-text-color: "var(--primary-text-color)"
  sidebar-text-color: "var(--primary-text-color)"
  slider-bar-color: "var(--disabled-text-color)"
  slider-color: "var(--primary-color)"
  slider-secondary-color: "var(--light-primary-color)"
  st-mode-active-background: "var(--dark-primary-color)"
  st-mode-background: "var(--primary-background-color)"
  state-icon-active-color: "#FDD835"
  state-icon-color: "#44739e"
  state-icon-unavailable-color: "var(--disabled-text-color)"
  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--disabled-text-color)"
  switch-unchecked-color: "var(--disabled-text-color)"
  switch-unchecked-track-color: "var(--disabled-text-color)"
  table-row-alternative-background-color: "#3E424B"
  table-row-background-color: "#353840"
  text-primary-color: "var(--primary-text-color)"
  toggle-button-color: "var(--primary-color)"
# Sean's additions
  ha-card-border-radius: "10px"
#  ha-card-box-shadow: "4px 4px 4px #2E333A"
  ha-card-box-shadow: "4px 4px 4px #1B1E1F"
#  ha-card-header-color: "#FFFFFF"
  primary-background-color: "#181A1B" 
  paper-dialog-background-color: "#1f2223" 
  ha-card-background: "#1f2223"
  paper-listbox-background-color: "#1f2223"
  primary-text-color: "#E8E8E8"
  ha-card-header-color: "#FFFFFF"
  header-height: 48px
  app-header-background-color: "#181A1B" 

  card-mod-theme: "midnight"
  card-mod-root-yaml: |

    /* This adds the time */
    ha-tabs::after {
      display: inline-block;
      font-size: 12px;
      height: 20px; 
      width: 100px;
      margin-left: 0px;
      margin-right: 0px;
      content: "{{ states('sensor.time') }} ";

    ha-app-layout$: |
    .: |
      /* This hides the help button, menu button and title */
      ha-menu-button {
        display: none !important;
      }

      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, [main-title] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-right"] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-left"] {
          display: none;
        }
      }




#- {{states.weather.dark_sky.attributes.temperature }}°
#      @media (orientation: portrait) {
#        ha-menu-button {
#          display: none !important;
#        }
#      }

KTibow · November 2, 2020, 8:11pm

Check this out

---
#
# Midnight Theme
#
midnight:
  accent-color: "#E45E65"
  card-background-color: "var(--primary-background-color)"
  dark-primary-color: "var(--accent-color)"
  disabled-text-color: "#7F848E"
  divider-color: "rgba(0, 0, 0, .12)"
  google-blue-500: "#4285f4"
  google-green-500: "#39E949"
  google-red-500: "#E45E65"
  google-yellow-500: "#f4b400"
#  ha-card-background: "#434954"
  label-badge-background-color: "#2E333A"
  label-badge-blue: "#039be5"
  label-badge-border-color: "green"
  label-badge-green: "#0DA035"
  label-badge-grey: "var(--paper-grey-500)"
  label-badge-red: "var(--accent-color)"
  label-badge-text-color: "var(--primary-text-color)"
  label-badge-yellow: "#f4b400"
  light-primary-color: "var(--accent-color)"
  markdown-code-background-color: "var(--paper-listbox-background-color)"
  paper-card-header-color: "var(--accent-color)"
#  paper-dialog-background-color: "#434954"
  paper-grey-200: "#414A59"
  paper-grey-50: "var(--primary-text-color)"
  paper-grey-500: "#9e9e9e"
  paper-item-icon_-_color: "green"
  paper-item-icon-active-color: "#F9C536"
  paper-item-icon-color: "var(--primary-text-color)"
  paper-item-selected_-_background-color: "#434954"
#  paper-listbox-background-color: "#2E333A"
  paper-listbox-color: "var(--primary-color)"
  paper-slider-active-color: "var(--accent-color)"
  paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat"
  paper-slider-disabled-active-color: "var(--disabled-text-color)"
  paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
  paper-slider-knob-color: "var(--accent-color)"
  paper-slider-knob-start-color: "var(--accent-color)"
  paper-slider-pin-color: "var(--accent-color)"
  paper-slider-secondary-color: "var(--secondary-background-color)"
  paper-tabs-selection-bar-color: "green"
  paper-toggle-button-checked-bar-color: "var(--accent-color)"
  paper-toggle-button-checked-button-color: "var(--accent-color)"
  paper-toggle-button-checked-ink-color: "var(--accent-color)"
  paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
  paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
  paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
#  primary-background-color: "#383C45"

  primary-color: "#5294E2"
#  primary-text-color: "#FFFFFF"
  secondary-background-color: "#383C45"
  secondary-text-color: "#5294E2"
  sidebar-background-color: "var(--paper-listbox-background-color)"
  sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
  sidebar-selected-icon-color: "var(--primary-color)"
  sidebar-selected-text-color: "var(--primary-text-color)"
  sidebar-text-color: "var(--primary-text-color)"
  slider-bar-color: "var(--disabled-text-color)"
  slider-color: "var(--primary-color)"
  slider-secondary-color: "var(--light-primary-color)"
  st-mode-active-background: "var(--dark-primary-color)"
  st-mode-background: "var(--primary-background-color)"
  state-icon-active-color: "#FDD835"
  state-icon-color: "#44739e"
  state-icon-unavailable-color: "var(--disabled-text-color)"
  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--disabled-text-color)"
  switch-unchecked-color: "var(--disabled-text-color)"
  switch-unchecked-track-color: "var(--disabled-text-color)"
  table-row-alternative-background-color: "#3E424B"
  table-row-background-color: "#353840"
  text-primary-color: "var(--primary-text-color)"
  toggle-button-color: "var(--primary-color)"
# Sean's additions
  ha-card-border-radius: "10px"
#  ha-card-box-shadow: "4px 4px 4px #2E333A"
  ha-card-box-shadow: "4px 4px 4px #1B1E1F"
#  ha-card-header-color: "#FFFFFF"
  primary-background-color: "#181A1B" 
  paper-dialog-background-color: "#1f2223" 
  ha-card-background: "#1f2223"
  paper-listbox-background-color: "#1f2223"
  primary-text-color: "#E8E8E8"
  ha-card-header-color: "#FFFFFF"
  header-height: 48px
  app-header-background-color: "#181A1B" 

  card-mod-theme: "midnight"
  card-mod-root-yaml: |
    .: |
      /* This hides the help button, menu button and title */
      ha-menu-button {
        display: none !important;
      }

      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, [main-title] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-right"] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-left"] {
          display: none;
        }
      }

      /* This adds the time */
      ha-button-menu::before {
        font-size: 12px;
        height: 20px; 
        width: 100px;
        margin-left: 0px;
        margin-right: 0px;
        content: "{{ states('sensor.time') }}";
        position: absolute;
        top: 16px;
        right: 48px;
      }




#- {{states.weather.dark_sky.attributes.temperature }}°
#      @media (orientation: portrait) {
#        ha-menu-button {
#          display: none !important;
#        }
#      }