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

[krth8 (Kristian)]

Hi!

is it possible to rename states?

I have a heater which always have the same state when on and i would like that to say “temperature” instead.

Also the device tracker for pc and laptop would be nice to rename on and off.

cards:
  - type: custom:mushroom-climate-card
    entity: climate.frida
    collapsible_controls: true
    show_temperature_control: true
    hvac_modes: []
    layout: vertical
    card_mod:
      style: >
        ha-card {
          {% if is_state('climate.frida', 'heat') %}
            background: rgba(225, 225, 225, 1);
            --primary-text-color: black;
          {%- else -%}
          {%- endif %}
            
        }        

[image969 (James Scialdone)]

Could someone tell me if there’s a way to hide this padlock with card mod

? I’m using the Lovelock card

[Ildar_Gabdullin]

@image969

this padlock with card mod

1st post → link at the bottom → styles for restriction-card → set transparent color for a corresponding variable

[Ildar_Gabdullin]

@chou

This paragraph uses the card_mod plugin to modify the card row height and the distance between entity names and icons

1st post → link at the bottom → How to manage a row’s height

[image969 (James Scialdone)]

Sorry Im still kinda new to card mod. Would you be able to tell me how to find what the variable would be for the padlock? I’ve tried the right click and inspect, but it just says ha-svg-icon.

[Ildar_Gabdullin]

1. Goto GitHub page for restriction card. Find a section with a list of vars.
2. Find your required var (something like “–xxxxxxxxx-lock-color”).
3. Open a link to a post with styles for this card (earlier gave you a path).
4. Set a needed color (transparent) for this var according to the description.

[image969 (James Scialdone)]

So this appears to be what I need, but it’s saying this needs to be updated in my theme. I’m using mushroom theme. Can I go into that file
And add this?

[Ildar_Gabdullin]

@image969

I’m using mushroom theme

I know nothing about mushrooms.
This is a card-mod thread which helps you to modify CSS properties of card’s elements.
If you are using some custom theme - then you (probably) do not need card-mod to make your “lock” transparent. Just add this variable (with a new value) into you theme’s file. Also, discussing themes is kind of off-topic here.

[image969 (James Scialdone)]

I only brought up themes because I went to where you told me and it said to add that I needed to add it to my theme . I’m completely lost as to what I need to do. Thanks for your help . I’ll keep researching.

[Ildar_Gabdullin]

Seems that you should read about themes first.

There 3 types of changing some card’s elements:

1. Using vars - only for some types of cards & only for some elements - and these vars must be set (to some new, i.e. not default, values) inside some custom theme (instead of default theme) - and these new values will affect ALL cards which use this var. This is all not about card-mod.
2. Using vars - but instead of changing this var inside a custom theme we change it for some particular card (or card’s element) - and we do it by card-mod.
3. Specifying some CSS properties for some particular card (or card’s element) - and we do it by card-mod.

Once again.

1. Take this info.
2. Now you know your needed var.
3. Then you need to use card-mod (see that post) with your found var. Set it to transparent (use examples from my post as basis).

[chou (Jay)]

thank you my problem is solved

type: entities
card_mod:
  style:
    .: |
      #states > div {
          margin: -15px 0px !important;
      }
    .card-content hui-sensor-entity-row:
      $ hui-generic-entity-row $: |
        .info {
          margin-left: 0px !important;
        }
      $:
        hui-generic-entity-row:
          $:
            state-badge:
              $:
                ha-state-icon:
                  $ ha-svg-icon $: |

                    :host {
                        width: 15px!important;
                        height: 15px !important;
                    }
                  $:
                    ha-icon:
                      $:
                        ha-svg-icon:
                          $: |
                            :host {
                                width: 15px!important;
                                height: 15px !important;
                            }
entities:
  - sensor.cpu_speed
  - sensor.cpu_speed

[Ildar_Gabdullin]

@chou

                  $ ha-svg-icon $: |

                    :host {
                        width: 15px!important;
                        height: 15px !important;
                    }

??? using “:host” under some DOM path ???

@chou

      $:
        hui-generic-entity-row:
          $:
            state-badge:
              $:
                ha-state-icon:
                  $ ha-svg-icon $:

Strange choice of placing “$”.
See 1st post → link at the bottom → Important notes about navigation

[chou (Jay)]

Hello, I have another problem, I don’t know how to configure it, can you teach me how to configure it?
I want to configure the isolation of the framework. I don’t know how to write it. This is the configuration I wrote, but it doesn’t take effect

type: entities
entities:
  - entity: sun.sun
card_mod:
  style: |
    :host ::slotted(.card-content) {
        padding: 16px 16px 16px 10px !important;
    }

[chou (Jay)]

This is the UI I configured. I need to modify the isolation of those card frames a lot. Thank you for your help and reply

[image969 (James Scialdone)]

Am I close with what I have?

card_mod:
  style: |
    ha-card {
      restriction-lock-opacity: "0";
    }

[Ildar_Gabdullin]

@image969

    ha-card {
      restriction-lock-opacity: "0";
    }

–restriction-lock-opacity

[Vike_Dragon (Пастухов Константин)]

Greetings!
Please help with the card:

          - type: custom:auto-entities
            show_empty: true
            card:
              type: entities
            filter:
              include:
                - group: group.plant_warn_moisture_scale
                  options:
                    secondary_info: last-changed
                    style: |
                      :host {
                        --paper-item-icon-color:rgb(102,0,202);
                      } 

it is necessary to make it opaque by 92%
For example, this code works :

         - type: entities
            style: |
              ha-card {
                opacity: 92%;
              }  
            entities:
              - entity: input_boolean.warnings_flowers
            state_color: true
            show_header_toggle: false

I tried to insert it in different ways for
style: |
ha-card{
opacity: 92%;
}
but nothing comes out - I ask for help …

[Vike_Dragon (Пастухов Константин)]

Greetings!

Solved by code:

      - type: custom:stack-in-card
        style: |
            ha-card {
              opacity: 92%;
            }   
        mode: vertical
        cards:           
          - type: custom:auto-entities
            show_empty: true
            card:
              type: entities
            filter:
              include:
                - group: group.plant_warn_moisture_scale
                  options:
                    secondary_info: last-changed
                    style: |
                      :host {
                        --paper-item-icon-color:rgb(102,0,202);
                      } 

Thank you all ! Special thanks to Ildar!

[Ildar_Gabdullin]

No need to use stack-in-card. Too cumbersome.
Check this code (note that some of your variants has a wrong indentation):

            type: custom:auto-entities
            show_empty: true
            card:
              type: entities
              card_mod:
                style: |
                  ha-card {
                    color: red;
                    opacity: 12%;
                  }
            filter:
              include:
                - group: group.vacuum_clean_rooms
                  options:
                    secondary_info: last-changed
                    card_mod:
                      style: |
                        :host {
                          --paper-item-icon-color: rgb(102,0,202);
                        }

BTW, Apple devices may not work with “opacity” in “%” - so this variant is more universal:

opacity: 0.12;

[image969 (James Scialdone)]

So I have the lock showing up and functioning properly, but still can’t seem to get the coding correct to hide the lock. I’ve tried with no - and --, I tried with and without quotes. with and without decimal point. Just wondering if there was any more info you could offer. Thanks again for the help

type: custom:restriction-card
restrictions:
  confirm:
    block: true
card_mod:
  style: |
    ha-card {
      -restriction-lock-opacity: "0";
    }