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

[mviamin]

I have been struggling with this card. I want to eliminate the 2 white bands on each side of the artwork which does not seem to stretch all the way to fill the card. I tried with the “host”, which I temporarily put in red for visibility, but that does not accomplish what I need. Any help ?

Second question : is there a way to dynamically change the font of the text to adapt to the artwork. For instance, black text of the artwork is predominantly light (as in this picture), or white text if the artwork is predominantly dark ?

Thank you !

card_mod:
  style: |
    ha-card {
      {% if not is_state(config.entity, 'off') %}
        background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        background-blend-mode: overlay;
        background-color: rgba(var(--rgb-card-background-color),0.5);
      {% endif %};
      height: 85px!important;
    }
    :host {
    background-color: red;
    }
    mushroom-shape-icon {
    --card-mod-icon: 
      mdi:music
    }

[dyfcom (Tetra)]

Hey,

I got problem to add padding or other changes to multiple-entity-row with card_mod and I don’t know where my problem is:

did the same with the bar-card It worked with:

        card_mod:
          style: |
            ha-card {
              padding: 12px;
              margin-left: 12px;
              margin-right: 12px;
            }

Thanks!

[VietNgoc (Ngoc John)]

you’re in edit mode

[parautenbach (Pieter Rautenbach)]

Do you see the injected styles in the HTML at the correct level when you inspect it?

[parautenbach (Pieter Rautenbach)]

You haven’t said which media player card that is.

[Mariusthvdb (Marius)]

please help me out with this probably simplest thing: how to change the badge color (using a templated color, not the theme variables) on a core type: tile card. These 2 mods work fine, but are not yet what I am looking for

        card_mod:
          style: |
            ha-card {
              background-color: {{states('sensor.xxx_background_color')}};
            }
            .badge {
              --tile-badge-icon-color: {{states('sensor.xxx_icon_color')}};
            }

using inspector I found the obvious --tile-badge-background-color on ha-tile-badge but I cant make that happen if I add it to

            ha-tile-badge {
              --tile-badge-background-color: {{states('sensor.xxx_background_color')}};
            }

or even the .badge

            .badge {
              --tile-badge-icon-color: black;
              --tile-badge-background-color: green;
              /*background-color: black*/
            }

using background-color in .badge has an effect, but the wrong effect. as it does color the complete background of the badge, and not the badge itself…

I did manage to set the border of the image and filter it based on state:

            .icon-container {
              border: solid {{states('sensor.xxx_background_color')}} 4px;
              border-radius: 50px;
            }
            ha-tile-image {
              filter: {{'grayscale(1)' if not is_state(config.entity,'home') else 'none'}};
            }

But, the color of the badge background remains to be found…
please have a look?

update

heck, I keep forgetting !important…

            .badge {
              --tile-badge-icon-color: black;
              --tile-badge-background-color: green !important;
              /*background-color: black*/
            }

makes it work, and overrides the theme colors.

one challenge left, why the filter is applied in Chrome, but not in Safari…

[mviamin]

Sorry, my bad.

The main card is mushroom.

type: custom:mushroom-media-player-card
entity: media_player.pyrite
icon: mdi:music
use_media_info: true
show_volume_level: true
primary_info: name
tap_action:
  action: navigate
  navigation_path: /tablet-dash/media
fill_container: true
layout: horizontal
volume_controls: []
card_mod:
  style: |
    ha-card {
      {% if not is_state(config.entity, 'off') %}
        background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        background-blend-mode: overlay;
        background-color: rgba(var(--rgb-card-background-color),0.5);
      {% endif %};
      height: 85px!important;
    }
    :host {
    background-color: red;
    }
    mushroom-shape-icon {
    --card-mod-icon: 
      mdi:music
    }

Thanks for the help !

[hazio]

How would I go abouts adding a secondary title using area or picture-glance card? thanks

[Mariusthvdb (Marius)]

found the inspiration for the solution in the Mushroom topic, targeting the element in the Shadow directly:

        card_mod:
          style:
            mushroom-shape-avatar$: |
              .picture {

                 filter: grayscale(1);
              }

translating to Tile card:

      - type: tile
        entity: person.me
        show_entity_picture: true
        card_mod:
          style:
            ha-tile-image$: |
              .image {
                filter: grayscale(1);
              }

and in the full decluttering with additional background image (for Zone) and some special css mods for its position:

card:
  type: tile
  show_entity_picture: true
  state_content:
    - state
    - last-changed
  entity: person.[[id]]
  card_mod:
    style:
# Make this filter work in Safari too ;-)
      ha-tile-image$: |
        .image {
          {% set zones = states.zone|map(attribute='name')|list %}
          filter: {{'grayscale(100%)' if not is_state(config.entity,'home') and
                      states(config.entity) not in zones else 'none'}};
        }

      .: |
        {% set id = '[[id]]' %}
        {% set zones = states.zone|map(attribute='name')|list %}
        ha-card {
          border: solid {{states('sensor.'~id~'_background_color')}} 2px;
          background-color: var(--background-color);
          background-image: url("{{states('sensor.'~id~'_overlay_image')}}");
          background-size: 30px;
          background-position: 95% 50%;
          background-repeat: no-repeat;

          /*filter: {{'grayscale(100%)' if not is_state(config.entity,'home') and
                     states(config.entity) not in zones else 'none'}};*/
        }
        .badge {
          /*--tile-badge-icon-color: {{states('sensor.'~id~'_background_color')}};*/
          /*--tile-badge-background-color:
              {{states('sensor.'~id~'_background_color')}} !important;*/
          /*background-color: black*/
        }
        .icon-container {
          border-radius: 24px;
          /*filter: {{'grayscale(1)' if not is_state(config.entity,'home') and
                     states(config.entity) not in zones else 'none'}};*/
          border: solid {{states('sensor.'~id~'_background_color')}} 3px;
        }
# This filter does NOT work in Safari
#           ha-tile-image {
#             {{'filter: grayscale(100%)' if not is_state(config.entity,'home') and
#                        states(config.entity) not in zones}};
#           }

id~background-color shows
green: home (no overlay image)
orange: in activity
purple: in Zone (remnant from my life360 days…)
white: abroad
grey: otherwise

[NeoFax75]

I am trying to change a picture card to shrink and center an image to a specific size. The original pic is 2164x2164 px and I want the picture card to adjust the image to 200x200 px and center it. Everything I have tried just cuts the image, but changes the height and/or width of the card.

- type: picture
      image: /local/img/hass_os1.png
      title: 'Home Assistant'
      style: |
        ha-card {
          height: 200px !important;
        }

[e-raser]

How to remove that line above a header?

      - type: custom:fold-entity-row
        head:
          type: section
          label: 🕒 Historie
        padding: 0
        open: true
        group_config:
          state_color: true
        entities:
...

---

Edit: solved with

      - type: custom:fold-entity-row
        head:
          type: section
          label: ABC
          style: |
            .divider {
              background-color: transparent !important;
            }

[Montreal666]

Thanks, got it:

        card_mod:
          style: |
            mwc-list-item {
              line-height: 3rem;
            }

[Mariusthvdb (Marius)]

@e-raser

          style: |
            .divider {
              background-color: transparent !important;
            }

first of all, you should use the

card_mod:

key before that. Aware this might still work, but it is legacy format, so adjust and be safe.

also, your mod doesn’t not ‘remove’ it, is merely doesnt colorize it.
taking it out is done with:

          .divider {
            display: none;
          }

and then you should see the folds move up just a bit.

[ncd]

Hey @Ildar_Gabdullin , I’ve been using a lot of your tricks - this is a true wealth of information and I keep coming back to this one! I’m a bit stuck with styling a mushroom card, however and cannot find a solution.
I have a regular mushroom template card. I want to use a CSS “translate” command to move the main icon lower (because I have a bunch of other modifications that make it necessary to look good).

The issue I’m facing is that on my phone, to make it look good I need to translate in the Y axis by 20px but on a larger tablet, it needs to be more like 40px.

I know the ‘px’ units is meant already to adjust for screen size but apparently not enough.

Do you know if it’s possible to detect the height of a mushroom card in px and based on that I can make the correct translation calculation. (I know card_mod supports templating)?

Thank you!

[Kanecaine]

Hey guys, i’ve successfully used card_mod multiple times before. But now i can not get it to work for a template-entity-row within a decluttering-card.

From what i have read here, this is how it is supposed to work:

decluttering_templates:
  window_list:
    card:
      type: custom:template-entity-row
      entity: '[[entity_id]]'
      card_mod:
        style:
          div#wrapper:
            state-badge $: |
              ha-state-icon {
                color: red !important;
              }
            .: |
              .info {
                color: cyan;
              }

But it doesn’t. The card-mod-tag gets not injected to the DOM.

As i found out, it works if i nest the entity-row in a mod-card. But a ha-card element at a place where an entity row was supposed doesn’t feel “right”:

decluttering_templates:
  window_list:
    card:
      type: custom:mod-card
      card_mod:
        style:
          template-entity-row $: |
            div#wrapper .info {
              color: cyan;
            }
      card:
        type: custom:template-entity-row
        entity: '[[entity_id]]'

So my questions are: what am i doing wrong that the first option does not work? And is the second option a real alternative - or is this not advisable? I ever tried not to use the mod-card because of the warnings of the author himself.

[LiQuid_cOOled]

Not to interject, but are you using position: and/or float: ? It may help assist with your issue.

[e-raser]

Good to know, thx.

@Mariusthvdb

and then you should see the folds move up just a bit.

…and exactly that’s a side effect which is pretty ugly as the header text and the icon on the right are now not horizontally aligned anymore. Adding a margin-bottom: XXpx; to the .divider makes no difference. So instead of fixing a thing introduced by fixing a thing, I tend to continue using the “make it invisible” approach. …unless you know a smart approach. Likely I now need to add a margin-top to the header element… only getting more complex this way, right?

            .divider {
              background-color: transparent !important;
              #margin-top: -15px !important;
            }

            .divider {
              display: none;
              margin-bottom: 15px;
            }

[Mariusthvdb (Marius)]

Sure, many options available … as long as you get what want.cheers!

[Mariusthvdb (Marius)]

trying to set a filter on a map with auto-entities person s…

        type: custom:auto-entities
        show_empty: false
        filter:
          include:
            - domain: person
              state: home
              options:
                card_mod:
                  style:
                    ha-map$:
                      ha-entity-marker$: |
                        div#entity_picture {
                            filter: grayscale(1);
                        }

if I can get the do path right, I will adjust the template for the filter to only grayscale on not ‘home’,

filter: {{'grayscale(100%)' if is_state(config.entity,'home')
                                                else 'none'}};

but for now need to first get this right.

can anybody help me out here? I did check the first post on Map, but that is not helping me right now, as far as I can see it…

customElements.whenDefined('ha-entity-marker').then(() => {
    const EntityMarker = customElements.get('ha-entity-marker');
    const { html, css } = EntityMarker.prototype;

    // defined added style
    const newStyle = css`
    .marker:has(.entity-picture) {
      border: none !important;
      border-radius: 10%;
      background-color: transparent !important;
      filter: grayscale(1) !important;}`;

    const newStyles = [].concat(EntityMarker.styles, newStyle);
    // The LitElement class has already been finalized, but hopefully not yet instantiated
    // guess I'll just do it the hard way
    Object.defineProperty(EntityMarker, 'styles',        {value: newStyles, configurable: true, enumerable: false});
    Object.defineProperty(EntityMarker, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
  });

is loaded without errors, and the border-radius is applied, so I can see that is functional. NO filter though…

fwiw, on an entities card this always works solidly:

              options:
                card_mod:
                  style:
                    hui-generic-entity-row:
                      $: |
                        state-badge {
                          filter: {{'grayscale(100%)' if not is_state(config.entity,'home')
                                    else 'none'}};
                        }

but that obviously is of no help in a Map, other than the filter template being correct.

[dolodobendan]

Is there way to change the name in a glance card with card_mod? I know it’s possible to use name: (without card_mod), but I need to do it within card_mod (conditions) and name: test does not work. I can change the icon, its color… How do I change the name here?

card_mod:
  style: |
	:host {
		--paper-item-icon-color: salmon;
		--card-mod-icon: mdi:check-circle-outline;
		name: test;
	}