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

[Jackyline]

Hi!
I want to remove the first span state__value inside the mini-climate-card. I have tried multiple combinations for days without success. The mc-temperatur can be captured, but inside of it there is a shadow-root. I need to traverse the shadow-root, access the state ellipsis and then select the first state__value.

Here is the HTML:

<mc-temperature>
#shadow-root (open)
<div class="state ellipsis">
<span class="state__value "><!--?lit$515304955$-->21.0</span><!--?lit$515304955$-->
<span class="state__value">/</span><span class="state__value"><!--?lit$515304955$-->NaN</span>
<span class="state__uom"><!--?lit$515304955$-->°C</span>
</div>
</mc-temperature

Example of the yaml I tried:

 mc-temperature$:
  .$:
    .state__value {
       display: none;
}

Thank you!

[VietNgoc (Ngoc John)]

type: custom:mini-climate
entity: climate.home_thermostat
card_mod:
  style: 
    .: |
    mc-temperature $: |
      div>span:nth-child(1) {
        display: none !important; 
      }

[fair_dinkum]

How can I hide a card entirely with Card Mod?

I’m using the custom button card and want to make it visible only when certain conditions are met. Before I add the ifs, I want to entirey hide the card but so that used space is freed up for the card next to it, I mean so that there is no empty space.

I tried this and it hides the card but it does not free up the space - any suggestions?

card_mod:
  style: |
    ha-card {
      visibility: hidden;
    }

Thank you

[arganto]

Conditional card

[fair_dinkum]

Thank you. If possible, I want to use card-mod because for the conditional card, I cannot use template values, I would also need to create a template-helper.

[Jackyline]

Thanks mate! That worked perfectly!!!

[LiQuid_cOOled]

For card mod use display:none; but for button card you don’t necessarily need to use card mod to accomplish that.

You should be able to use the built in styles:

[fair_dinkum]

I tried that already too, its just going blank/hidden, but not making way unfortunately. Looks like I need the Conditional card…

[Chykan (Hunter)]

Try using conditional cards within a vertical or horizontal stack card. The space should be freed up then.

Example below:
Showing Dashboard View (SECTION VIEW)

In Edit Mode shows all the Conditional Cards

Showing Dashboard View (PANEL VIEW)

In Edit Mode shows all the Conditional Cards

[fair_dinkum]

Thanks, I did start using the conditional card yesterday and it is working as you described. So that works. What a pitty yet another helper that I needed to create, but that’s not the end of the world…

[Mariusthvdb (Marius)]

you don’t have to create another helper, because you already wanted to :

@fair_dinkum

make it visible only when certain conditions are met

the conditional card is HA’s core way of allowing you to do that, if visibility is not directly supported on a card.

it’s better than card-mod, because it’s core HA (so does not require a custom card) and because of that will always be supported/maintained

[davidtja]

Hi can anyone help with Trashcard I want it to flash when the relevant trash is due out tomorrow. I’m sure someone has thought of this and hope you can share. Thanks

[Mariusthvdb (Marius)]

just set an animation to the main card (if that is what you want) and declare the animation in a @keyframes you like
Search the community for many examples… and give us what you found so we can help

[LiQuid_cOOled]

Card-mod - Add css styles to any lovelace card

Thanks @LiQuid_cOOled and @Mariusthvdb for your patience! You’ve really helped me understand card-mod, DOM, and CSS a little better. I really have no experience in this area and usually work on the topics gradually through problems or my own ideas. I wasn’t expecting you to give me the complete solution. I was really impressed. Escpecially, regarding @LiQuid_cOOled code examples. I’ve now tried to understand and test all the provided code in more detail. I was able to solve my requirements mor…

If you search trash card in this thread you’ll see a recent similar situation

[LiQuid_cOOled]

It depends on what dashboard type you’re applying the code to

[davidtja]

Ok So I am “trying” to understand - I simply want the card to flash on the day before its due - I get an error: “n.setConfig is not a function”. I get Ive got something fundamentally wrong.

type: custom:card-mod
card:
  type: entities
  entities:
    - entity: calendar.east_herts_council
      name: Bin day
      style: |
        :host {
          {% if (states('calendar.east_herts_council') | as_datetime).date() == (now() + timedelta(days=1)).date() %}
            animation: flash 1s infinite;
          {% endif %}
        }
style: |
  @keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }

[Mariusthvdb (Marius)]

@davidtja

type: custom:card-mod
card:
  type: entities
  entities:
    - entity: calendar.east_herts_council
      name: Bin day
      style: |
        :host {
          {% if (states('calendar.east_herts_council') | as_datetime).date() == (now() + timedelta(days=1)).date() %}
            animation: flash 1s infinite;
          {% endif %}
        }
style: |
  @keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }

the card_type is not card-mod… you use that in the card itself under the type of the card. See the documentation of card-mod for the specifics.

add the keyframes directly under you first mod

also try ha-card on the entities card if you nest the calendar entity there:

type: entities
card_mod:
  style: |
    ha-card {
      {% if (states('calendar.east_herts_council') | as_datetime).date() == (now() + timedelta(days=1)).date() %}
        animation: flash 1s infinite;
      {% endif %}
    }
    @keyframes flash {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }
entities:
  - entity: calendar.east_herts_council
    name: Bin day

to test more securely, first add an unconditional animation without the if, if that works, add the template

[davidtja]

Thanks so much, wll try when I get home.

[Ildar_Gabdullin]

@Gutek

I was trying directly Your command, but it didn’t work as well.

Seems that you anyway made a mistake.
I did myself exactly same what I suggested you:

with a custom theme:

custom:
  state-lawn_mower-mowing-color: red
  state-lawn_mower-paused-color: green
  state-lawn_mower-docked-color: orange

or just with card-mod:

I am honestly not getting why you said that you did exactly the same but failed.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

  style:
    .header-footer.footer hui-picture-header-footer:
      $: |
        img {
          height: 100%;
        }
    .: |
      .header-footer.footer {
        height: 70px;
      }

just had the need to conditionally hide a footer, which I couldn’t find documented yet…

card_mod:
  class: class-header-margin-no-color
  style: |
    .card-header {
      color: ivory;
      background: {{'var(--power-color)' if
                     states('sensor.netto_verbruik')|int(0) < 0 else
                    'brown'}};
    }
    ha-card {
      box-shadow: var(--box-shadow);
    }
    .header-footer.footer {
      display: {{'none' if states('sensor.netto_verbruik')|int(0) < 0 }};
    }

nice

update

in core elements:

footer:
  type: custom:hui-element
  card_type: conditional
  conditions:
    - condition: state
      entity: input_boolean.test
      state: 'on'
  card:
    type: vertical-stack
    cards:
      - type: energy-date-selection
      - type: energy-water-graph

haha never knew