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

yes, and thanks for that, TIL :wink:
where is this transition used in regular Dashboard/Frontend? Must confess I never realized that we have it, and on un-modded cards, I never see that?

btw, the glance-card mod above might not even be functional, given the fact there’s no transition in it in the first place :wink: frontend/src/panels/lovelace/cards at dev · home-assistant/frontend · GitHub

e.g. state icon, bulb colors, opening of dialogs, dropdowns, etc.? But I didn’t not check if all this is related to the mentioned single :host entry above. Most probably no, but a lot of transitioning is there, wherever defined everywhere.

right, ofc… Ill see whether any of this is frustrated/affected at all.

Nobody talked about grid, entities.
We talked about vertical-stack only (w/o decluttering card etc).

cards:

  - &ref_entities_card
    type: entities
    entities:
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun

  # - type: custom:mod-card
  #   card_mod:
  #     style:
  #       hui-vertical-stack-card$: |
  #         .card-header {
  #           font-size: 10px !important;
  #           color: red !important;
  #         }
  #   card:
  #     type: vertical-stack
  #     title: Some title
  #     cards:
  #       - *ref_entities_card

  - type: vertical-stack
    title: Some title
    cards:
      - *ref_entities_card

  - *ref_entities_card
  - *ref_entities_card


And “sticking” is probably not happening always. In this simple case it sticks.

How is this related to the issue?

Cmon man, what’s up? Why the attitude?

I was talking about a preference for using mod-card in combination with those cards. Opposed to some of the other way more complicated suggestions above.

And because of that I also showed the option for modding both stack gap as well as grid card gap in 1 style.

Because that hasn’t been posted in this community before, that seems quite interesting if you ask me.

Feel free to ignore ofc
Cheers!

What are you talking about? I just described facts & corrected some points regarding sticking.
Nobody is blaming you)

cool, sorry if I misinterpreted your tone.
nvm, lets keep up the good work here!

Would someone be able to help me achieve a blinking entity image based on the entity state please? I’ve looked through this thread searaching for entity card examples, but can’t find one that is state based. I have gone a bit card-mod blind after scanning through the thread so may have missed what I’m looking for!

I have a basic entities card with the following config:

type: entities
title: Oil Tank
state_color: false
show_header_toggle: true
entities:
  - entity: sensor.oil_status
  - entity: sensor.distance_to_oil
  - entity: sensor.oil_level
    icon: mdi:car-coolant-level
  - entity: sensor.oil_remaining
    icon: mdi:car-coolant-level
  - entity: sensor.wifi_signal

My entity ‘sensor.oil_status’ instead of an icon, displays my template sensor state picture in my current entities card.

 - name: "Oil Status"
        state: >
          {% if states.sensor.oil_level.state | float(0) > 100 %}
            FULL
          {% elif states.sensor.oil_level.state | float(0) > 75 %}
            GOOD
          {% elif states.sensor.oil_level.state | float(0) > 50 %}
            OK
          {% elif states.sensor.oil_level.state | float(0) > 25 %}
            LOW
          {% elif states.sensor.oil_level.state | float(0) > 0 %}
            WARNING
          {% else %} 
            ERROR
          {% endif %}
        picture: >
          {% if is_state('sensor.oil_status', 'FULL') %}
            /local/images/green.png
          {% elif is_state('sensor.oil_status', 'GOOD') %}
            /local/images/green.png
          {% elif is_state('sensor.oil_status', 'OK') %}
            /local/images/yellow.png
          {% elif is_state('sensor.oil_status', 'LOW') %}
            /local/images/amber.png
          {% elif is_state('sensor.oil_status', 'WARNING') %}
            /local/images/red.png
          {% else %} 
            /local/images/error.png
          {% endif %}

If I want this entity state picture to ONLY blink when the entity card is displaying the picture for the ERROR or WARNING states, how do I configure the card with card-mod?

I believe I need to include some card-mod style such as

 animation: blink 2s ease infinite

if

is_state('sensor.oil_status', 'WARNING' or 'ERROR')

but I’m stuck on the syntax so it only applies to this one entity within the entity card, and still shows the static pictures for this entity when it’s not in either of these 2 states.

This must be incorrect, as it isn’t having any effect on the standard entity card, however hopefully I’m on the right lines?

type: entities
title: Oil Tank
state_color: false
show_header_toggle: true
entities:
  - entity: sensor.oil_status
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              animation: {% if is_state('sensor.oil_status', 'ERROR') %} blinking 2s ease infinite;
                         {% else %} none 
                         {% endif %}
            }
  - entity: sensor.distance_to_oil
  - entity: sensor.oil_level
    icon: mdi:car-coolant-level
  - entity: sensor.oil_remaining
    icon: mdi:car-coolant-level
  - entity: sensor.wifi_signal

limiting it to just one state for now until I get it working correctly…

1st post → link at the bottom → styles for animation for Entities card
In short - you have not specified your “blinking” function.

Thank you for your help, working correctly now after specifying

@keyframes blinking {
              0% {opacity: 0;} 
              100% {opacity: 1;} 
            }

Could somebody help a bloody Beginner to alter an Element inside a Shadow Root?
I managed to find and alter ‘normal’ Elements, but just don’t get it with the Shadow-Root Thing :frowning:

I want to remove both Value and Title Elements from a Gauge Card. In Inspector setting Text Size to 0px works quite well.

How can i adress the
"svg class="text" or
"text class="value-text" ?

I’m at the very limits of my CSS knowledge here, and don’t actually use the Gauge card myself, but in theory this is how you would access these elements, combined with elements before the shadow-root level (here the font-size of the entity name):

- type: gauge
  card_mod:
    style:
      ha-gauge:
        $:
          svg.text: |
            text.value-text {
              fill: red;
            }
      .: |
        ha-card div.name {
          font-size: 10px;
        }
  entity: <your-entity>

However, it depends what aspect of these elements you want to modify. It’s complicated by the fact that these elements are contained within a flexible viewbox, which means that changing things like font-size directly on these elements probably won’t work, as they just get scaled up again by the viewbox properties.

Instead, you would have to change the dimensions of the viewbox itself. Here’s code that works (Firefox browser on Windows desktop) to change both size and color of the gauge value for example, but I have no idea if this would work desirably and consistently across different views, browsers and devices:

- type: gauge
  card_mod:
    style:
      ha-gauge:
        $:
          svg.text: |
            text.value-text {
              fill: red;
            }
          .: |
            svg.text {
              max-height: 26%;
            }
      .: |
        ha-card div.name {
          font-size: 10px;
        }
  entity: <your-entity>

EDIT: just re-read your post more carefully, and saw you want to remove name and value entirely. This should do that:

- type: gauge
  card_mod:
    style:
      ha-gauge:
        $: |
          svg.text {
            display: none;
          }
      .: |
        ha-card div.name {
          display: none;
        }
  entity: <your_entity>
3 Likes

Whoooa amazing!!! You are a true Hero! It works perfectly :star_struck:
Now, as i want to learn it, im gonna go through all Lines and check all of them for their function… Thank you so much again, highly appreciate your help! :slight_smile:

1 Like

I don’t fancy the date and time picker changes from a few releases ago: They’re too high for my taste, so I’m trying to change it. I don’t know if there are theme variables for this (I failed to find any), so I’ve been experimenting with card mod.

I can’t figure out the CSS selector chain to achieve this. I even forced some changes by using the * selector for all elements and setting some property values with !important just to get some kind of effect for testing purposes. I went through the CSS selector docs and combinator docs to see if there’s anything I could use.

I don’t think what I want to do is possible, but perhaps someone here knows (could find anything on the large card mod threads either) how to achieve this.

Here is a screenshot with the styles applied manually. The hour and minute elements must be styled separately from the AM/PM picker: I couldn’t get a parent element styled to do both in one go.

My card config, with one of many variations that I’ve tried:

      - type: entities
        title: Schedule
        show_header_toggle: false
        entities:
          - entity: input_datetime.wake_up_time
            name: Wake-up Time
            card_mod:
              style: 
                hui-input-datetime-entity-row:
                  $:
                    hui-generic-entity-row:
                      ha-time-input:
                        $:
                          ha-base-time-input:
                            $: |
                              .value {
                                height: 3em
                              }
          - entity: input_datetime.vacation_start
            name: Vacation Start
          - entity: input_datetime.vacation_end
            name: Vacation End
          - entity: binary_sensor.workday
            name: Workday Today
          - entity: binary_sensor.workday_tomorrow
            name: Workday Tomorrow

Hi guys,

I am using dwains dashboard v3 and the cyberpunk 2077 theme.
It looks great together but dwains area cards are not labeled as ha-card.

They only have a div class and I can’t find out how to apply this to other “cards”.

This is html

Card mod should be added at <div class=“flex justify-between h-44 p-3 area-button” … >

An this is the yaml code which is added right now. ha-card should be changed to .area-button.
But just this isn’t doing it. I think I am missing something. maybe a class before the area button.

  card-mod-card: |
    ha-card {
      border-radius: 1px;
      clip-path: polygon(
        0% 0%, 
        40px 0%, 
        45px 4px, 
        100% 4px, 
        100% calc(100% - 20px), 
        calc(100% - 20px) 100%,
        0% 100%
      );
    }

I am thankful for any help!

I’m pretty sure this isn’t correct for starters, or at least it doesn’t look like anything I’ve done with card-mod. But I don’t use Dwain’s Dashboard, so I might be completely off the mark here. Or maybe you are using a very old version of the card?

Check the card-mod documentation, but I would expect it to start like this:

card_mod:
  style: |
    ...<etc>

EDIT: on second thoughts, you might be trying to follow the guidance on styling cards without an <ha-card> element. But even that would look something like this (shamelessly copied from the documentation):

type: custom:mod-card
card:
  type: vertical-stack # for example
  ...
card_mod:
  style: |
    ...<etc>

@reste_narquois This is about card-mod-themes.

That would explain it - suggests OP re-posts here then.

Do not think it’s required.
The OP should find out how to style these Area cards first, then he could add the code into theme’s file - if he really needs it.