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

[Manuel82 (Manuel Jung)]

Ok, i’m going crazy at the moment to get a simple padding topic done.

I just want the embedded mini-graph-card to have no padding, and the other elements should have normal padding. The simple thermostat and the mini-graph-card itself work fine with the style things, but the padding does not work. I end this night with this not working code can someone give me a hint and make a suggestion what is wrong?

    - type: entities
      style:
        .: |
          ha-card {
            border-radius: 15px;
            background-color: rgba(220,220,220,0.5);
            box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.5);
            font-weight: bold;
          }
        "#states div":
          mini-graph-card:
            $: |
              .card-content {
                padding: 0px;
              }
      entities:
      - type: 'custom:simple-thermostat'
        entity: climate.generic_thermostat_office
        style: |
          ha-card {
            border-radius: 15px;
            background-color: rgba(000,000,000,0.0);
            box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
            font-weight: bold;
            --st-font-size-sensors: 21px;
            --st-spacing: 2px;
          }
          ha-card .mode-item {
            border-radius: 8px;
            background: rgba(000,000,000,0.0);
            color: rgba(150,150,150, 1.0);
          }
          ha-card .mode-item.active {
            border-radius: 8px;
            background: rgba(002,136,209,1.0); 
          }
          ha-card .mode-item:hover {
            border-radius: 8px;
            background: rgba(220,220,220,0.5);
          }
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.average_office_temperature_2h
        style: |
          ha-card {
            border-radius: 15px;
            background-color: rgba(000,000,000,0.0);
          }
      - type: custom:fold-entity-row
        head:
          type: section
          label: Details
        items:
        - entity: climate.buro
          name: Modus

[kirpat (Kir)]

dear help needed,
I was using this

  **border: >**
     **[[ if(input_select.remote == "Mini", "solid 3px red", "solid 3px rgba(255, 125, 125,1)") ]]**

  - card:
      entity: input_select.remote
      hold_action: none
      icon: hide
      name: Mini
      tap_action:
        action: call-service
        service: input_select.set_options
        service_data:
          entity_id: input_select.remote
          options: Mini
      type: entity-button
    style:
      background-color: 'rgba(56, 60, 69, 1)'
      border: >-
        [[ if(input_select.remote == "Mini", "solid 3px red", "solid 3px rgba(255, 125, 125,1)") ]]
      border-radius: 20px
      box-shadow: '3px 3px rgba(0,0,0,0.4)'
    type: 'custom:card-modder'
  - card:
      entity: input_select.remote
      hold_action: none
      icon: hide
      name: Onkyo
      tap_action:
        action: call-service
        service: input_select.set_options
        service_data:
          entity_id: input_select.remote
          options: Onkyo
      type: entity-button
    style:
      background-color: 'rgba(56, 60, 69, 1)'
      border: >-
        [[ if(input_select.remote == "Onkyo", "solid 3px red", "solid 3px
        rgba(255, 125, 125,1)") ]]
      border-radius: 20px
      box-shadow: '3px 3px rgba(0,0,0,0.4)'
    type: 'custom:card-modder'
  - card:
      entity: input_select.remote
      hold_action: none
      icon: hide
      name: TataSky
      tap_action:
        action: call-service
        service: input_select.set_options
        service_data:
          entity_id: input_select.remote
          options: TataSky
      type: entity-button
    style:
      background-color: 'rgba(56, 60, 69, 1)'
      border: >-
        [[ if(input_select.remote == "TataSky", "solid 3px red", "solid 3px
        rgba(255, 125, 125,1)") ]]
      border-radius: 20px
      box-shadow: '3px 3px rgba(0,0,0,0.4)'
    type: 'custom:card-modder'
type: horizontal-stack

this my whole config

what should be border as per my condition in custom:mod-card.
and also if somebody help me to set it as lovelace card-mod
Please guide
thanks

[thomasloven (Thomas Lovén)]

https://github.com/thomasloven/lovelace-card-mod#how-do-i-convert-my-old-card-modder-configuration-to-card-mod

[AhmadK (akasma74)]

So basically this bit doesn’t work as the rest is kind of irrelevant

"#states div":
  mini-graph-card:
    $: |
      .card-content {
        padding: 0px;
      }

?

I don’t use the cards you’re using so cannot test but you need to open Inspect in your browser and check that inside your <div id=states there is another div with <mini-graph-card and inside its #shadow-root there is an element with class="card-content".
If you can see all of that, try to add in your browser padding: 0px; to that last thing and see if it works. If not, you might need to look around and see which element you need to apply the padding to to get the result and then adjust your card-mod selector
That’s how I do it.

[kirpat (Kir)]

i have done but not wofking as before

when with my card-modder

cards:
  - card:
      entity: input_select.remote
      hold_action: none
      icon: hide
      name: TV
      tap_action:
        action: call-service
        service: input_select.set_options
        service_data:
          entity_id: input_select.remote
          options: TV
      type: entity-button
      style: |
        ha-card {
          border-radius: 20px;
          background-color: rgba(56, 60, 69, 1);
          box-shadow: 3px 3px rgba(0,0,0,0.4);
          outline: >-
            {% if(input_select.remote == "TV", "solid 3px red", "solid 3px rgba(255,125,125,1)");
          }
    type: 'custom:mod-card'
  - card:
      entity: input_select.remote
      hold_action: none
      icon: hide
      name: Mini
      tap_action:
        action: call-service
        service: input_select.set_options
        service_data:
          entity_id: input_select.remote
          options: Mini
      type: entity-button
    style:
      background-color: 'rgba(56, 60, 69, 1)'
      border: >-
        [[ if(input_select.remote == "Mini", "solid 3px red", "solid 3px
        rgba(255, 125, 125,1)") ]]
      border-radius: 20px
      box-shadow: '3px 3px rgba(0,0,0,0.4)'
    type: 'custom:card-modder'
  - card:
      entity: input_select.remote
      hold_action: none
      icon: hide
      name: Onkyo
      tap_action:
        action: call-service
        service: input_select.set_options
        service_data:
          entity_id: input_select.remote
          options: Onkyo
      type: entity-button
    style:
      background-color: 'rgba(56, 60, 69, 1)'
      border: >-
        [[ if(input_select.remote == "Onkyo", "solid 3px red", "solid 3px
        rgba(255, 125, 125,1)") ]]
      border-radius: 20px
      box-shadow: '3px 3px rgba(0,0,0,0.4)'
    type: 'custom:card-modder'
  - card:
      entity: input_select.remote
      hold_action: none
      icon: hide
      name: TataSky
      tap_action:
        action: call-service
        service: input_select.set_options
        service_data:
          entity_id: input_select.remote
          options: TataSky
      type: entity-button
    style:
      background-color: 'rgba(56, 60, 69, 1)'
      border: >-
        [[ if(input_select.remote == "TataSky", "solid 3px red", "solid 3px
        rgba(255, 125, 125,1)") ]]
      border-radius: 20px
      box-shadow: '3px 3px rgba(0,0,0,0.4)'
    type: 'custom:card-modder'
type: horizontal-stack

look at Mini and see the border with light red and when selected it goes dark red.
the changes i made is for TV but it doesnt have any border color
Please guide

[Manuel82 (Manuel Jung)]

I can’t find an class=“card-content”. I assume you repeated that from my code. I’m still a noob and did not use the inspector before, therefore i assumed it should be .card-content. I tested again various things but nothing is working. Can you help me again with that picture?

Or is then

[AhmadK (akasma74)]

try

"#states div":
  mini-graph-card:
    $: |
      ha-card {
        padding: 0px;
      }

[thomasloven (Thomas Lovén)]

First: Please read this: https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/453

Second: Please remove as much as possible from your examples.
I do not need to see all of your cards when only one is not working. That’s just a waste of my time.

Third: Your templates are messed up. There’s no end to your {% if. Card-mod uses jinja templates. See the readme.

Pro tip: Start simple. First make card-mod work (NOT MOD-CARD), then add templating.

[klogg]

I’ve been getting good help elsewhere from @AhmadK with mod-card using display: none and I am using it to good effect.

However I’m still having trouble using it with a conditional card.

I want to hide rows based on the state of an input_number and whilst the following works when the condition is true i.e. it hides the row, if the condition is false I get the big red error box.

  - type: custom:mod-card
    style: >
      {% set zone_count = states('input_number.irrigation_number_of_zones') %}
      {% if (zone_count | int) == 4 %}
        ha-card {display: none}
      {% else %}
        ha-card {display: unset}
      {% endif %}
    card:
      type: conditional
      conditions:
       --- and so on ---

I’ve tried several variations on this theme.

Thanks for any help.

[AhmadK (akasma74)]

@klogg

However I’m still having trouble using it with a conditional card.

my method is an alternative to using conditional card, I can see no point in combining tbh.

[thomasloven (Thomas Lovén)]

Besides what Ahmad said, try configuring a card.

[klogg]

@AhmadK

I can see no point in combining tbh

Yes! As I posted this that fact suddenly dawned on me.
I am adding to an existing config and for some reason completely missed the fact that this way I can get rid of the conditional altogether…

Let’s see…

[klogg]

@thomasloven

Besides what Ahmad said, try configuring a card.

The --- and so on --- was meant to be shorthand to prevent me needing to show the whole config. But yes, what @AhmadK said…

[kirpat (Kir)]

card:
  entity: input_select.remote
  hold_action: none
  icon: hide
  name: TV
  tap_action:
    action: call-service
    service: input_select.set_options
    service_data:
      entity_id: input_select.remote
      options: TV
  type: entity-button
style: |
  ha-card {
    background-color: 'rgba(56, 60, 69, 1)'
    border: >-
      [[ if(input_select.remote == "TV", "solid 3px red", "solid 3px rgba(255,125, 125,1)") ]]
    border-radius: 20px
    box-shadow: '3px 3px rgba(0,0,0,0.4)'
type: 'custom:mod-card'

dear this is my cofig turned from card-modder to mod-card
but the border doesnt show.
Please somebody guide thanks
and aslo how to use card-mod for the same

[thomasloven (Thomas Lovén)]

Great summary. Now try reading the rest of the reply.

I also updated the readme on github for you to make it even clearer what to do.

[uspino]

Need some help here. I’m trying to hide the vertical lines in this weather card (stack into a vertical-stack and into a horizontal-stack).

Here’s what I see in dev tools:

And here’s the code:

style: |
  ha-card {
     overflow: hidden;
     width: 88.5%;
     height: 130px;
     padding-left: 0.5em;
  }
  .day {
     border-right: none;
  }

overflow, width and height change the style, but padding-left does not overwite the card’s padding-left setting (it appears as strikethrough text in dev console). Same with border-right, it does not have any effect either. Only extra parameters seem to work, but can’t modify those set up in the original code. Any help would be great, thanks!

[AhmadK (akasma74)]

@uspino

(it appears as strikethrough text in dev console

what does it say when you hover the pointer over it? try something like padding-left: 0.5em !important

[uspino]

the !important flag made it work. Thanks so much!

[NeoID]

Anyone else having the issue that the following code affects all card of the same type?
Using this all “custom:vertical-stack-in-card” gets a gray background. Any way of keeping the style to only affect the current card?

type: custom:vertical-stack-in-card
style: |
  ha-card {
    background: gray;
  }

This only happens with that particular card. The other card “custom:stack-in-card” works but has other issues…

[AhmadK (akasma74)]

@NeoID

Any way of keeping the style to only affect the current card?

I might be wrong but what you’re styling is not a proper card, it’s a container for other cards. In Inspector can you see it has ha-card or background property at all?
What is most likely happening it applies this style to all ha-cards found recursively and there might be many inside your cards as LL cards use it often as a top level card (?)
So a solution is more precise targeting. It can be done but the cards’s HTML structure should be analysed first and then you can try to construct a selector that will do the job.