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

After updating to 2023.9 the styling of my customized tile card brightness slider is broken. I’ve been digging around the DOM to find a root cause but not having any luck.

In short: Before the update, the slider element filled the surrounding container. After the update, it shrank back down to the default height. I can’t seem to make it budge. Any ideas?

Not a dev, so be gentle :smiley: card config is pasted below

image

features:
  - type: light-brightness
type: tile
entity: light.main_lights
show_entity_picture: false
tap_action:
  action: none
color: white
vertical: false
icon_tap_action:
  action: toggle
view_layout:
  grid-area: a2
card_mod:
  style:
    hui-light-brightness-tile-feature$: |
      ha-control-slider {
        border-radius: 16px !important;
        --control-slider-border-radius: 10px !important;
        --control-slider-background-opacity: 0 !important;
        --control-slider-thickness: 75px !important;
      }
      .container {
        height: 100% !important;
        margin: 0px !important;
        padding: 4px !important;
        border: 0px solid var(--background-color) !important;
        border-radius: 16px !important;
      }
      .hui-tile-card {
        display: none;
      }
    .: |
      ha-card {
        height: 100% !important;
        border: 3px solid var(--text-color) !important;
        border-radius: 16px !important;
        background: var(--card-background-color) !important;
        overflow: visible !important;
        padding: 0px !important;
        margin: 0px !important;
        --card-margin: 0px !important;
        --layout-card-margin: 0px !important;
        --masonry-view-card-margin: 0px !important;
      }
      ha-card .tile {
        display: none;
      }
      ha-card .container {
        display: none;
      }

Does this help you get any closer?

card_mod:
  style:
    hui-tile-features$:
      hui-light-brightness-tile-feature$:
        ha-control-slider$: |
          .slider {
            border-radius: 16px !important;
            --control-slider-border-radius: 16px !important;
            --control-slider-background-opacity: 0 !important;
            --control-slider-thickness: 75px !important;
          }
        .container: |
          :host {
            height: 40px !important;
            padding: 0px !important;
            border: 0px solid var(--background-color) !important;
            border-radius: 16px !important;
          }
    .: |
      ha-card .tile {
        display: none;
      }
      ha-card .container {
        display: none;
      }
      ha-card {
        height: 100% !important;
        border: 3px solid var(--text-color) !important;
        border-radius: 16px !important;
        background: var(--card-background-color) !important;
        overflow: visible !important;
        padding: 0px !important;
        margin: 0px !important;
        --card-margin: 0px !important;
        --layout-card-margin: 0px !important;
        --masonry-view-card-margin: 0px !important;
      }

I figured out a way to change the main icon!

Change the icon in the card itself. Then it is a ha-icon rather than an ha-svg-icon and you can then change it like this with card mod for each state.

type: tile
features:
  - type: alarm-modes
    modes:
      - armed_home
      - armed_away
      - armed_night
      - armed_vacation
      - armed_custom_bypass
      - disarmed
entity: alarm_control_panel.security
icon: mdi:account
card_mod:
  style:
    hui-tile-features$:
      hui-alarm-modes-tile-feature$:
        ha-control-select$: |
          #option-armed_home {
            --control-select-color: blue;
          }
          #option-armed_away {
            --control-select-color: red;
          }
          #option-armed_night {
            --control-select-color: lightblue;
          }
          #option-armed_vacation {
            --control-select-color: yellow;
          }
          #option-armed_custom_bypass {
            --control-select-color: orange;
          }
          #option-disarmed {
            --control-select-color: black;
          }
    ha-tile-icon$: |
      ha-icon {
        {% if states(config.entity) == 'armed_home' %}
          color: blue !important;
          --card-mod-icon: mdi:shield;
        {% elif states(config.entity) == 'armed_away' %}
          color: red !important;
          --card-mod-icon: mdi:shield-account;
        {% elif states(config.entity) == 'armed_night' %}
          color: lightblue !important;
          --card-mod-icon: mdi:moon-waning-crescent;
        {% elif states(config.entity) == 'armed_vacation' %}
          color: yellow !important;
          --card-mod-icon: mdi:shield-airplane
        {% elif states(config.entity) == 'armed_custom_bypass' %}
          color: orange !important;
          --card-mod-icon: mdi:mushroom;
        {% elif states(config.entity) == 'disarmed' %}
          color: black !important;
          --card-mod-icon: mdi:lock-off-outline;
        {% endif %}
      }
      .shape::before {
        {% if states(config.entity) == 'armed_home' %}
          background-color: blue !important;
        {% elif states(config.entity) == 'armed_away' %}
          background-color: red !important;
        {% elif states(config.entity) == 'armed_night' %}
          background-color: lightblue !important;
        {% elif states(config.entity) == 'armed_vacation' %}
          background-color: yellow !important;
        {% elif states(config.entity) == 'armed_custom_bypass' %}
          background-color: orange !important;
        {% elif states(config.entity) == 'disarmed' %}
          background-color: black !important;
        {% endif %}
      }
2 Likes

Some minor thing I thought. Solvable in a few minutes. Unfortunately did not happen in my case.

I would like to have the same card height for several cards. For most I managed, unfortunately for the entities card (in combination with the custom slider) it does’t work out as hoped.

I would like to vertically align the one single custom slider in the entities card. Now I get something like this:
image
But I prefer to have the slider vertically centered (in the entities card).

What I tried (among lots of other stuff):

type: entities
entities:
  - type: custom:slider-entity-row
    entity: light.chillroom_light
    full_row: true
    hide_state: true
card_mod:
  style: |
    ha-card {
      height: 50px !important;
      vertical-align: center !important;
      }

Is it possible what I would like to achive? What do I need instead of “vertical-align: center”

took me a long time to get back to it, but thank you very much for helping me change the colour of titles in my grid cards, it works perfectly

Example of using card-mod to display values on a Map card:
link
изображение

Update 15.10.23: this mod is not needed since 2023.10 - a possibility of displaying states was added (discussion, PR)

2 Likes

Use the browser tools to see what other paddings and margins there are. That slider is probably vertically aligned within it’s own bounding box, but the box itself may not be.

Hi, I have the follow HTML.
I’ve been trying to modify it to remove the box-shadow inside .color-circle but no luck. I’m very new to card-mod.

image

I’ve tried so many things though mostly blindly. I’ve been able to use card-mod to modify other stuff but not to remove this darn shadow.
For context, this is an entities card containing custom rgb card which by default adds these shadows.
The entities card is inside a stack-in card but I don’t know if that matters.

      - type: entities
        show_header_toggle: false
      #showing all the random stuff I've tried, mostly throwing stuff at the wall admittedly
        style: |
          rgb-light-card {
            box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
          }
          type-custom-rgb-light-card {
            box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
          }
          .color-circle {
            transition: none;
            box-shadow: 0 0px 0px 0px rgba(0,0,0,0);
          }
          ha-card {
            border: none; #this bit works great and I need it
            margin-top: -15px; #this also works great 
          } 
          rgb-light-card:
            $: |
              .color-circle {
                color: green;
                border-radius: 10%;
              }
        entities:
          - type: custom:rgb-light-card
            entity: light.bath_1
            justify: between
            size: 30
            colors:
              - type: call-service
                service: scene.turn_on
                service_data:
                  entity_id: scene.living_room_natural_light
                icon_color: ... etc

Not sure if this will help for context

Try like this instead:

type: entities
show_header_toggle: false
entities:
  - type: custom:rgb-light-card
    entity: light.lounge_main_light
    justify: between
    size: 30
    colors:
      - type: call-service
        service: scene.turn_on
        service_data:
          entity_id: scene.living_room_natural_light
        icon_color: ... etc
    card_mod:
      style: |
        .color-circle {
          box-shadow: none;
        }
1 Like

thank you very much @dimitri.landerloos !
this did it!
additionally, i had to move the original style below this one and now both are active (removed border and margin adjustment for the entire RGB card + removal of shadows for individual rgb icons)
thanks again!

1 Like

Example of using card-mod:
How to set a 0 lower bound for Y-axis in history-graph
link

default:
изображение

modded:
изображение

Warning: this mod is not needed since 2024.2 (PR)

3 Likes

I saw the cool post with many, many great examples by Ildar, but are there also example of how css templates can be/were used in HA?

I would like to play around with some of the css style templates available on codepen but I am not sure how to apply them.
I can do simple things like adjust padding, border etc.
But not sure about how to test there kinds of css styles in HA:

quick ask: does this no longer work?

  - type: custom:fold-entity-row
    head:
      type: section
      label: Test Label
      card_mod:
        style: |
          .label {
            margin-left: 0px;
          }

might have been going on for some time, but now that I wanted to move those to a secret and paste them from there, I notice it does nothing. bringing it back as posted above doesnt either…

which is explained by:

Scherm­afbeelding 2023-09-18 om 08.17.40

seems we need to add the !important now…

      card_mod:
        style: |
          .label {
            margin-left: 0px !important;
            color: red !important;
          }

wonder what brought that about, and when

somehow I feel bad about adding !important, to force an override, and fear it takes even more of the system.
I’ve only a few card_mods using !important, so it is quite the surprise this long-standing mod now also needs it.

Similar:
How to set a 0 lower bound for Y-axis in statistics-graph:
link

default:
изображение

modded:
изображение

2 Likes

Is it possible to add a header image to a card that does not support it?

  1. Place you card inside custom:stack-in-card.
  2. Add any card which supports images like Markdown as the 1st card.

Hello and please…

I need to apply those .handle etc changes only to ha-card with class “type-thermostat”. Is it possible?
image

Complicated.
1st post → link at the bottom → themes → using classes

Could someone help me out on the
Energy source table?
I’m not sure if it’s possible,
But was trying to get rid of the background
Cq black color…then wanted it transparent
Did try with help of this card_mod
But ill gues i got not the correct code
after reading up here some code…
Thank you…

I am new to ccs styles and having a challenge identifying the primary an secondary text attributes. I would like to change font characteristics. I have attempted with the code below using card-mod. I have added the following command --primary-font-size: 10px !important; with no effect on the text font size. This is a tile card. I have had no issues with the custom button card changing the font size and color. Appreciate any assistance or guidance.

tile_card

      - features:
          - type: light-brightness
        type: tile
        entity: light.breakfast_chandelier
        card_mod:
          style: |
            ha-card
              {
              --primary-font-size: 10px !important;
              border-radius: 2px;
              font-family: 'Verdana';
              border: solid 3px;
              border-color: rgba(82, 144, 195, 1);
              height: 115px !important;
              width: 269px;
              background: rgba(0, 0, 0, 1);  
              }
        vertical: false
        show_entity_picture: false
        icon: mdi:chandelier