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

As i said, you have not made any reference to a card under “options” , so your “light” will end up as entities in your glance-card , so it’s up to you, so whatever you try to change, the same rules for entities-card should be valid … therefor i suggest you choose another, i.e template-entity.card or similar, which you have multiple “customization” choices in both the card, as-well as card-mod … Now you only have " an entity in entities card( EDIT an entity in entities-card- in glance-card, populated by … " … i choosed mushroom-entity-card for the icon and card choices, and easy | style options

I can’t seem to do the same sort of thing rendering on a Windows (Edge) browser and on the Android app. What I’m trying to do is override the width limit entirely. (I want the map to cover the width of the window.)
Here’s what I’ve tried:

# Map
  - title: Map
    path: map
    icon: 'mdi:map-marker'
    badges: []
    cards:
      - type: map
        card_mod:
          style: |
            @supports not (-webkit-touch-callout: none) {
              @media (max-width: 100%)
            }
        entities:
          - entity: person.russell_smith
          - entity: person.janette
          - entity: person.katie
        hours_to_show: 0
        title: Where is everybody?
        dark_mode: true
        auto_fit: true

And here’s a look at the relevant Element Styles:


(You’ll notice in the screen shot that I’ve un-checked the max-width item. This works, but I can’t figure out how to do that with card_mod.)

You can maximise the Mushroom Card Slider like this:

Mushroom Maximise Sider

type: custom:mushroom-light-card
entity: light.office_light
name: Office
show_brightness_control: true
layout: horizontal
card_mod:
  style: |
    mushroom-state-item {
      max-width: fit-content;
    }
1 Like

This code seems incomplete - compare it to that post about conditional styling.

Can anybody give me a hint to how I can make the state-icon animated (flahing) and colored at the same time ?

I think I have figured out the color of the icon as it seems to work like intended.
But I cannot guess how to animate the icon…

Here is my code:

  - type: state-icon
    icon: mdi:radiator
    entity: sensor.kontor_temperature
    card_mod:
      style: |
        :host {
            {% if state_attr('climate.kontor','current_temperature') 
              >= state_attr('climate.kontor','temperature') %}
              var(--paper-item-icon-color)
            {% else %}
              --paper-item-icon-color: red;
            {% endif %}
            }   
            @keyframes fade {
              0%{     opacity: 0; }
              49%{    opacity: 50; }
              60%{    opacity: 100; }
              99%{    opacity: 0; }
              100%{   opacity: 0; }
            }
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          card_mod:
            style:
              ha-dialog$: |
                div.mdc-dialog__scrim {
                  backdrop-filter: blur(10px) !important;
                  -webkit-backdrop-filter: blur(10px) !important;
                  background-color: rgba(0,0,0,0.1) !important;
                }         
          title: Radiator
          content:
            type: thermostat
            entity: climate.kontor
          timeout: 15000
    style:
      left: 54%
      top: 94%
      background-color: rgb(255,255,255)
      border-radius: 50%

I have added the css animation part like:

animation: fade 2s linear infinite;

But without any effect.

Also, I do not want to have the background to animate with the icon. This needs to be static. :slight_smile:

I’m trying to do a similar thing, but am using a rotating icon - I can get it to change if it’s in an independent card, using something similar to this: but doesn’t work when combined.

    color:
      {% set mode = states('climate.air_conditioner_home')
      %} {% if mode == 'off' %} grey {% elif mode == 'cool' %} lightblue {% elif mode ==
      'auto' %} green {% elif mode == 'heat' %} red
      {% else %} grey {% endif %};

my whole piece of code in glance card looks like this:

          - entity: switch.ac_zone
            icon: mdi:fan
            tap_action:
              action: toggle
            card_mod:
              style: |
                state-badge {
                  {% if is_state('switch.ac_zone', 'on') %}
                    animation: rotation 1.5s linear infinite;
                  {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(359deg);
                    }
                      color: {% set mode = states('climate.air_conditioner_home') %} {% if mode == 'off' %} grey {% elif mode == 'cool' %} lightblue {% elif mode == 'auto' %} green {% elif mode == 'heat' %} red {% else %} grey {% endif %}; }
                  }

I’m looking at a different state to the switched zone, because I can’t control heat or cool based on zone, it’s across the entire AC system, and it allows me to used repeatable code

I’m sure I’m missing something really obvious, but…

Can someone help me with this? What I’m wanting to do is to have a pop-up show the custom:time-picker-card and I want to make the text bigger for my small phone (bedside dashboard).

I have a custom theme running for the dashboard, but I’m getting all confused between card-mod-card and card-mod-more-info not to mention card-mod-more-info-yaml. Any changes I make in one of those work when I have the popup displayed in the edit screen of my dashboard, but totally ignored when the popup actually shows.

So I read up some more and switched to using the fire-dom-event, but I can’t for the life of me figure out how to get the entities to obey the CSS.

  - type: custom:mushroom-entity-card
    entity: input_datetime.alarm_time
    name: Alarm time
    icon: mdi:home-clock
    secondary_info: none
    layout: vertical
    tap_action:
      action: fire-dom-event
      browser_mod:
        service: browser_mod.popup
        data:
          browser_id: THIS
          content:
            type: custom:time-picker-card
            entity: input_datetime.alarm_time
            hour_mode: 24
            hide:
              name: true
          card_mod:
            style: |
              .time-input
              { font-size: 2em !important; }

Is it something to do with the shadow-root DOM object?

Any help is greatly appreciated.

Yes. That’s essentially the problem. I’m not familiar enough with how cards are styled to know what’s missing, which is why I included the Element styles to see if someone could enlighten me.
I’ve tried a bunch of variations on code I’ve seen in this thread and it doesn’t affect the #column division that’s limiting the width.
Also, I’m having difficulty locating the precise “post on conditional styling” that you’re referring to. Can you link to it please? Thanks.

I meant a post you answered to (describing “device-dependent” conditions).

The post mentioned above contains examples with “color”.
I suggest you to achieve your goal in two steps:

  1. Define which styles you need to set. Test with these styles without using “device-dependent” conditions.
  2. Wrap your styles into “device-dependent” conditions.

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 :slight_smile:

1 Like

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.

1 Like

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

1 Like

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') }};
    }

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.

1 Like

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:

Scherm­afbeelding 2023-01-20 om 12.13.11

though the icon still looks lopsided.

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;
      }

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:

Screen_20230121-112021

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.

1 Like

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

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?

1 Like

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.