🔹 Card-mod - Add css styles to any lovelace card

so what did you end up with Tom?
Also having my share of issues here (on another card btw, the new horizon-card) , and hope to find some help in your solution…

I’ve had issues with styling the markdown card since the December update.

Also take note of this in the card-mod docs:

NOTE 2: Following on the note above; due to the high level of load order optimization used in Home Assistant, it is not guaranteed that the #shadow-root or the mwc-button actually exists at the point in time when card-mod is looking for it. If you use the second method above, card-mod will be able to retry looking for #shadow-root at a later point, which may lead to more stable operation.

In short; if things seem to be working intermittently - try splitting up the chain.

I previously made this with a markdown card, which is what broke.

After asking here, I subsequently logged this issue, because I could see the <style> wasn’t being injected at all levels. I then later on spotted that some elements are dynamically reloaded, the the style appears shortly before disappearing. I fear there’s nothing card-mod can do about this.

Can you see a <style> element at all levels?

Thank you for your reply, so this is an issue that is not isolated to my environment. Not sure if that’s good or bad :slight_smile:

I set up a super simple tab in Lovelace and looks to me that the style tag is empty, is that what you mean?

In my case it was absent from a specific point downwards. If you have the tag, it means card-mod should work. You just need to get the path right.

How do you mean with getting the path right? This worked perfectly for months and then all of a sudden it stopped working but works occasionally and a Ctrl-F5 always works and on my phone it works almost all the time. So feels like it should be OK code wise?

Getting a bit desperate here since that background is very important for my way of designing HA dashboards :slight_smile:

How are you resonating around this, waiting for a fix or trying to solve it?

Summare of devices:

  • Android phone (app). Works fine 9/10 times
  • iPad, tried a few times and worked just fine
  • Firefox on my laptop, seems to work fine
  • Chrome on laptop: Works 1/10 times. hard refresh solves the issue.

I need to figure out how to address this image using card-mod. I want to set a max height. I just can’t seem to figure out what to put in front of the curly brace. What I have below is effectively what I want, but it’s obviously not working. What do I replace “img” with?

          - type: picture-entity
            entity: camera.apod_nasa_gov
            show_name: false
            show_state: false
            card_mod:
              style: |
                ha-card {
                  border-radius: 0px;
                  border: none;
                  box-shadow: none;
                  background: rgba(0,0,0,0);
                }
                img {
                  max-height: 250px;
                  width: 100%;
                  object-fit: scale-down !important;
                }

The keys in your card-mod config that’s basically a CSS selector (the path).

You showed that you had an empty <style> element, so what’s in your config isn’t ending up where it should or where you are expecting it to be. I can’t say what the answer is, besides that you need to investigate the path (see above). Something could be sitting at a different level in the HTML than where it used to be.

Honestly, I hate to admit this, but I gave up on my old solution. I tried every CSS trick known to me but couldn’t get anything reliable working. I didn’t want to install another custom card (there are cards for rendering HTML or your custom tables), so I just coded it with HTML and some JS to construct my table, and then CSS to style it, all in a fake custom button card. I’m not posting my solution here as it’s would be off topic, but I can DM it to you or you can start a new thread and tag me.

Sorry to hear, makes me realize that I might have to reconsider my entire layout since it heavily relies on card-mod and CSS being applied. Initally thought it was the background that was the issue but now I know it’s the applying of CSS to markdown cards that is the issue.

Please share your workaround in a PM and I’ll see if I can use it.

@thomasloven, should I create a github issue on this or do you have any ideas why we have this issue? My original post about this issue is here.

Did you consider to apply a theme to the card as shown above?

And you can try to put a mod_card around it and address from there with a more open $ at the end. According to the tipp in one of the last release note oder card_mod.So that the style can be re-applied if the element is there if - before - not there at the time card_mod wont to try it.

In general: Don’t tag/@ people here.

1 Like

I’ve only had an issue with styling the markdown card. I still use it in all other cases. Just wanted to make that clear in case you were going to completely drop card-mod or if readers interpret you as such.

Not sure how to do that, my card-mod knowledge is a bit limited. If you have an example I’m happy to try. I think you are on to something since a reload of the entire view solves the issue. So reloading the code if it fails might be the solution. Would you mind pointing me in the right direction?

Absolutely, sorry if that was unclear. It’s pure magic - that’s why I miss it so bad on the markdown card :slight_smile:

1 Like

I figured out my own issue: code attached in case anyone finds it helpful.

- type: picture-entity
  entity: camera.apod_nasa_gov
  show_name: false
  show_state: false
  card_mod:
    style:
      hui-image$: |
        img {
          max-height: 350px;
          width: 100%;
          object-fit: scale-down !important;
        }
      .: |
        ha-card {
          border-radius: 0px;
          border: none;
          box-shadow: none;
          background: rgba(0,0,0,0);
          padding: 0 0 0 0px;
        }

Thought about giving this a try:

type: custom:mod-card
card_mod:
  style:
    hui-markdown-card:
      $: |
        ha-card {
          margin: 17px 15px 0px 15px;
          background: rgba(250, 250, 250, 1.0);
          box-shadow: none;
          font-size: 15px;
          font-family: 'Segoe UI Light';
          color: #404040;
          font-weight: 300;
          text-align: left;
          border-radius: 15px;
          --mdc-icon-size: 35px;
        }
card:
  type: markdown
  content: |
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
        <td colspan="3">Test</td>
      </tr>
    </table>
1 Like

I gave it a try and after testing to open up HA on my laptop about 10 times my original code failed all 10 times and your code worked all 10 times.

I’ll test more tomorrow but so far it works and I’m super grateful for the help! Thanks a million!

Edit:
The only thing that broke is my H1 and H6 tags. Not sure why, any idea how to get them to work in this?

I have tried different variations of the code including/excluding the ha-markdown $: |.

card_mod:
  style:
    hui-markdown-card:
      $: |
        ha-card {
          margin: 17px 15px 0px 15px;
          background: rgba(250, 250, 250, 1.0);
          box-shadow: none;
          font-size: 15px;
          font-family: 'Segoe UI Light';
          color: #404040;
          font-weight: 300;
          text-align: left;
          border-radius: 15px;
          --mdc-icon-size: 35px;
        }
    ha-markdown $: |
      h1 {
        font-weight: 200;
        color: 404040;
        margin: 0px;
        font-size: 30px;
      }
      h6 {
        margin: 0px;
        font-size: 14px;
        font-family: 'Segoe UI Light';
        color: #404040;
        font-weight: 400;
      }

Can somebody help me hiding (display: none) the icon and name of an entities entity row?
I can’t manage to get the selector (tree) right. Thanks!

Hello everyone. Please help me get rid of box shadows. I use the following template:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    icon: mdi:sofa
    tap_action:
      action: navigate
      navigation_path: soggiorno
    icon_color: blue
    multiline_secondary: true
    primary: Вітальня
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
        }
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: sensor.ewelink_th01_temperature_2
        icon_color: blue
        card_mod: null
        style: |
          ha-card {
              box-shadow: none;
          }
      - type: entity
        entity: sensor.ewelink_th01_humidity_2
        icon_color: blue
        card_mod: null
        style: |
          ha-card {
            box-shadow: none;
          }
alignment: center

1st post → Link at the bottom from Ildar → Entities Card.

Aren’t those borders rather than box shadows?

I think your code is working. Try adding border: none; as well

1 Like

I have created a 5 column grid card to display a mix of button cards and mushroom chips. I am trying to use custom:mod-card to modify two aspects of the grid. My code successfully changes the font size and margins of the card header (i.e.title) but try as I might I cannot get a Border drawn around the whole grid card. This is relevant part of my code which is at the beginning of the card configuration:

type: custom:mod-card
style:
  hui-grid-card$: |
    .card-header {
     font-size: 15px !important;
     margin-top: -12px !important;
     margin-bottom: -15px !important;
     }
    .grid-container {
     display: grid;
     border: 30px solid red;
     }
card:
  type: grid
  columns: 5
  square: false
  title: Living Room

…etc…etc

The .card-header part of the code works but when I enter the grid-container part of the code a border sometimes flashes on then disappears. I therefore request help on how to get the border drawn around the whole grid (i.e. around the grid-container)

Hi Ildar,

using this now for the input_text

          card_mod:
            style:
              hui-generic-entity-row $: |
                state-badge {
                  display: none;
                }
              .: |
                hui-generic-entity-row {
                  margin: 0px -12px;
                }
                :host {
                  --text-field-padding: 8px;
                }

and its almost ok… Id love to also move the Label to the same 8px padding, but can not find the correct element.

would you know which element I should target?