šŸ”¹ Card-mod - Super-charge your themes!

I dont belive it! How simple it was!
One more beer from me :+1:

Now almost everything is like Custom header from Mayker!
If I dont bother you, can you look at this print screen:

#2:

paper-tab {
padding: 0 !important;
}
2 Likes

#1: 60 -> 48?

app-header {
  top: calc(100vh - 48px) !important;
  bottom: 0 !important;
  transform: unset !important;
  }

Thank you Hmmbob for your reply!
I tried with top:calc(100vh - 48px)!important but the menu is too much in the bottom, and I canā€™t scroll the page.

Ah too bad. I was suggesting that as that was the same behavior I saw before I scaled that one down. And your css looked very familiar to me :wink:

That was the problem, but can you point me how to move the icons higher?

Can you clarify and repost your theme file?

Now the menu is okay, but only when I want to scroll the page, it goes down and I canā€™t see the whole page.
I will atach 2 images, first one is when I click the menu item and the second one when I scroll down.

  card-mod-theme: slate
  header-height: 48px
  card-mod-root-yaml: |
    ha-app-layout$: |
      #contentContainer {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
      }
    .: |
      app-header {
        transform: translate3d(0px, -65px, 0px);
      }
      ha-tabs {
        height: var(--header-height);
        --paper-tabs-selection-bar-color: var(--button-card-background-color-on) !important;
        color: var(--app-header-text-color) !important;
      }
      paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
        color: var(--button-card-background-color-on) !important;
      }
      /* This hides the help button, menu button and title */
      a.menu-link[target="_blank"], ha-button-menu, [main-title] {
        display: none;
      }
      ha-menu-button {
        display: none !important;
      }
      paper-tab {
      padding-right: 10px !important;
      }
      app-header {
        top: calc(100vh - 65px) !important;
        bottom: 0 !important;
        transform: unset !important;
      }

Has something changed with this mod card?
My center buttons with picture entity card in it, is now bigger than the rest, although the code is the sameā€¦ (this used to work, but something changed and they arent equal size anymore

The code:

- card:
          name: Alarm
          type: button
          show_label: false
          icon: mdi:shield-off
          tap_action: !include popup/alarm.yaml
            
        style: |
          ha-card {
            height: 128px;
            text-align: center;
          }
        type: 'custom:mod-card'
      - entity: person.stijn
        image: /local/stijn.jpg
        tap_action: !include popup/persoon1.yaml
        style: |
          ha-card {
            height: 128px;
          }
        type: picture-entity
      - card: 
          name: Verlichting
          type: button
          icon: mdi:lightbulb-outline
          tap_action: !include popup/verlichting.yaml
        style: |
          ha-card {
            height: 128px;
          }
        type: 'custom:mod-card'

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?

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

Donā€™t post in the theme section, post in the regular area.

You can try adding a gap-card.

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

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

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ā€¦

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.

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.

  1. 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?

  2. 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.

  1. Does it still show up with the default theme?
  2. 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.
1 Like

Kendell, you are our savior.

  1. Unfortunately yes
  2. 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 }}Ā°";