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

[nsnui0 (Yotam Madmon)]

Hi Everyone!
I’m trying to make my presence sensor card highlight in red whenever motion was detected.
I tried using card-mod styles and read endless topics but the most I got was changing the background color when on (code is below).
the specification should be:
when off: Normal
when on: card + icon background turn red (can be different types of red) and all text including the icon changes to white.
I’m using a minimalist UI generic card for the sensor (do mind changing it if you have a better solution)

Many thanks in advance!

type: 'custom:button-card'
template: card_generic
entity: binary_sensor.study_ps
card_mod:
  style: |
    ha-card { 
      background-color: {{ '#FFAAAA' if is_state('binary_sensor.study_ps', 'on') }};
    }

[arganto]

@nsnui0

custom:button-card

For this, you don’t need card_mod to reach your targets. Use the stylings from custom:button-card. I would suggest to use a thread related to this card for help.

[Mariusthvdb (Marius)]

since apparently we have no other way to show a button entity with a direct option to execute (not even the button card executes the button directly without further config) I tried to mimic the tile card like this:

  - type: entities
#     card_mod:
#       style: |
#         ha-card {
#           padding: 0px;
#         }
    entities:
      - entity: button.screen_keuken_my_position
        card_mod:
          style:
            hui-generic-entity-row:
              $: |
                .info.pointer.text-content {
                  font-weight: bold;
                }

which comes close:

but as you can see the height of the entities card is too high, compared to the surrounding the cards.

I tried many options, but cant find a way to decrease the height. Tried setting negative padding to the card, or even to the entity, but nothing changes.

Can we not do that? please have a look?

I did rather have a chip, but even then we need a lot of config mentioning the entity twice, and still need some extra card_mod to get rid of a padding…

so for now resort to this entity card, but need it to be less tall

update

nvm, found it:

  - type: entities
    card_mod:
      style: |
        .card-content {
          padding: 12px 16px;
        }
    entities:
      - entity: button.screen_keuken_my_position
        card_mod:
          style:
            hui-generic-entity-row:
              $: |
                .info.pointer.text-content {
                  font-weight: bold;
                }

now only to find the option to show state (last-triggered) as secondary info… (and maybe position the card content a bit better…grr, why dont these cards simply behave correctly in the frontend)

making that left/right padding 10 seems to help:

though the icon still looks lopsided.

[tbrasser (Thomas Brasser)]

I’ve been porting my “hard-coded” card_mod css to a theme by making use mostly of classes. But I’ve got a few questions:

• I’ve also seen other techniques of targeting specific domains etc, instead of classes, any place with some examples of that together with themes?
• How do you target :host with a class?
• How do you target shadowroot stuff with a class?

For example, how would I ‘translate’ this:

      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-orange)) {{ ((states(config.entity) | as_datetime | as_local - now()).days + 1) * (100 / 3) }}% 0%, var(--card-background-color) 0% 100%);
            }
            .shape:after {
              content: "";
              height: 100%;
              width: 100%;
              position: absolute;
              border-radius: 50%;
              background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
            }
          .: |
            mushroom-badge-icon {
              top: 30px;
            }

I currently got the non-shadowroot part targeting the “reminder” class, but not getting the first part working selectively:

card-mod-card-yaml: |
    mushroom-shape-icon$: |
      .shape {
        background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-orange)) {{ ((states(config.entity) | as_datetime | as_local - now()).days + 1) * (100 / 3) }}% 0%, var(--card-background-color) 0% 100%);
      }
      .shape:after {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        border-radius: 50%;
        background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
      }
        
    .: |
      mushroom-badge-icon.reminder{
        top: 30px;
      }

[SteffenDE (Steffen)]

Hi,

it is possible to make the secondary text of a mushroom card as a scrolling text (marquee)?

I have this for the DWD weather warning and very often the text is to long so I want to have a scrolling text:

Here is the code:

  - type: custom:mushroom-template-card
    fill_container: true
    entity: sensor.dwd_wetterwarnung_current_warning_level
    layout: horizontal
    primary: DWD Wetterwarnung
    tap_action:
      action: more-info
    secondary: >-
      {% if
      is_state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)
      %}
        Keine
      {% elif
      (state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count')
      | int) > 0 %}
        {{- state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_1_description') -}}
      {% else %}
        Unbekannt
      {% endif %}
    icon: >-
      {% if
      is_state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)
      %}
        mdi:check-circle
      {% elif
      (state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count')
      | int) > 0 %}
        mdi:alert-outline
      {% else %}
        mdi:circle-outline
      {% endif %}
    icon_color: >-
      {% if
      is_state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)
      %}
        green
      {% elif
      (state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count')
      | int) > 0 %}
        red
      {% else %}
        grey
      {% endif %}

Thanks.

[Mariusthvdb (Marius)]

sorry for taking me a year to reply here… it’s just that Ive only recently found a new reason to use the swipe card…

only trying to color the button colors, whihc according to inspector are

using the swiper-theme-color (note I’ve set them to white here) so I tried

        - type: custom:swipe-card
          <<: &swipe
            card_mod:
              style: |
                :host {
                  --swiper-theme-color: #fafafa;
                  }

but that wont do anything.
Also tried what you did above, and that does not change the color either.

lastly, I tested the

swiper-theme-color: red

in my themes, to have the swiper card inherit that, but even that does not do anything.
What am I missing here?
please have a look? thx!

small crosspost, since its very relevant to card-mod:

when using either bullets or progress bar on pagination, the theme color swiper-pagination-color is applied. However, when using fraction , to show 1/3 , that same theme colors is not applied, and we have to go into inspector to reveal we need to set

            card_mod:
              style: |
                :host {
                  color: red;
                }

but it does not kick in…
could anyone using swiper card please test this?
(for more details please check the post in swiper thread, dont want to post too much duplicate text)

though since this is mod-card material. and a bug:

        - type: custom:mod-card
          card_mod:
            style:
              swipe-card:
                $: |
                  /* colors the whole fraction  element: '1/3' */
                  /*.swiper-pagination-fraction {
                    color: white;
                  }*/
                  /* colors the '1' in: '1/3' */
                  .swiper-pagination-current {
                    color: var(--swiper-navigation-color);
                  }
                  /* colors the '3' in: '1/3' */
                  .swiper-pagination-total {
                    color: gold;
                  }
              .: |
                ha-card {
                  font-weight: bold;
                  font-size: 20px;
                  color: white; */sets the full line, or only the '/', when the other elements are colored individually
                }

          card:

            type: custom:swipe-card

works all stylings just fine. A big Caveat warning: it loses several cards inside the Swiper…

even when only using:

        - type: custom:mod-card
          card:

            type: custom:swipe-card

[alexeiw123]

Hi - is card-mod able to achieve the follwoing?

I’d like to change the text in my mushroom climate cards for “Heat/Cool”, “Fan Only” and “Off”.
Mushroom doesn’t provide this functionality, can I use templates somehow with card-mod to edit how they are shown?

[rysm83]

Not exactly sure how to achieve my desired effect with my card, but would like to have the cards slide in each card slide slightly behind the first card starting from top to bottom when the page loads.

[benjani85]

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]

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]

Well, at least this changed something

[Anashost]

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]

@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?

@Ildar_Gabdullin

Scaling a badge:
May be done by changing a "--ha-label-badge-font-size" variable’s value:

Thanks

[Ildar_Gabdullin]

@vaderag

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

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]

@vaderag

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?

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

[vaderag]

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]

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]

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 (Scoot)]

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]

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.