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

Thyraz · September 25, 2019, 6:40am

Hello Thomas,

thank you for your quick reply (and your awesome mod ).
I also tried that yesterday but it’s also not working for me…

It should look like that right?

        style:
          "#states div":
            slider-entity-row:
              $: |
                .flex {
                  margin-top: -45px;
                  margin-left: 40px;
                  margin-right: 40px;
                }
            hui-toggle-entity-row:
              $:
                hui-generic-entity-row:
                  $: |
                    .flex .info {
                      margin-top: -20px;
                    }

I still only see the first of the two adjustments.
If I switch the positions of the two, the other one gets visible.

Any idea why?
Thank you also for the other solution.
I guess this would work, but I have a lot dimmer in this entities card, so the general approach would save me a lot copy and paste.

thomasloven · September 25, 2019, 6:54am

Try .wrapper instead of .flex in the first one.

Thyraz · September 25, 2019, 8:13am

Ok, .wrapper didn’t work for my margins, the slider didn’t move.
But I guess your idea is somehow based on a problem, that we shouldn’t use the same identifiers for different selectors?

So I tried to alter my selector in a way that doesn’t change it functionally:

"#states div":
            slider-entity-row:
              $: |
                .flex:first-of-type {
                  margin-top: -40px;
                  margin-left: 40px;
                  margin-right: 40px;
                }
            hui-toggle-entity-row:
              $:
                hui-generic-entity-row:
                  $: |
                    .flex .info {
                      margin-top: -20px;
                    }

This works fine.
Can you explain why this happens, as it might help to avoid it for my next css modifications?

thomasloven · September 25, 2019, 8:18am

I’m afraid I can’t, because this works for me:

  - type: entities
    title: Test
    debug_cardmod: true
    entities:
      - entity: light.bed_light
      - type: custom:slider-entity-row
        entity: light.bed_light
        full_row: true
        toggle: false
        hide_state: true
    style:
      "#states div":
        slider-entity-row:
          $: |
            .wrapper {
              margin-top: -40px;
              margin-left: 40px;
              margin-right: 40px;
              }
        hui-toggle-entity-row:
          $:
            hui-generic-entity-row:
              $: |
                .flex .info {
                  margin-top: -20px;
                }

Very neat idea, btw!

Try the debug_cardmod: true option and exploring the object inspector, btw. It usually helps to understand what is and isn’t happening.

Mariusthvdb · September 25, 2019, 9:01am

as it happens, this was just what I was looking for, hoping to have the brightness and/or rgb_color on the second row.

Since you obviously like this idea @thomasloven, would be it be a viable feature request for the slider-entity-row card to enable the second row and set it on specific attributes?

Would prevent many many user errors!

Looking for something like this:

showing last_changed, or color attributes on the second line. Having the color temp on the badges wouldn’t hurt either, but that might be pushing it a bit

Oligarch · September 27, 2019, 5:49am

Please, help me to customize icon color of my battery_s7edge sensor depending on it’s state.

cards:
  - cards:
      - elements:
          - entity: person.oleksandr
            style:
              color: cyan
              left: 20%
              top: 93%
            type: state-label
          - entity: sensor.battery_s7edge
            style:
              '--paper-item-icon-color': green
              left: 65%
              top: 94%

This does’t work…
style: |
:host {
–paper-item-icon-color:
{% if states(config.entity)|int < 20 %}
red
{% else %}
green
{% endif %}
;


            type: state-icon
          - entity: sensor.battery_s7edge
            style:
              color: white
              left: 80%
              top: 94%
            type: state-label
        image: /local/pics/card_oleksandr.png
        style:
          .: |
            ha-card {
              border-radius: 27px
              border: 1px solid rgba(100,100,100,0.3);
              overflow: hidden;
              width: 97%;
              box-shadow: 3px 3px 5px rgba(0,0,0,1);
            }          
        type: picture-elements
      
    type: horizontal-stack
type: vertical-stack

thomasloven · September 27, 2019, 7:03am

Elements in a picture-elements card can’t be styled directly by card-mod.

What you can do is define a variable in the card itself:

type: picture-elements
style: |
  ha-card {
    --my-icon-color: {% if states('sensor.battery_s7edge')|int < 20 %} red {% else %} green {% endif %}
  }
elements:

And then use that variable in the element style:

  - type: state-icon
    entity: sensor.battery_s7edge
    style:
      '--paper-item-icon-color': 'var(--my-icon-color)'
      left: 65%
      top: 94%

Unfortunately, you can’t use config.entity with this.

Oligarch · September 27, 2019, 8:15am

~~Can you paste this to my code? I tried unsuccessfully…~~
Thanks a lot. Spent several hours trying to figure it out on his own. It turned out that it was enough to ask))

thomasloven · September 28, 2019, 5:40pm

A post was split to a new topic: Overlay on map card

thomasloven · October 3, 2019, 7:00am

The latest release of card_mod adds the ability to use tap_action with rows in entities-cards.

type: entities
entities:
  - entity: light.bed_light
    tap_action:
      action: toggle

Mariusthvdb · October 3, 2019, 8:03am

since you’ve mentioned specific styling impossibilities using a picture-entity card, please let me ask if I can blink a picture-entity card. Trying this:

      - type: horizontal-stack
        cards:
          - type: picture-entity
            style: |
              @keyframes blink {
                50% }
              ha-card {
              animation: blink 2s linear infinite;
              border-radius: 0px;
              }
            entity: sensor.trash_today
            name: Vandaag
            show_state: false
            state_image:
              'gft': /local/mijnafvalwijzer/gft3.png
              'papier': /local/mijnafvalwijzer/papier3.png
              'restafval': /local/mijnafvalwijzer/restafval3.png
              'plastic': /local/mijnafvalwijzer/plastic.png
              'Geen': /local/mijnafvalwijzer/kliko_geen.png

but no blinking…if possible I would even like to make that conditional

using an extra button for that now with:

      - type: conditional
        conditions:
          - entity: persistent_notification.trash_notification
            state: notifying

but would be awesome if I could do that with the picture-entity card.
Please have a look?

thomasloven · October 3, 2019, 8:09am

You also need to specify what your keyframes do.
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Mariusthvdb · October 3, 2019, 8:11am

ok thanks, but I only want it to blink nothing else… not even a red background, simply blink the available image.

even copying the exact code from your docs doesnt blik the picture:

          - type: picture-entity
            style: |
              @keyframes blink {
                50% {
                  background: red;
                    } 
                  }
              ha-card {
              animation: blink 2s linear infinite;
              border-radius: 0px;
              }

thomasloven · October 3, 2019, 8:17am

That’s because the background can’t be seen on a picture-entity card since there’s a picture in the way, and also because background has no default value.
You’ll have to find some other property that works to change.

Mariusthvdb · October 3, 2019, 8:22am

understand the background getting covered by the picture. Are you saying then this cant be done? I cant set the picture to be blinking? and have a default background set to a color?

using a button I can blink like this:

       - type: conditional
        conditions:
          - entity: persistent_notification.trash_notification
            state: notifying
        card:
          type: custom:button-card
          style: |
            ha-card {
            border-radius: 0px;
            }
          aspect_ratio: 3/1
          entity: sensor.afval_vandaag
          show_entity_picture: true
          label: >
            [[[
            return entity.state
            ]]]
          styles:
            label:
              - font-weight: bold
              - color: black
            card:
              - animation: blink 2s ease infinite

or, moving the blink to the style (card-mod) part, like:

          type: custom:button-card
          style: |
            ha-card {
            border-radius: 0px;
            animation: blink 2s ease infinite;
            }

would have hoped to use the same effect on the picture-entity somehow

thomasloven · October 3, 2019, 8:50am

No, I’m saying

I won’t do your research for you.

com-resize%20(2)

Mariusthvdb · October 3, 2019, 8:57am

wasn’t asking you to… sorry if you got that impression.
otoh, it would be very nice if you could share the config of the blinking cat
as to make my research somewhat more focussed on possibilities, rather than on the issues I run into momentarily.

about the condition: this works alright:

          - type: picture-entity
            style: |
              ha-card {
                animation: {% if is_state('persistent_notification.trash_notification', 'notifying') %} wiggle 1s linear infinite alternate;
                           {% else %} none
                           {% endif %}
              }
              @keyframes wiggle {
                0% {
                  -webkit-transform: rotate(5deg);
                  transform: rotate(5deg);
                }
                100% {
                  -webkit-transform: rotate(-5deg);
                  transform: rotate(-5deg);
                }
              }

or

            style: |
              ha-card {
                animation: blink 2s linear infinite;
                border-radius: 0px;
              }
              @keyframes blink {
                50% {border-radius: 50px;}
                }

cant find a property though that blinks the picture…

Mariusthvdb · October 3, 2019, 5:50pm

anyone else maybe that can help me find the correct property to make a blinking picture-entity card possible? Ive checked most of the available properties on https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp as Thomas suggested, but can’t seem to find the correct one.

thomasloven · October 4, 2019, 6:58am

I used opacity. It takes a nubmer between 0 and 1.

Mariusthvdb · October 4, 2019, 7:40am

yes! thank you very much!

            style: |
              ha-card {
                border-radius: 0px;
                animation: {% if is_state('persistent_notification.trash_notification', 'notifying') and
                                   states('sensor.trash_tomorrow') != 'Geen' %} blink 2s linear infinite;
                           {% else %} none
                           {% endif %}
              }
              @keyframes blink {
                50% {opacity: 0;}
                }

blinking nicely
100% makes for an even better effect, like a siren loop…
thanks again!