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

[catohagen (cato)]

I made a device tracker that get gps locations from visitors on my website.
I’m mapping these in a map in home assistant, and trying to get the circle smaller

my current map card:

type: map
name: web
entities:
  - entity: device_tracker.test_web
dark_mode: true
default_zoom: 2
hours_to_show: 24
card_mod:
  style:
    ha-map$:
      .leaflet-overlay-pane: |
        path {
           fill: rgb(222, 22, 58);
           fill-opacity: 1.0;
           stroke: rgb(0, 0, 8);
           stroke-opacity: 0.1;
         }
      .leaflet-marker-icon: |
        marker {
           width: 28px;
           height: 48px;
         }

not very familiar with css, but I found another post here to change the path lines color but struggeling with this black circle that overlays the current gps position…trying to make it smaller.
I can edit the circle size with ‘Inspect’ and directly set smaller size, but cant figure out the proper
code for card mod.
If anyone could give me some clues with this, would be awesome

[catohagen (cato)]

Figured something out…

type: map
name: web
entities:
  - entity: device_tracker.test_web
dark_mode: true
default_zoom: 2
hours_to_show: 24
card_mod:
  style:
    ha-map$:
      .leaflet-pane: |
        path {
           fill: rgb(222, 22, 58);
           fill-opacity: 1.0;
           stroke: none;
           stroke-opacity: 0.1;
         }
      .leaflet-overlay-pane: |
        path {
           fill: rgb(222, 22, 58);
           fill-opacity: 1.0;
           stroke: rgb(0, 0, 8);
           stroke-opacity: 0.1;
         }
      ha-entity-marker$: |
        div.marker {
           display: flex;
           width: 48px;
           height: 48px;
           font-size: 16px;
           border-radius: 50%;
           border: 5px solid red;
           color: white;
           background-color: red;
           opacity: 0.2;
        }

But it seems the marker gets restored back to orginal everytime the gps position are changed,
and change to another lovelace view and back to map the styling are in effect again.

[Ildar_Gabdullin]

@catohagen

gets restored back to orginal everytime the gps position are changed,

Go to 1st post → link at the bottom → styles for Map
There is a similar issue, there is a solution for it.

[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.