🔹 Card-mod - Super-charge your themes!

[KTibow (Kendell R)]

What about filtering by CSS? Is fonts.css loaded?

[Mariusthvdb (Marius)]

I think yes?

[KTibow (Kendell R)]

When you click on it and go to the response tab, what shows up?

[Mariusthvdb (Marius)]

[KTibow (Kendell R)]

Huh. I’d recommend next downloading the ttf and woff2 files and hosting them yourself, and then updating fonts.css to use them and remove everything else.

[ASNNetworks]

Hi, did you happen to have an idea about this?

Card-mod - Super-charge your themes!

In the image I posted. You see what I highlighted red right? That one overrides all markdown cards. When I set it to 0 within inspector element, all markdown cards use the height set in the cards itself. So it does work, but I have no idea how to apply that as default. That’s why I hoped it’s possible through either resources or theme.yaml Btw I created a ticket about this when HA117 released. Unfortunately there is no response and the person who made the PR for this change for HA117 doesn’t re…

[KTibow (Kendell R)]

Create a simple theme:

no-height:
  card-mod-theme: no-height
  card-mod-card: |
    ha-card.type-markdown{
      height:0;
    }

[ASNNetworks]

Will this ignore the new stylesheet introduced with HA 117? Sorry me asking, but I just want to know for sure before updating and having to revert back. !important won’t work properly, that’s why I ask.

[KTibow (Kendell R)]

I dunno, didn’t test it at all.

[phairplay]

hi guys,
I might of posted this in the wrong place after spotting this,

could someone please help me with the below, I’ve searched this thread but I can’t seem to get anything to do what I’m wanting.

Lovelace glance card blank space help

Hi guys, I monitor my home assistant solely via my phone and prefer to keep everything within the screen (not having to scroll) Is it possible to remove the black space below the title of these two cards Downstairs and upstairs [Screenshot_20201126-095937_Chrome]

[KTibow (Kendell R)]

Wrong one, not related to themes except if you want to globally apply the styling (in that case look at the wiki), but this should do:

style: |
  ha-card.type-glance > h1.card-header {
    padding-bottom: 0;
  }

[phairplay]

Hi, thank you for the assistance. I’ve added this yet nothing has changed. I’ve also checked the wiki and can’t see anything

I’m only look to change these two cards

[Mariusthvdb (Marius)]

HI Kendell,

sorry for my wait, this one got buried…

the ttf and woff2 files, which are those? I did earlier dl the .css files, but know of no ttf and woff2 files (nor what the latter is, but Ill google that )

next, hosting means saving them in the www folder?

how do I update the fonts.css to see them then, and removing the rest means deleting… what?

maybe best to turn it around: please tell me what to dl and where to load, so I can leave out what I did before.

thanks…

[KTibow (Kendell R)]

The CSS file has links to stuff that ends in ttf and woff2 inside of it.

[bergasha]

So with the new Beta v1.0.0 the background image no longer continues behind the header. I have the header transparent and it was working before updating. Anyone else on the Beta and seeing this?

[KTibow (Kendell R)]

Can you share config?

[DavidFW1960 (David)]

FWIW this is still working in 1.0.0b0 for me

  # CUSTOM-HEADER MODS
  card-mod-theme: ios-dark-mode-blue-red-mod
  card-mod-root-yaml: |
    .: |
      .edit-mode, app-header, app-toolbar {
        background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
      }
  header-height: 48px    

[kareem613]

I’ve got an entities card with an image in the header. I’m trying to figure out the selector for the img. I can get to the header itself. Below, the red border shows up.

type: entities
style: |
  ha-card div.header-footer.header {
    border: 1px solid red;
    height: 150px;
    object-fit: cover;
  }
entities:
  - switch.garage
header:
  type: picture
  image: /local/snapshots/camera.malin_garage.jpg

The next element below is the hui-picture-header-footer, then the img element.
I can’t seem to figure out how to select the img element.
None of these work.

ha-card div.header-footer.header hui-picture-header-footer img

ha-card div.header-footer.header > img

Any ideas on how to select the img in a header?

[KTibow (Kendell R)]

Wrong one, try the non-theme one. Maybe @thomasloven should edit this in, given how many people do that?

[bergasha]

Sorry for the late reply… Here it is and thank you

kibibit-dark-cards:
  card-mod-theme: kibibit-dark-cards
  header-height: 48px
  card-mod-root-yaml: |
    .: |
      /* This hides the help button, menu button and title */
      ha-menu-button {
        display: none;
      }

      @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 */
      {% if user != 'kiosk' %}

      mwc-icon-button[slot="trigger"] > ha-svg-icon {
        display: none;
      }

      mwc-icon-button[slot="trigger"]::after {
        font-size: 18px;
        height: 20px; 
        width: 100px;
        margin-left: 0px;
        color: orange
        margin-right: 0px;
        content: "{{ states('sensor.time') }} - {{ states('sensor.multi_sensor') }}° ";
        position: absolute;
        top: 14px;
        right: 0px;
      }
      {% endif %}
  # Global
  app-header-background-color: 'rgba(0, 0, 0, 0.0)'
  app-header-text-color: 'rgba(255, 184, 5, 1)'
  #background-image: "center / cover no-repeat fixed url('https://thatkookooguy.github.io/https-assets/bg-kibibit-theme.png')"
  #lovelace-background: var(--background-image)
  primary-color: "#209cee"
  light-primary-color: "#B6B6C1"
  primary-background-color: "#212121"
  secondary-background-color: rgba(25, 25, 25, 0.7)
  divider-color: var(--primary-background-color)
  accent-color: rgba(255, 159, 9, 1)
  # Fonts
  primary-font-family: 'Comfortaa'
  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)"
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: "#8f0303"
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: "#7a0c02"  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  # Sliders
  paper-slider-knob-color: "#FFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 20px
  ha-card-background: 'rgba(0, 0, 0, 0.3)'
  paper-card-background-color: var(--ha-card-background)
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.6)
  paper-item-icon-color: "#7a0c02"
  more-info-header-background: rgba(25, 25, 25, 0.5)
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white