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

benjani85 · January 30, 2023, 4:42am

I have a strange issue with the weather card. I can’t get the text in top part of the card to resize on my tablet. After applying styles, in a browser it shows fine but on my iPad when I refresh the dashboard it appears in the correct size for a split second but then gets resized back to the default size as if no styles have been added. It only seems to happen to the conditions and temperature text. All other text such as forecast resize without any issue. Anyone got any ideas?

HA_n00b · January 30, 2023, 11:27am

Anyone know how to change the font size of the header section of ApexCharts?

I want to decrease the font size of those values (numbers) shown here. They are part of the header, which is part of HA, and not ApexChart. So, I think card-mod would be able to change that.

HA_n00b · January 30, 2023, 6:12pm

Well, at least this changed something

Anashost · January 30, 2023, 9:41pm

Hey,
Does installing card-mod makes the dachboard to load slowly/laggy?
thats what happend when i installed it, when i remove the integration everything go back to normal. any idea if this is normal or is there a way to fix it!
(even with no card mod styles it still makes dachboard laggy)

vaderag · January 31, 2023, 6:23pm

Ildar_Gabdullin:

Changing a padding above a badge:

      - entity: sensor.cleargrass_1_co2
        name: normal padding
      - entity: sensor.cleargrass_1_co2
        name: changed padding
        style: |
          :host {
            --ha-label-badge-padding: 20px;
          }        
      - entity: sensor.cleargrass_1_co2
        name: normal padding

Can anyone help - I would like to change the padding at the top, but this seems to affect all of the padding, not just the top

Additionally, I am finding if I scale the badge, per here, the text on the label stays left aligned - is there any way to center it?

Thanks

Ildar_Gabdullin · January 31, 2023, 6:44pm

Actually, this is not exactly a padding ABOVE a badge - it is AROUND a badge.
The “padding” property accepts 1, 2, 3, 4 parameters to manage all 4 paddings separately - check CSS docs.

Ildar_Gabdullin · January 31, 2023, 6:49pm

It was mentioned - “Note that the scaling does not change a name’s width.”
Try combining with with styles for the “title” element.

vaderag · February 1, 2023, 11:23am

Thanks - got the padding sorted but can’t seem to find how to do the label

I can see

              --ha-label-badge-title-font-size: 7px;
              --ha-label-badge-title-width: 48px;

mentioned above and they successfully work, but I see no mention of padding for the element

I tried
--ha-label-badge-title-padding
to no avail

Apologies if I’m missing something …

Ildar_Gabdullin · February 1, 2023, 12:43pm

Some styling may only be solved by a directs access to CSS properties, not by changing theme variables. May be this is your case. Open Code Inspector and experiment.

vaderag · February 1, 2023, 1:06pm

In inspector, if I make this change then the alignment does seem to automatically center (it changes some of the other padding too:

If I do
then it will also center it

What I don’t understand tho is how I get either of those added to my card code

type: custom:badge-card
badges:
  - entity: person.vaderag
    card_mod:
      style: |
        :host {
          --label-badge-red: {% if is_state('person.vaderag', 'home') %} #5555FF {% else %} #df4c1e {% endif %};
          --ha-label-badge-font-size: 28px;

This is how I’m doing it right now - how would i add that code?

booyakafoo · February 1, 2023, 11:16pm

Hello. Excuse my attempt to describe this. I don’t fully understand CSS or the terms to properly talk about it, but I’m hoping someone might be able to assist me with this. I have a vertical stack card configuration. At the top of the stack I have a template sensor. I made the font bigger with card mod but the font is clipped/cut off. I inspected the page and drilled down to get down to the div section where the text of my sensor exists. On the right side in the style tab there is an overflow property that when I unselect the sensor texts shows properly. So I suspect I need to somehow manipulate that with card mod but I am not having luck messing around with this.

I copied the JS path and used card mod helper to get this which is what I clicked through to get down to the sensor text. It shows the path but I’m at a loss on what to do next. Any assistance would be greatly appreciated. Thanks!

“#view>hui-view>hui-masonry-view$#columns>div>hui-vertical-stack-card$#root>hui-glance-card$ha-card>div>div$div”

type: vertical-stack
cards:
  - show_name: false
    show_icon: false
    show_state: true
    type: glance
    style: null
    entities:
      - entity: sensor.traffic_meter
    state_color: false
    card_mod:
      style: |
        ha-card {
        font-size: 35px;
        }

CDRX2 · February 2, 2023, 5:58am

You basically have two choices, either make the card bigger or allow the overflow to show (e.g. let the text go outside of the boundaries of the div/card). I’d go with the former, so try to add height: 45px to your code. If it doesn’t work, try with !important.

Mariusthvdb · February 2, 2023, 12:37pm

trying so remove an entity completely from a glance card, to fake a fake card, I just learned instead of the 0px font-size, we can also use display: none;

            card_mod:
              style: |
                state-badge {
                  display: none;
                }
                .name {
                  display: none;
                }
                :host div:not(.name) {
                  display: none;
                }

the above is better than using

          - entity: sun.sun
            name: ' '
            icon: ' '
            show_state: false
            tap_action:
              action: none

because it actually removes the said properties, so the cursor doesnt respond to that.
maybe we can even hide the entity all together in a single mod, have to figure that out yet

zvikag · February 2, 2023, 2:48pm

Hi
Trying to change the background of my icon based on the state of the device .
I changed the color of the icon and the background but but not sure how to change it’s icon background
Here is my code

card_mod:
  style: |
    ha-card {      
       background-color:{{'orange' if is_state('binary_sensor.XXX', 'on') else 'white'}};
       --card-mod-icon-color: {{'white' if is_state('binary_sensor.XXX', 'on') else 'black'}};
       --primary-text-color: {{'white' if is_state('binary_sensor.XXX', 'on') else 'black'}};
       --secondary-text-color: {{'white' if is_state('binary_sensor.XXX', 'on') else 'grey'}};
    }

Thanks

Mariusthvdb · February 2, 2023, 3:00pm

this is what I have on some of my fans:

      card_mod:
        style:
          div#wrapper: |
            state-badge {
              {% if is_state(config.entity,'on') %}
                animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
              {% endif %}
            }
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }
            @keyframes colorize {
              0% {
                background: steelblue;
              }
              100% {
                background: aquamarine;
              }
            }

zvikag · February 2, 2023, 3:08pm

Thanks but I have no idea how to use it
Isn’t there an attribute such as
–card-mod-icon-background-color ?

Mariusthvdb · February 2, 2023, 3:10pm

this is how you use it…

you can strip all the animation and only use background in that template

          card_mod:
            style:
              div#wrapper: |
                state-badge {
                  {{'background: red' if states(config.entity) == 'off' 
                     else 'background: green'}};
                }

booyakafoo · February 2, 2023, 6:43pm

I should have mentioned I did try that and the box gets bigger but the font stays exactly the same.

CDRX2 · February 2, 2023, 6:59pm

Ok, so if I understand correctly, you don’t want the card to get bigger, but have the text fill it entirely, like in your screenshot?

If so, have you tried overflow: visible ?

Mariusthvdb · February 2, 2023, 10:03pm

trying to mod a glance cards border and use that card in a grid, there is the odd situation that using a border-top, simply add the height of the border to the picture-glance and takes the grid out of proportion.

I tried to make the top order be inline, but could not find the correct css for that. This does in fact create inline border, but only left and right…

      - type: picture-glance
        entity: light.laundry_ceiling
        state_filter:
          'off': grayscale(72%)
        image: /local/images/areas/bijkeuken.jpg
        aspect_ratio: 100%
        tap_action:
          action: navigate
          navigation_path: /ui-sub-views/bijkeuken
        hold_action:
          action: toggle
        entities:
          - entity: sensor.laundry_sensor_temperature
          - entity: sensor.laundry_sensor_illuminance
        card_mod:
          style: |
            ha-card {
              border-inline: {{'medium solid red' if is_state('binary_sensor.laundry_sensor_motion','on')
                      else 'none'}};
            }

would any of you modders around be able to help me out to either get the inline border on all sides, or only on the top border please?

thx