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

[arganto]

First remove the | after style:

Then look if it is applied. If yes but not taken into account, add !important. If no, you have to go into the parent shadow root as well. hui-energy-date-selection-card, in this case:

    card_mod:
      style:
        hui-energy-date-selection-card:
          $:
            hui-energy-period-selector:
              $: |
                div.period {
                  justify-content: center;
                }

Then agin look if it is applied. If yes but not taken into account, add !important.

[Dave888]

Hi, does anyone know if there is anyway to overwrite a value thats already been coded with !important ?

I have the below (see green circle), where I am trying to replace the --mdc-icon-size: 15px !important line. However, I can see that my injected code isn’t taking affect - I assume because the line has !important, does anyone know a way around this?

Below is a screenshot of the inspect code, and my current lovelace code.

Thanks!

card_mod:
  style: |
    ha-card {
    .eventIcon {
      --mdc-icon-size: 20px !important;
    }

[Mariusthvdb (Marius)]

guess this is going to relieve us from all the box-shadow: none; mods

Remove box shadow for ha-card

[usercr70]

Thank you so much. I’m going to test it.
Much appreciated.
I’ll let you know. Thanks again

[KyleBrown0221]

Original post found here: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #3535 by KyleBrown0221

If anyone can help that would be amazing!

My current problem is how to “link/reference” color control and temperature control with my-slider-v2 entity? Added points for the slider to match the same color temp/color active.

Here’s what I’m trying to achieve as one card:

and then ultimately end up with something like this:

But what I think what would be better and maybe more realistic is this or the same above but stacked onto each other:

What I currently have:

Everything is perfect but the slider just controls brightness level and nothing else.

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.lr_light_group
        use_light_color: true
        show_brightness_control: false
        show_color_temp_control: false
        show_color_control: false
        name: Living Room Lights
        collapsible_controls: true
      - type: custom:mushroom-entity-card
        entity: light.lr_light_group
        fill_container: false
        tap_action:
          action: toggle
        icon: ''
        primary_info: name
        name: Living Room Switches
        layout: horizontal
        secondary_info: state
  - type: custom:my-slider-v2
    entity: light.lr_light_group
    vertical: true
    styles:
      card:
        - height: 100px
        - width: 35px
      container:
        - border-radius: 12px
      track:
        - background: >
            [[[ if (entity.state == "off") return
            "rgba(var(--mush-rgb-disabled), 0.2)";
             else return "rgba(var(--mush-rgb-amber), 0.2)";
            ]]]
      progress:
        - background: >
            [[[ if (entity.state == "off") return
            "rgb(var(--mush-rgb-disabled))";
             else return "rgb(var(--mush-rgb-amber))";
            ]]]      
      thumb:
        - width: 0px
    card_mod:
      style: |
        ha-card {
          padding: 12px 12px 12px;
        }
      card_mod:
        style: |
          ha-card {
            height: 140x;
          }

Things that are left I’m still struggling with:

1. Making the slider match the current color state
2. “linking” the slider with the temp + color controls

I think problem 1 will be solved if we can solve problem 2 hopefully.

Other Notes:
3. Not a problem right now but there’s a lot of negative space on the right of the slider card based on this config, I’d like to clean that up after I get the 2 problems fixed above
4. Add in the pop-up cards for individual control like in my “side by side” code above.

[janiv (Janiv Ratson)]

I have a card per room. Its root is vertical-stack.
How do I add a border to my vertical-stacks?
Thanks

[Eisenhorn]

Hi, I’m trying to increase the font size of the todoist-item-text via card-mod. I can change the color of all the text in todoist-card and change the font size of the header via the following code:

type: custom:todoist-card
card_mod:
  style: |
    ha-card {
      color: red;
      --ha-card-header-font-size: 250%;
    }
only_today_overdue: true
entity: sensor.to_do_list
show_item_delete: false
show_item_add: false

However, I’m unable to figure out what the proper syntaxis is for the item-text. Any suggestions would be very welcome. Below is a screenshot from the developer console with the target of font size modification being the second highlight.

[MrThiemann]

I have a type:entities and would like to remove the name here.
can somebody help me?

type: entities
entities:
  - entity: input_datetime.alarm_time
    icon: none
    name: none
show_header_toggle: true
card_mod:
  style:
    '#states div':
      hui-input-select-entity-row$:
        hui-generic-entity-row$: |
          .info {
           display: none;
              }

[Gerylive]

Maybee this is not what you want but i do this when i dont want to have a name field.

type: entities
entities:
  - entity: input_datetime.alarm_time
    icon: none
    name: ' '

[spacezmoney]

Hello, I am trying to reduce the size of text as shown in my picture ( red arrow )

as shown on left, i have colored the words to reduce in red. However, the words" Link Qualitty" and " battery" are not colored in red.
May i know how do i reduce the size of these title?

[Ildar_Gabdullin]

Guys, check the 1st post → link at the bottom. All these issues like “font size for multiple-entity-row”, “hide name” etc were already discussed.

[MrThiemann]

oh that’s fine! Thank you

i found this solution, too… but that makes the map bigger in height… and I don’t know how to change this.
change yes, but not in combination with an existing card_mod-style

type: entities
entities:
  - entity: input_datetime.test
    name: test
    icon: none
show_header_toggle: false
card_mod:
  style:
      hui-input-datetime-entity-row $ hui-generic-entity-row $: |
        .info {
          display: none;
        }

[Mariusthvdb (Marius)]

needed a few extra entities in my Glance card

type: picture-glance
title: Vijverpompen
image: /local/images/areas/vijver.png
state_filter:
  'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
  - sensor.vijver_thermometer_temperature
  - sensor.pond_buiten_sensor_temperature
  - binary_sensor.vijverpompen
  - binary_sensor.vijverpompen_alterneren
  - binary_sensor.vijver_donker_koud
  - switch.vijverpomp_links
  - switch.vijverpomp_rechts
  - input_boolean.vijverpompen_toggle_override
card_mod:
  style: |
    .box ha-state-icon {line-height: 0px;}
    .box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon
      {
        {% if is_state('switch.vijverpomp_links','on') %}
          animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
        {% endif %}
      }
    .box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon
      {
        {% if is_state('switch.vijverpomp_rechts','on') %}
          animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
        {% endif %}
      }
    @keyframes rotation {
     0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }
    @keyframes colorize {
      0% {color: var(--text-color-off);}
      100% {color: aquamarine;}
    }

and this shows perfectly fine on Desktop:

however, on mobile the icons are not resized/moved, so the right side icons overflow the card:

I couldn’t find anything in the core docs on a max number entities, so, figured maybe this has to do with the card_mod? taking that out doesnt make any difference, so probably a core card thing.

shortening the title helps:

But I would rather squeeze the icons a bit… question here would be: can we auto-fit those entities using card-mod maybe?

[Mariusthvdb (Marius)]

btw, how can we change an icon in the bottom bar? I tried the path to

ha-icon-button > ha-state-icon").shadowRoot.querySelector(“ha-svg-icon”)

with:

card_mod:
  style: |
    .box ha-state-icon {line-height: 0px;}
    .box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon
      {
        {% if is_state('switch.vijverpomp_links','on') %}
          animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
        {% endif %}
      }
    .box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon
      {
        {% if is_state('switch.vijverpomp_rechts','on') %}
          animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
        {% endif %}
      }
    .box div:nth-child(3) div:nth-of-type(3) ha-icon-button ha-state-icon ha-svg-icon 
      {
        {% if is_state('input_boolean.vijverpompen_toggle_override','on') %}
          mdi:toggle-switch
        {% else %}  mdi:toggle-switch-off;
        {% endif %}
      }

without luck.

[rog889]

Hi,

I am struggling to make this card work. I would like to make “Garage Door” and “Laundry Lock” (please see picture below) turn red or with some animation like ‘breathing’ or “glowing” if the “Garage Door” is not closed or the “Lock” is not locked.

I have tried dozen examples people posted here past 2 weeks. Unfortunately, none of them worked. Can someone please give me a pointer with post with example would actually work? There are thousands of post here. Finding the working one was almost impossible for me. It would be super helpful if someone can point me to an example with code that actually works.

Thanks

[Ildar_Gabdullin]

@rog889

I would like to make “Garage Door” and “Laundry Lock” (please see picture below) turn red or with some animation like ‘breathing’ or “glowing” if the “Garage Door” is not closed or the “Lock” is not locked.

1st post → link at the bottom:

• styles for Glance card;
• animation for Entities card - create a similar animation for the Glance card by yourself.

[rog889]

Oh. Thanks. Didn’t see that link. Will give another try! Thanks again!

[Ildar_Gabdullin]

@Mariusthvdb

btw, how can we change an icon in the bottom bar?

@Mariusthvdb

    .box div:nth-child(3) div:nth-of-type(3) ha-icon-button ha-state-icon ha-svg-icon 
      {
        {% if is_state('input_boolean.vijverpompen_toggle_override','on') %}
          mdi:toggle-switch
        {% else %}  mdi:toggle-switch-off;
        {% endif %}
      }

Wrong path and no property specified.
Try this:

    type: picture-glance
    title: vars
    image: /local/images/test/blue_low.jpg
    entities:
      - entity: binary_sensor.night
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(2) div:nth-child(2) {
          --card-mod-icon: mdi:microphone-outline;
        }
        .box div:nth-child(2) div:nth-child(3) {
          --card-mod-icon: mdi:microphone;
        }
        .box div:nth-child(3) div:nth-child(1) {
          --card-mod-icon: mdi:microphone-message;
        }
        .box div:nth-child(3) div:nth-child(2) {
          --card-mod-icon: mdi:microphone-message-off;
        }
        .box div:nth-child(3) div:nth-child(4) {
          --card-mod-icon: mdi:microphone-minus;
        }

[usercr70]

Hi arganto,
sorry for the delay in my reply and thank you so much again for your help.
I tried to apply your suggested code but it didn’t work.
I will look into the issue again trying to understand better how card-mod works.
Have a great day

[Ctek (Bogdan)]

@deltabert

have never done this bef

Great job!
Make it as option to the default card, and make a push req to Git; So it can be available with the next release of the card.