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

[Ildar_Gabdullin]

@peteDDD

And tougher as it has changed over time so some things I read are too outdated to still work

What do you mean by “outdated”? The only outdated thing could be an absense of ‘card_mod” keyword in some examples.

[Gutek]

@Ildar_Gabdullin

Check again my recommendation, you composed a variable (which may not work anyway) in a wrong way.

I was trying directly Your command, but it didn’t work as well.
––state-lawn_mower-docked-color: cyan
Then I played with modifying it to match lawnmower name.

[Ildar_Gabdullin]

Then see my 1st post related to this issue - this domain seems to be not themeable.

[rog889]

Hi,

I need help customizing the badge icon size and font size for the temperature sensor values in Badges. Additionally, I’m also trying to change the font size of the temperature control bar in the “Climate” card or the Thermostat card.

Can anyone please help shed some lights on the above? Much appreciated.

Thanks

[Ildar_Gabdullin]

@rog889

in Badges.

If you mean “view badges:
1st post - fantastic link - badges 2024.8
There are 2 methods available (mod-card, hacked card-mod), choose any.

[Ildar_Gabdullin]

@rog889

Additionally, I’m also trying to change the font size of the temperature control bar in the “Climate” card or the Thermostat card.

Suggest to use posted examples as a starting point and TRY yourself, then post your attempts.

[rog889]

Thanks for your reply. I tried to change the state font size and it doesn’t change or enlarge the font size. Can you please shed some lights?

type: heading
heading: New section
heading_style: subtitle
badges:
  - type: entity
    entity: sensor.bedroom_rounded_temp
    card_mod:
      style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                $: |
                  .badge-container .label-badge .value {
                    color: red;
                    font-size: 88px;
                  }    

[LiQuid_cOOled]

I would suggest reading up on using Chrome’s element inspector. There are multiple ways to attack mods.

Ildar’s guide is extremely robust and offers an enormous amount of information. It’s impossible to cover all aspects, so educating yourself is required.

type: heading
heading: New section
heading_style: subtitle
badges:
  - type: entity
    entity: sensor.bedroom_rounded_temp
card_mod:
      style: |
          ha-card {
              --secondary-text-color: blue !important;
              --ha-heading-card-subtitle-font-size: 40px !important;
              --ha-heading-card-subtitle-line-height: 41px !important;
                  }

[rog889]

Thanks for the reply. What I wanted to change is the bedroom’s sensor temperature value reading, not the “New Section” heading. Take a look at my another attempt. The 74.4F didn’t change to red or font size didn’t change. Not sure which part of my code is experiencing problem. TIA.

For example:

type: heading
heading: New section
heading_style: title
badges:
 - type: entity
   show_state: true
   show_icon: true
   entity: sensor.outdoor_ambient_rounded_temp
card_mod:
 style:
     ha-state-label-badge:
       $:
         ha-label-badge:
           $: |
             .badge-container .label-badge .value {
               color: red;
               font-size: 48px;
             }        

[rog889]

@LiQuid_cOOled

ha-heading-card

Never mind. I found this code is working:

type or paste code heretype: heading
heading: New section
heading_style: title
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.outdoor_ambient_rounded_temp
card_mod:
  style:
    .badges hui-entity-heading-badge $: |
      ha-state-icon {
        --mdc-icon-size: 20px;
      }
      state-display {
        font-size: 150%;
      }
    .: |
      .type-heading .container .content {
        font-size: 100%;
      } ```

[LiQuid_cOOled]

type: heading
heading: New section
heading_style: subtitle
badges:
  - type: entity
    entity: sensor.living_room_temperature
card_mod:
     style: 
         hui-entity-heading-badge$:
          ha-heading-badge$: |
           .heading-badge {
            --icon-color: yellow !important;
            --mdc-icon-size: 50px !important;
            font-size: 50px  !important;
            color: red !important;
            }        

[rog889]

Oh. Yours is even better! It’s exactly what I want to achieve. Thanks again for your help!!!

[Ildar_Gabdullin]

Correct your terminology: these are not “badges”, these is a Heading card.

[rog889]

Got it! Didn’t know I had that mixed up. Thanks.

Now, I am looking into “Badges” (I hope it got it correctly this time). I was referring to 🔹 Card-mod - Add css styles to any lovelace card - #1310 by Ildar_Gabdullin. But none of the card_mod code works. Do I need to put some patch before using the card_mod code?

[Ildar_Gabdullin]

Depends on what badges you need.
pre 2024.8: that thread + a sibling thread about “how to style old badges after HA 2024.8”.
after 2024.8: already gave you a path to 2 possible methods

[rog889]

Thanks for the suggestion. I attempted one of the workarounds, which involves replacing the strings in card-mod.js. Finally, it worked with all your code examples. However, it completely changed the style and appearance of the current native HA’s badge style and design, which I prefer. I was hoping to simply increase the font size while preserving the native badge design. Is it possible to use your workaround but not alter the native badge style and design?

Thanks

[Ildar_Gabdullin]

@rog889

I attempted one of the workarounds, which involves replacing the strings in card-mod.js. Finally, it worked with all your code examples. However, it completely changed the style and appearance of the current native HA’s badge style and design, which I prefer

This “replacing string” method is purposed to make card-mod compatible with a specially added “type” line to “turn” new badges into old badges. This replacing does NOT affect new badges.

[dsaul]

How can I fix that. Im decrease the hight but text is not aligned in relation to the box. I tried padding and margin, but the whole thing moves. THank you!

[Ildar_Gabdullin]

Set zero paddings for “.card-content”.

[dsaul]

Thank you! I tried .content and was not working, .card-content did the trick. Appreciate!