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

[dimitri.landerloos]

Example:

card_mod:
  style: 
    mwc-ripple$: |
      .mdc-ripple-surface::after {
        background-color: yellow !important;
        opacity: 0.5 !important;
      }
      .mdc-ripple-surface--hover::before {
        background-color: blue !important;
        opacity: 0.2 !important;
      }

The ::after is the most important one to change as this is on the click. The hover::before is with a mouse hover so isnt so important for mobile at least

Opacity not needed if you only want to change the color.

[iamrufus]

Being very new to home assistant and being overwhelmed on how to add custom css with card-mod can i just ask what does the ‘$’ represent in the code. I am trying to add a simple bottom border to my horizontal stack card but cant for the life of me work out how to do it as its inside a shadow dom and i keep seeing references to this ‘$’ in a selector.

card_mod:
  style: |
    mwc-ripple$: |
      .mdc-ripple-surface::after {
        background-color: yellow !important;
        opacity: 0.5 !important;
      }
      .mdc-ripple-surface--hover::before {
        background-color: blue !important;
        opacity: 0.2 !important;
      }

[dimitri.landerloos]

$ means the object is in a shadow root of another so here is the example:

i cant refer to .mdc-ripple-surface without entering the shadow root of mwc-ripple first.

[iamrufus]

Thanks for this, i think i am slowly getting my head around it. Just out of curiosity how would i target the container vertical which is part of a shadow root below. Its a mushroom template card. On a side note what is the selector you would need to use if you were going through more than 1 shadow root to target an element

Thanks for your help, appreciate it

[dimitri.landerloos]

Should be fairly simple.

You can ignore mushroom-card because you arent going into its shadow root. So you only need to access the shadow root of mushroom-state-item

card_mod:
  style:
    mushroom-state-item$: |
      .container {
        outline: red solid 1px !important;
      }

But if you were accessing multiple shadow roots you would just do this:

card_mod:
  style:
    element1$:
      element2$: |
        final {
          color: red;
        }

Just an example not actually applying to anything.

[iamrufus]

Thank you so much for this, you have explained it really well and i think i actually get it.

One final thing, in the above example where i target mushroom-state-item$, how do i then style anything above it in the DOM tree for example ha-card? As mushroom-state-item$ is directly underneath the style in the yaml code if that makes sense.

[dimitri.landerloos]

Sure. There is a built in function for that in card mod.

So if you wanted to do both it would be with the .: |

This essentially brings you back to style: | but just keep in mind the indentation of this as it needs to be put in the same place as the other things you first put after style:

card_mod:
  style:
    mushroom-state-item$: |
      .container {
        outline: red solid 1px !important;
      }
    .: |
      ha-card {
        background: blue !important;
      }

[iamrufus]

Thats fab thank you so much for your kind help. You’ve made it sound so easy it now makes sense.

I lied this is my final question it just came to my mind, is there a way say in a horizontal stack where you have 4 cards that you want to apply all the same styles to without having to use the card_mod parameter on every card?

[dimitri.landerloos]

Yes you can use yaml anchors like this. But often when you then save and reopen the full card mod code is added rather than the anchor. But if you just want to save copying the same code a bunch of times you can.

Code before a save and reopen.

type: horizontal-stack
cards:
  - type: tile
    entity: sensor.average_gas_kwh
    card_mod: &test
      style: |
        ha-card {
          background: blue;
        }
  - type: tile
    entity: sensor.average_gas_kwh
    card_mod: *test
  - type: tile
    entity: sensor.average_gas_kwh
    card_mod: *test

Code after a save and reopen:

type: horizontal-stack
cards:
  - type: tile
    entity: sensor.average_gas_kwh
    card_mod:
      style: |
        ha-card {
          background: blue;
        }
  - type: tile
    entity: sensor.average_gas_kwh
    card_mod:
      style: |
        ha-card {
          background: blue;
        }
  - type: tile
    entity: sensor.average_gas_kwh
    card_mod:
      style: |
        ha-card {
          background: blue;
        }

If this way that it works is not a good solution for you, i would look into the decluttering card

[cismarine]

Hi,
I am trying to customise custom bar card. Looks like I am on the right track, but can’t get the indicator to move. I have swapped solid color bar with image and got stuck.
here is the code:

- type: custom:bar-card
  entities:
    - entity: input_number.bs9000_sled
  style:
    left: 32.5%
    top: 50.5%
    width: 10%
  direction: up
  height: 600px
  width: 100%
  positions:
    icon: 'off'
    indicator: inside
    name: 'off'
    value: 'off'
    animation: 'on'
    speed: 5
 card_mod:
   style: |
     ha-card {
     }
     .card-content {
     padding: 0 0 0 0px;
     box-shadow: none;
     }
     ha-card {
     background: transparent;
     }
     bar-card-card {
       color: transparent;
       margin: 0px;
     }
     bar-card-background {
       background-color: transparent;
     }
     bar-card-indicator {
       background-image: url('/local/img/bs9000-sled.png');
       background-repeat: no-repeat;
       background-size: 110px 110px
       position: relative;
     }
     bar-card-value {
       margin-right: 0px;
       margin-left: 0px;
       margin-top: 0px;
       margin-bottom: 0px;
     }
     bar-card-backgroundbar {
       background: transparent;
     }
     bar-card-currentbar {
       background: transparent;
       background-repeat: no-repeat;
       background-image: url('/local/img/bs9000-sled.png');
       background-size: 110px 110px
     }

It renders fine:

TIA!

[dimitri.landerloos]

First i would post a version of this that doesnt immediately have bunch of errors due to indentation or duplicate statements:

after fixing the duplicate:

after fixing first indentation:

here is that fixed code.

Code

type: custom:bar-card
entities:
  - entity: input_number.bs9000_sled
style:
  left: 32.5%
  top: 50.5%
  direction: up
  height: 600px
  width: 100%
positions:
  icon: 'off'
  indicator: inside
  name: 'off'
  value: 'off'
  animation: 'on'
  speed: 5
card_mod:
 style: |
   .card-content {
     padding: 0 0 0 0px;
     box-shadow: none;
   }
   ha-card {
     background: transparent;
   }
   bar-card-card {
     color: transparent;
     margin: 0px;
   }
   bar-card-background {
     background-color: transparent;
   }
   bar-card-indicator {
     background-image: url('/local/img/bs9000-sled.png');
     background-repeat: no-repeat;
     background-size: 110px 110px
     position: relative;
   }
   bar-card-value {
     margin-right: 0px;
     margin-left: 0px;
     margin-top: 0px;
     margin-bottom: 0px;
   }
   bar-card-backgroundbar {
     background: transparent;
   }
   bar-card-currentbar {
     background: transparent;
     background-repeat: no-repeat;
     background-image: url('/local/img/bs9000-sled.png');
     background-size: 110px 110px
   }

you should be able to easily move it just by using top, bottom, right, left. you can even use negative values, and i am pretty sure the position: relative; that you have on it isnt even required.

    bar-card-indicator {
      position: relative;
      top: 10px;
    }

[cismarine]

Thanks,
There is no errors on my side. Indentation got screwed when pasted the code.
The width: 10% is part of styling (width of card on screen)
the other width 100% is internal to the card (indicator bar width inside card)
With correct formatting it makes more sense.
It supposed to move by adjusting value of input_number… unfortunately it does not and I am trying to find the problem.

[dimitri.landerloos]

That is not how the indicator works at all. the indicator is only an arrow pointing up or down?

you could move its position based on the value by using a template inside of the top:

so like this for example:

    bar-card-indicator {
      top: {{states('input_number.bs9000_sled') | int}}px;
    }

for reference the indicator is what i have highlighted for you.

[cismarine]

Ok,
I have changed tactics and moved to custom button card with moving entity picture.
Now, my question is… is it possible to convert current position of the picture and use it inside keyframe statement?

[dimitri.landerloos]

Youll need to now ask this question in the button card thread. I believe that button card can use JS which might be better for this usecase but i dont know. I dont use button card at all.

[cismarine]

Thanks for your help Dimitri!

[VanDeFish]

Thank you @dimitri.landerloos & @Krivatri

[metropt]

I’m trying to change the text color based on some temperature ranges. I have already installed the card mode plugin. I followed some examples but can’t make it work.

type: entities
entities:
  - entity: sensor.lumi_lumi_weather_0e402702_temperature
    card_mod:
      style: |
        :host {
          color: {% if states(config.entity) | float <= 20 %} blue {% else %} green {% endif%};
        }
    name: Temperatura
  - entity: sensor.lumi_lumi_weather_0e402702_humidity
    name: Humidade
title: Teste

[Ildar_Gabdullin]

First try to get a red color unconditionally. Remove templates, leave just “color: red;”.
Are you sure you have card-mod installed? Open Code Inspector (or whatever it is called in your browser), check info messages - can you see a message with card-mod version?

[metropt]

Thank you, started with the basic and it didn’t work. Check and there was an error on the resources path.