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

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!

yoni3210 · October 5, 2019, 3:21pm

Hi, i need some help changing color to AliceBlue,

i’m using browser mode with fold entity row, i can’t figured out how to change the text color to AliceBlue, please see picture below:

code:

  plugpop:
    card: 
      type: 'custom:button-card'  
      color: auto
      size: 30%
      icon: '[[icon]]'
      entity: '[[entity]]'
      show_last_changed: true
      aspect_ratio: 1/1
      show_state: true
      name: '[[name]]'
      show_label: true
      tap_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          title: Devices
          style:
            background: var(--background-image)
            color: AliceBlue
            border-radius: 15px
            --ha-card-border-radius: 15px
            --ha-card-background: '#646464'
          card:
            type: entities
            entities:
              - type: custom:fold-entity-row
                head:
                  type: section
                  label: Climate
                open: false
                entities:
                  - type: custom:more-info-card
                    entity: climate.mzgn_slvn
                    title: Living Room
                  - type: custom:more-info-card
                    entity: climate.mzgn_khdr_shynh
                    title: Bedroom
              # - type: divider  
              - type: custom:fold-entity-row
                head:
                  type: section
                  label: Fan
                open: false
                entities:
                  - entity: fan.ceiling_fan
                  - entity: fan.xiaomi_smart_fan
                  - entity: switch.sonoff_10006ceeab
                    name: Corner Fan
                    icon: mdi:fan
                  # - type: divider
              # - type: divider
              - type: custom:fold-entity-row
                head:
                  type: section
                  label: TV
                open: false
                entities:
                  - type: custom:more-info-card
                    entity: media_player.living_room_tv
                    title: TV Living Room
                  - type: custom:more-info-card
                    entity: media_player.bedroom_tv
                    title: TV Bedroom 
              - type: custom:fold-entity-row
                head:
                  type: section
                  label: Computers
                open: false
                entities:
                  - entity: switch.desktop
                    icon: mdi:desktop-tower
                  - entity: switch.mini_pc
                    icon: mdi:desktop-tower
            style: |
              ha-card {
                --paper-item-icon-color: AliceBlue;
                  color: AliceBlue;              
              }
            state:
              - value: 'on'
                styles:
                  card:
                    - box-shadow: 0px 0px 3px 2px var
                  name:
                    - color: AliceBlue
                  state:
                    - color: AliceBlue
                  label:
                    - color: AliceBlue
                id: on-icon
              - value: 'off'
                styles:
                  card:
                    - box-shadow: '0px 0px 3px 2px var'
                    # - opacity: 0.3
                  label:
                    - color: 'AliceBlue'
                  name:
                    - color: 'AliceBlue'
                  state:
                    - color: 'AliceBlue'
                  icon:
                    - color: 'AliceBlue'
                id: off-icon                
          deviceID:
            - this
            - dashboard
      hold_action:
        action: more-info
        haptic: success
      styles:
        card:
          - padding-left: 10px
          # - background-color: 'rgba(255,255,240,0.9)'
          # - background-color: '#fff5bc'
          - background-color: 'rgb(100,100,100)'
          - border-radius: 15px
        name:
          - justify-self: start
          - font-weight: bold
          - font-size: 13px
          - color: AliceBlue
        label:
          - font-size: 11px
          - font-family: Helvetica
          - padding: 0px 10px
          - justify-self: start
        state:
          - font-size: 11px
          - font-family: Helvetica
          - padding: 1px 10px
          - justify-self: start
          - text-transform: capitalize
          - font-weight: bold
        grid:
          - grid-template-areas: '"i" "n" "s" "l"'
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr min-content min-content
        img_cell:
          - justify-content: start
          - align-items: start
        icon:  
          - color: AliceBlue
      state:
        - value: 'on'
          styles:
            card:
              - box-shadow: 0px 0px 3px 2px var
            name:
              - color: AliceBlue
            state:
              - color: AliceBlue
            label:
              - color: AliceBlue
          id: on-icon
        - value: 'off'
          styles:
            card:
              - opacity: 0.3
            label:
              - color: AliceBlue
            icon:
              - color: AliceBlue
            name:
              - color: AliceBlue
            state:
              - color: AliceBlue
          id: off-icon  
        - value: unavailable
          styles:
            card:
              - opacity: 0.2
              - color: grey
              - '--paper-item-icon-color': grey
            label:
              - color: 'rgba(0, 0, 0, 0.0)'

thomasloven · October 5, 2019, 6:37pm

That’s 177 lines.

One Hundred And Seventy Seven

yoni3210 · October 5, 2019, 6:46pm

i’m sorry @thomasloven , didn’t noticed, please see below:
code:

  plugpop:
    card: 
      type: 'custom:button-card'  
      color: auto
      size: 30%
      icon: '[[icon]]'
      entity: '[[entity]]'
      show_last_changed: true
      aspect_ratio: 1/1
      show_state: true
      name: '[[name]]'
      show_label: true
      tap_action:
        action: call-service
        service: browser_mod.popup
        service_data:
          title: Devices
          style:
            background: var(--background-image)
            color: AliceBlue
            border-radius: 15px
            --ha-card-border-radius: 15px
            --ha-card-background: '#646464'
          card:
            type: entities
            entities:
              - type: custom:fold-entity-row
                head:
                  type: section
                  label: Climate
                open: false
                entities:
                  - type: custom:more-info-card
                    entity: climate.mzgn_slvn
                    title: Living Room
                  - type: custom:more-info-card
                    entity: climate.mzgn_khdr_shynh
                    title: Bedroom