šŸ”¹ Card-mod - Add css styles to any lovelace card

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

You havenā€™t said which media player card that is.

1 Like

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ā€¦

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 !

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

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

4 Likes

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;
        }

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;
            }

Thanks, got it:

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

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.

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!

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.

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

Good to know, thx.

ā€¦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;
            }

Sure, many options available ā€¦ as long as you get what want.cheers!

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.

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;
	}

so we can set:

          card_mod:
            style:
              ha-map $ ha-entity-marker $: |
                .marker {
                  filter: grayscale();
                }

on the Map card itself, but then we can not use the state of the individual config.entity?

translating that same path to the options: under the filter of auto-entities is beyond me for now.

Hi! How to add this style for child div inside bootstrap-grid-card and #staging?

height: calc(100vh - var(--header-height));
display: flex;
flex-direction: column;

Iā€™ve tried any mod I could find in this thread, and none seem to work the using Map card like this buit with auto-entities

Note I am also not using person entities anymore, because they lose their lat/long when home on wifiā€¦
Composite device trackers work much better in that regard.

        type: custom:auto-entities
        show_empty: false
        filter:
          include:
            - #domain: person
              entity_id: device_tracker.*composite
              not:
                state: home
              options:
                card_mod:
                  style:
### aware this is not the correct DOM here, but only posting for reference sake, and show what I need
                    ha-entity-marker:
                      $: |
                        entity-picture {
                          filter: {{'grayscale()' if not is_state(config.entity,'home')
                                    else 'none'}};
                        }
        card:
          type: map
          hours_to_show: 48
          auto_fit: true
          dark_mode: ${(/ight|Dark|Matrix/).test(theme)} #${darkmode}
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
              }

seems I have but 1 solution, and that is go back to my custom-ui plugin and do this:

homeassistant:

  customize:

    person.marijn: &picture
      templates:
        entity_picture: >
          var id = entity.entity_id.split('.')[1];
          return state === 'not_home'
          ? '/local/family/' + id + '_not_home.png' : '/local/family/' + id + '.jpg';

and have the entity itself use another picture based on state.
it makes it 100% reliable, show the correct picture also in Moreinfo, and does so system wide, without the need for any card_mod anywhere on the Map card, or any card I need to show these trackersā€¦

Had hoped it not to be the case, but I see no other way