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

Share your Projects! Lovelace & Frontend
#2171

thanks @Ildar_Gabdullin ! , Sorry I missed your post, but you didnt tag me so I didnt recieve a ping.

this is almost getting there, but look how odd: everything changes but the icon in my setup:

Schermafbeelding 2021-10-01 om 16.15.54
Schermafbeelding 2021-10-01 om 16.15.54914×122 8.5 KB

If I can make it change, I’ll hope to make it happen based on state after that: ‘on’ - blue/spin, ‘off’- grey/no motion.

and its not my templates because copying your setup gives me:

Schermafbeelding 2021-10-01 om 16.22.22
Schermafbeelding 2021-10-01 om 16.22.22902×142 5.38 KB

this shows spinning:

          state-badge {
            animation: rotation 1s linear infinite, colorize 5s linear forwards 1;
          }

no coloring though
conditional:

  - type: custom:template-entity-row
    entity: binary_sensor.vijverpompen
    card_mod:
      style:
        div#wrapper: |
          state-badge {
            {% if is_state(config.entity,'on') %}
            animation: rotation 1s linear infinite, colorize 5s linear forwards 1;
            {% endif %}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          @keyframes colorize {
            0% {
              color: var(--text-color-off);
            }
            100% {
              color: blue;
            }
          }

again: spinning works, no color (other than set on the binary itself)

#2172

Can anyone help with changing the font size in the shopping list card.

Currently tried

type: shopping-list
style: |
  ha-card {
    font-size: 20px;
  }
title: Shopping list

however changing the size only seems to change the spacing between items and not the actual font size.

#2173

i have problems to understand how dom navigation feature works… can anyone tell me how do i access elements like the element in the red box?!

thanks

img
img787×614 22.6 KB

#2175

Surely my examples were about styling in general.
I believe that templates will not break the styles: it works with static values, it is supposed to work with templated values.

Check this example, the icon’s color changes:

type: entities
entities:
  - input_boolean.test_boolean
  - type: custom:template-entity-row
    entity: input_boolean.test_boolean
    name: name
    secondary: secondary
    state: state
    icon: mdi:engine
    card_mod:
      style:
        div#wrapper: |
          state-badge {
            {% if is_state(config.entity,'on') %}
            color: red;
            {% else %}
            color: cyan;
            {% endif %}
          }

image

image

This code causes the icon to change color in animation “OFF → ON”, do you need it?
Then, the code is wrong, check this:
colorize 5s linear 1 normal

#2176

not sure ht is happening but if I use this code:

  - type: entities
    title: Color Icon T-e-r
    entities:
      - type: custom:template-entity-row
        entity: input_boolean.test
        icon: >
          {{'mdi:engine' if is_state(config.entity,'on') else 'mdi:engine-off-outline'}}
        card_mod:
          style:
            div#wrapper: |
              state-badge {
                {% if is_state(config.entity,'on') %}
                animation: rotation 4s linear infinite, colorize 5s linear forwards 1;
                {% endif %}
              }
              @keyframes rotation {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
              @keyframes colorize {
                0% {
                  color: var(--text-color-off);
                }
                100% {
                  color: blue;
                }
              }

all is well, and both color and animation kick in when turned on. If I use the binary_sensor.vijverpompen, I only get the animation and no color is set.

So, the code must be ok, its just that it wont work somehow for the binary. the forwards makes it a gradual coloring, and that is a nice touch, working with the input_boolean.

I thought it might be interfering with the glob customize I have for binary_sensors:

  customize_domain:

    automation:
      templates:
        <<: &state_color
          icon_color: >
            if (state == 'on') return 'var(--primary-color)';
            return 'steelblue';

    binary_sensor:
      templates:
        <<: *state_color

but that seems a bit far fetched, I believe the local coloring on an entity always ‘wins’, but to be sure I will take it out and see what happens

#2177

Search here use, interesting things find you may many.

#2178

Do you use Custom UI for the entity?
May be you used to use it - then probably you should clear the browser’s cache.

Yes, I mean this…

#2179

Ive disabled it, and cleared all… no effect. as it shouldn’t. I also use the same glob for booleans … :wink:

    input_boolean:
      templates:
        <<: *state_color

which as said, does work. How odd. As a last resort, Ill make a new binary sensor, based on the boolean.

UPDATE:
yes! that works! now how on earth does this go wrong for the original binary, and not for this tester. Only thing I can think of is I tested it in the dev tools states, and not the real entity state. that cant be, when I posted the original question, the binary was ‘on’ so should have worked correctly. hmmm

#2180

have to use the full “path” to the element, clear now… thanks

#2181

the binary_sensor glob was the issue after all… wondering if we can set something like this

            if (state == 'on') return 'var(--primary-color)';
            return 'steelblue';

in a card-mod-theme setting? And if we can, if that wouldn’t interfere with the individual card_mod I am trying to realize here…

#2182

@Ildar_Gabdullin Ive dug into this some more, and I am still very much surprise. If I use config.entity in all fields for the TER, obviously there is a need for an entity (…) and with that, I can not make the coloring happen on the binary. This seems to be caused by custom-ui which sets these domain templates:

homeassistant:

##########################################################################################
# Domain
##########################################################################################

  customize_domain:

    automation:
      templates:
        <<: &state_color
          icon_color: >
            if (state == 'on') return 'var(--primary-color)';
            return 'steelblue';

    binary_sensor:
      templates:
        <<: *state_color

    input_boolean:
      templates:
        <<: *state_color

    switch:
      templates:
        <<: &toggle_icon
          icon: >
            if (state == 'on') return 'mdi:toggle-switch';
            return 'mdi:toggle-switch-off';
        <<: *state_color

as you can see, automation and input_boolean use the identical templates. And be stunned: these do work correctly using the card_mod with config.entity. so both make the icon spin, and color it.

If I take out the config.entity, and use the explicit entity in all templates, like:

  - type: entities
    title: Color Icon T-e-r
    entities:
      - type: custom:template-entity-row
#        entity: binary_sensor.vijverpompen
        icon: >
          {{'mdi:engine' if is_state(config.entity,'on') else 'mdi:engine-off-outline'}}
        card_mod:
          style:
            div#wrapper: |
              state-badge {
                {% if is_state('binary_sensor.vijverpompen','off') %}
                animation: rotation 4s linear infinite, colorize 5s linear forwards 1;
                {% endif %}
              }
              @keyframes rotation {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(360deg);
                }
              }
              @keyframes colorize {
                0% {
                  color: var(--text-color-off);
                }
                100% {
                  color: aquamarine;
                }
              }

        name: >
          Vijverpompen {{'moeten:' if is_state('binary_sensor.vijverpompen','on') else 'mogen:'}}
        secondary: >
          {% set temp = states('sensor.pond_buiten_sensor_calibrated_temperature')|float %}
          {% set dark = 'Licht' if is_state('binary_sensor.dark_outside','off') else 'Donker'%}
          {{relative_time(states['binary_sensor.vijverpompen'].last_changed)}} ago, {{dark}} en {{temp}}°C
        state: >
          {{'Aan' if is_state('binary_sensor.vijverpompen','on') else 'Uit'}}
        icon: >
          {{'mdi:engine' if is_state('binary_sensor.vijverpompen','on') else 'mdi:engine-off-outline'}}

I also see the icon spin and get colorized…

now what is going on here. why does binary_sensor not behave like input_boolean and automation… for now, beats me.

#2183

Is there a way to made the slider wider for media player using css? Currently I have a need for the volume slider only with all other controls hidden.

#2184

another day, another challenge

got his card that auto extracts the attributes of my playing flex players into a markdown card. Id love to add the background of the player to the background using card_mod, but am not sure I can get that out of the template somehow. Would appreciate a look of your keen eyes here.:

  - type: custom:auto-entities
    show_empty: false
    card:
      type: entities
      title: Plex Playing
    filter:
      include:
        - entity_id: 'media_player.plex*'
          state: /playing|paused|'on'/
          options:
            type: custom:hui-element
            card_type: markdown
            card_mod:
            style: |
              ha-card {
                box-shadow: none;
                margin: 0px -8px 0px -8px;
                background: #can I get the config.entity.attributes.entity_picture here?? ;
              }
            content: >
              {% set player = config.entity %}
              {%- for attr in states[player].attributes %}
                {%- if not attr in ['media_content_id','icon','entity_picture',
                                    'hide_attributes','media_position_updated_at',
                                    'media_duration','media_position','player_source',
                                    'media_content_rating',
                                    'is_volume_muted','username','friendly_name',
                                    'volume_level','supported_features'] %}
                {{attr|title|replace('_',' ')}}: {{states[player].attributes[attr]|title}}
                {%- endif %}
              {% endfor %}

              User: {{state_attr(config.entity,'username')}}

currently it looks like

Schermafbeelding 2021-10-06 om 14.17.49
Schermafbeelding 2021-10-06 om 14.17.49868×754 24.7 KB

#2185

Wouldn’t state_attr(config.entity, "entity_picture") work?

#2186

yeah, I tried that but I suppose I need to wrap that as a template somehow, or as we do in

url('/local/images/vijver.jpg');

… like this, it does exactly nothing. doesnt even throw an error :wink:

#2188
  1. How to display an image stored on HDD:
type: custom:auto-entities
show_empty: false
card:
  type: entities
filter:
  include:
    - entity_id: person.*
      options:
        type: custom:hui-element
        card_type: markdown
        card_mod:
          style: |
            ha-card {
              {% set PATH = '/local/images/persons/' %}
              {% set NAME = (config.entity).split('.')[1] %}
              {% set FULL_PATH = 'url("' + PATH + NAME + '.png' + '")' %}
              background-image: {{FULL_PATH}};
              background-repeat: no-repeat;
              background-size: contain;
              text-align: right;
            }
        content: '{{states(config.entity)}}'

image

  1. How to display an image from entity_picture:
type: custom:auto-entities
show_empty: false
card:
  type: entities
filter:
  include:
    - entity_id: person.*
      options:
        type: custom:hui-element
        card_type: markdown
        card_mod:
          style: |
            ha-card {
              background-image: url({{state_attr(config.entity,'entity_picture')}});
              background-repeat: no-repeat;
              background-size: contain;
              text-align: right;
            }
        content: '{{states(config.entity)}}'

Be sure that there is an entity_picture attribute set on the server, not by Custom_UI.

1 Like
#2189

using background: also works here

Schermafbeelding 2021-10-07 om 20.53.48
Schermafbeelding 2021-10-07 om 20.53.48952×654 453 KB

though I might have to zoom out a bit because the media_players show:

Schermafbeelding 2021-10-07 om 20.55.48
Schermafbeelding 2021-10-07 om 20.55.48924×510 161 KB

or

Schermafbeelding 2021-10-07 om 20.55.59
Schermafbeelding 2021-10-07 om 20.55.59930×228 22.8 KB

maybe set it at 100%…

yes!

Schermafbeelding 2021-10-07 om 20.58.57
Schermafbeelding 2021-10-07 om 20.58.57954×646 596 KB

using:

  - type: custom:auto-entities
    show_empty: false
    card:
      type: entities
      title: Plex Playing
    filter:
      include:
        - entity_id: 'media_player.plex*'
          state: /playing|paused|'on'/
          options:
            type: custom:hui-element
            card_type: markdown
            card_mod:
            style: |
              ha-card {
                box-shadow: none;
                background: url({{state_attr(config.entity,'entity_picture')}});
                background-size: 100%;
              }
            content: >
              {% set player = config.entity %}
              {%- for attr in states[player].attributes %}
                {%- if not attr in ['media_content_id','icon','entity_picture',
                                    'hide_attributes','media_position_updated_at',
                                    'media_duration','media_position','player_source',
                                    'media_content_rating',
                                    'is_volume_muted','username','friendly_name',
                                    'volume_level','supported_features'] %}
                {{attr|title|replace('_',' ')}}: {{states[player].attributes[attr]|title}}
                {%- endif %}
              {% endfor %}

              User: {{state_attr(config.entity,'username')}}

now only thing left is color the text in an “auto contrast” color…
and maybe the auto fit code I cant find right now. background: cover; does about the same, still too big to see all

#2190

Send me any of your pics and explain how you want to see it on the card.

#2191

Can be achieved with “invert” filter, probably.

#2192

I can’t, its a picture set by/embedded in the playing Plex media file.

about the filter, that’s not immediately very easy… ive also tried mix-blend-mode: difference; and that seems a nice starter, thought it doesn’t work as beautifully as here:

Schermafbeelding 2021-10-07 om 22.52.15
Schermafbeelding 2021-10-07 om 22.52.15916×536 152 KB

its a bit too dark now, and the text doesnt change as it does in the linked examples. As I see it, the filter or mix-blend-mode are applied to the picture, not the text.