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

[Scoff (Scott)]

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.

[Scoff (Scott)]

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…

[Ildar_Gabdullin]

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

[Scoff (Scott)]

Thank you for your help, working correctly now after specifying

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

[smartin]

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

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

[reste_narquois (Chris Warne)]

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>

[smartin]

@reste_narquois

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,

Whoooa amazing!!! You are a true Hero! It works perfectly
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!

[parautenbach (Pieter Rautenbach)]

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

[Bourner]

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!

[reste_narquois (Chris Warne)]

@Bourner

card-mod-card: |

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>

[Ildar_Gabdullin]

@Bourner

card-mod-card: |

@reste_narquois This is about card-mod-themes.

[reste_narquois (Chris Warne)]

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

[Ildar_Gabdullin]

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.

[Bourner]

Yes it’s a theme. The code I put in my text is from cyberpunk theme. https://github.com/flejz/hass-cyberpunk-2077-theme
And this works for all ha-card elements.

When I try to add the same code on .area-button in developer tools it works. But I don’t get it to work when I change the theme yaml file. Thatswhy I posted here.

I need assistance with putting this code into the theme file.

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

This is what I tried but I did nothing for me.

[Ildar_Gabdullin]

Already told you:

@Ildar_Gabdullin

The OP should find out how to style these Area cards first

Place your card on some view, then try to style it with a default theme first.

[Bourner]

OK once again. I want to style some cards of dwains dashboard. Dwains Lovelace Dashboard | An fully auto generating Home Assistant UI dashboard for desktop, tablet and mobile by Dwains for desktop, tablet, mobile
I can’t place the card anywhere because its an auto generating dashboard which generates these area cards from home assistant areas.

I already know the styling and it worked from google chrome developer tools. but I don’t know how to do it with card mod.

When I add this code

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

to chrome dev tools the cards have a different look. But when I add this code into my theme file nothing happens. I tried different syntax to show anything from card mod theme but nothing worked for me so I’m here for help.

I want the code above to be in "<card-mod slot=“none” but for now there is no card mod slot on these area cards. So how Im gonna add this card mod slot?

[arganto]

@Bourner

I can’t place the card anywhere because its an auto generating dashboard which generates these area cards from home assistant areas.

Then I would suggest to jump over to the card-mod themes topic/thread.

[Ildar_Gabdullin]

@Bourner Imho this is rather rare case, I would suggest to ask this question in a thread dedicated to that auto-generated dashboard.
This case I cannot simulate; adding the Area card manually does not seem to help, I cannot see the “area-button” selector you mentioned.
Hence, do not think that moving the question to card-mod-theme thread may help.

[Bourner]

Its not the default HA card for areas. its something from dwains dashboard.
I already asked the developer but didn’t get an answer so I thought this is the correct place.

So in general how would you style a div that has no ha-card element with card-mod themes?

[Ildar_Gabdullin]

@Bourner

div that has no ha-card element with card-mod themes?

In case of using cards w/o ha-card in a normal dashboard - place the card into mod-card (as it was already advised to you).
But since you have no control on your cards - cannot advise anything then…
Imho this auto-generated solutions may cause more problems than solutions where you have a full control.