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

[elchininet]

@Mariusthvdb

that results in the same outcome in Inspector as I posted above, seems successful, but does not get applied to the Map card Markers:

Nop, that is not the same

## Correct
ha-entity-marker[entity-id="person.somebody"]

## Incorrect
ha-entity-marker[entity-id="{'entity': 'person.somebody'}"]

@Mariusthvdb

the additional div:has() makes it work!

That’s right, first problem was the wrong template, second problem is the Safari issue. You have mixed both well.

@Mariusthvdb

wow, that been huge progress @elchininet , thank you very much!

You’re welcome

@Mariusthvdb

1 - a way to apply the mod on the options option of the filtered entities:

I think that should not be done with card_mod, because the entities are not cards.

@Mariusthvdb

2 - a way to mod the more-info of a person entity with the same template logic. As this would be system wide, I am hoping to get card-mod theming to pick that up…

For this maybe a card_mod theme will be more suitable.

@Mariusthvdb

this seems to become a too complex way of getting an entity_picture to grayscale in all spots in the UI.
I just realized the more-info has the map And the entity_picture…

A dedicated plugin in the end will be much more efficient…

or a core option to customize the entity_picture states ofc… like device_class sort of thing

That’s right, card_mod should be used to modify small and specific things in specific cards. If you want something global that works everywhere, then a dedicated plugin is the way to go.

[Mariusthvdb (Marius)]

@elchininet

That’s right, card_mod should be used to modify small and specific things in specific cards. If you want something global that works everywhere, then a dedicated plugin is the way to go.

ultimately, yes, that is what I would love to see.

just consider being able to so entity entity_picture ‘translations’ like we can do icon_translations currently.
take device_trackers or person and make that work for entity_pictures

{
  "entity_component": {
    "_": {
      "default": "mdi:account",
      "state": {
        "not_home": "mdi:account-arrow-right"
      }
    }
  },

picture:

{
  "entity_component": {
    "_": {
      "default": "person_home.png",
      "state": {
        "not_home": "person_not_home.png"
      }
    }
  },

ofc, this is too simple, but I hope you get what I am after. It would be not setting a filter but referencing an actual secondary picture.

Anyways, if you have any ideas how this could be done, please DM, because getting off topic here

[vaderag]

Just got to testing this - works fantastically - thank you very much!

[Ildar_Gabdullin]

config.entity + mod-card

We use “config.entity” in many places like Entities card, Entity card, Glance card etc - like here:

  - type: entities
    entities:
      - entity: input_boolean.test_boolean
        card_mod:
          style:
            hui-generic-entity-row $: |
              state-badge {
                {% if is_state(config.entity,'on') -%}
                  color: red;
                {%- else -%}
                  color: cyan;
                {%- endif %}
              }

Also we can use “config.row.entity” in conditional rows - like here:

type: entities
entities:
  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    row:
      entity: input_boolean.test_boolean_2
    card_mod:
      style:
        hui-toggle-entity-row $:
          hui-generic-entity-row $: |
            state-badge {
              {% if is_state(config.row.entity,'on') -%}
                color: red;
              {%- else -%}
                color: cyan;
              {%- endif %}
            }

Now assume we are using mod-card for some row-like card:

decl_test_mod_card_config:
  card:
    type: custom:mod-card
    card:
      type: custom:multiple-entity-row
      entity: '[[ENTITY]]'
      name: some name
    card_mod:
      style:
        multiple-entity-row $:
          hui-generic-entity-row $: |
            state-badge {
              {% if is_state('[[ENTITY]]','on') -%}
                color: red;
              {%- else -%}
                color: cyan;
              {%- endif %}
            }

The template uses the “ENTITY” variable.
But it also can use “config.card.entity” variable:

            state-badge {
              {% if is_state(config.card.entity,'on') -%}
                color: red;
              {%- else -%}
                color: cyan;
              {%- endif %}
            }

It can be useful in case of “abstracting” parts of code.

[IdahoSnakeHouse]

Can someone help me with some missing syntax? In spite of all the reading I’ve done, I’m missing something fundamental between moving card-mod styles from a card to a theme.

This works using card-mod with a Mushroom Select card:

card_mod:
  style:
    mushroom-select-option-control$:
      mushroom-select$: |
        .mdc-select__anchor {
          border-radius: 30px !important;
        }

Therefore, I thought it would be easy to move it to a theme. However, the following does not work:

  card-mod-card-yaml: |
 
    .type-custom-mushroom-select-card$:
      .mushroom-select-option-control$:
        mushroom-select$: |
          .mdc-select__anchor {
            border-radius: 30px !important;
          }

I assume I’m off somewhere with the .type-custom-mushroom-select-card$: but I’ve tried a lot of different things. Now I’m not sure if I need to be chasing shadow root stuff, indentation, etc. Any help would be greatly appreciated!

[Ildar_Gabdullin]

Fix for a restriction card inside a Grid with square cells

Test code:

  type: grid
  square: true
  cards:
    - type: custom:restriction-card
      card:
        type: entity
        entity: sun.sun
    - type: entity
      entity: sun.sun
    - type: history-graph
      entities:
        - sun.sun
    - type: custom:restriction-card
      card:
        type: entity
        entity: sun.sun
  columns: 2

Default look:

Modded:

type: custom:mod-card
card_mod:
  style:
    hui-grid-card $:
      hui-card:
        restriction-card $: |
          :first-child, div#card {
            height: 100%;
          }
        .: |
          restriction-card {
            height: 100%;
          }
card:
  type: grid
  square: true
  ...

Issue on Github.

[isaak]

I want to change the opacity of the selected part, so it looks like the other parts, but I can’t figure out how to target it.

[isaak]

I managed to target it.

but when I make my background like the other parts, the opacity change doesn’t work.

[gilles.blampain]

Hi,
I have an issue with the transparency of my mushroom cards on my mobile (iOS device). Everything is perfect on PC screen tough !
I searched this forum for days but couldn’t find an answer…

On my PC screen:

On my phone:

sample of code of ‘Prime Video’ key

type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: phu:prime-video
badge_color: cyan
tap_action:
  action: perform-action
  perform_action: media_player.select_source
  target:
    entity_id: media_player.salon
  data:
    source: Prime Video
icon_color: light-blue
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        box-shadow: 0px 8px 15px 0px rgba(0,0,0,0.36) !important;
      }
    .: |
      :host {
        --mush-icon-size: 80px; 

      ha-card {
        background: none;
        width: 110px;
        box-shadow: none;
        padding-left: 15px !important;
          
        
      }       

Do you have an idea where the issue is ?
Thank you in advance !

[Ildar_Gabdullin]

Headings card

Some super useful/useless styles:

code

type: vertical-stack
cards:
  - type: heading
    icon: mdi:fan
    heading: some long long long long long long title
    heading_style: title
    badges:
      - type: entity
        entity: sun.sun
        icon: mdi:fan
      - type: entity
        entity: fan.kitchen
    card_mod:
      style:
        .badges hui-heading-badge:nth-child(1) hui-entity-heading-badge $: |
          ha-heading-badge {
            --icon-color: red;
          }
          state-display {
            color: magenta;
          }
          ha-state-icon {
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(0);}
            100% {transform: rotate(359deg);}
          }
        .badges hui-heading-badge:nth-child(2) hui-entity-heading-badge $: |
          ha-heading-badge {
            --icon-color: orange;
          }
          state-display {
            color: red;
          }
          ha-state-icon {
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(359deg);}
            100% {transform: rotate(0);}
          }
        .: |
          ha-card {
            background-color: lightgreen !important;
            border-radius: var(--ha-card-border-radius, 12px);
            border-width: var(--ha-card-border-width, 1px);
            border-style: solid;
          }
          .title > p {
            color: red;
            white-space: break-spaces !important;
          }
          .title ha-icon {
            --icon-primary-color: yellow;
            --mdc-icon-size: 32px;
            animation: rotating 2s linear infinite;
          }
          @keyframes rotating {
            0% {transform: rotate(0);}
            100% {transform: rotate(359deg);}
          }

  - type: entities
    entities:
      - entity: sun.sun
      - entity: sun.sun

[Ildar_Gabdullin]

Regarding the earlier discussion about styling a Map card:
Some time ago a card-mod based styling for markers was not persistent after F5 (post) - and we have to use an external js-file described here.
Retested the card-mod way - seems to be stable:

  - type: map
    entities:
      - device_tracker.xxx
    card_mod:
      style:
        ha-map $ ha-entity-marker $: |
          .marker {
            border: 1px solid red !important;
            background-color: yellow !important;
          }

[Mariusthvdb (Marius)]

was experimenting with this too just now, and looking for a way to style the individual entity:

        entities:
          - entity: sun.sun
            color: state
            card_mod:
              style:
                ha-heading-badge:
                   $: |
                     .state-display {
                        color: red !important;
                     }
          - entity: sun.sun
            color: state

any chance you could help out here too?

usecase: see the post on the class in the card-mod theme just now, and requiring an override of those entities state colors

btw, I now spot that the official yaml (like you use) is with the badges, and type: entity… I had simply jotted this down:

      - type: heading
        heading: Speciale Scenes
        heading_style: title
        card_mod:
          class: class-section-heading
        entities:
          - entity: sun.sun
            color: state
            card_mod:
              style:
                ha-heading-badge:
                   $: |
                     .state-display {
                        color: red !important;
                     }
          - entity: sun.sun
            color: state

and those entities are picked up too
I’ll change that so the card-mod wont be affected by that. (still need the state-display to be modded, the icon is then car of by the color: state )

following your mods above, and considering it starts at the actual entity badge, I tried to use:

        badges:
          - type: entity
            entity: sun.sun
            color: state
            card_mod:
              style: |
                hui-entity-heading-badge $: |
                  state-display {
                    color: red !important;
                  }

but still no luck, the mod isnt applied in the path

[vaderag]

@Ildar_Gabdullin

type: glance
title: Colored name (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      :host .name {
        color: red;
      }
  - entity: sensor.cleargrass_1_co2

Glance card - trying to make the name bold… (or red at this stage, but i actually want it bold)

• <div class="name" title="Cat Flap"><!--?lit$203497311$-->Cat Flap</div>

I’ve tried every variant of this I can think of

e.g.

    - type: glance
      entities:
        - entity: lock.harley_s_flap_locked_in
          name: Cat Flap
          fill_container: true
          state_color: true
          tap_action:
            action: none
          hold_action:
            action: toggle
      card_mod:
        style: |
          ha-card {
            background: {{ 'rgba(200, 0, 0, 0.05)' if is_state('lock.harley_s_flap_locked_in', 'unlocked') else 'rgba(230, 177, 6, 0.1)' if is_state('lock.harley_s_flap_locked_in', 'locking') else 'rgba(230, 177, 6, 0.1)' if is_state('lock.harley_s_flap_locked_in', 'unlocking') else 'rgba(0, 200, 0, 0.05)'}}; 
      style:
        .entities .entity:
          $: | 
            .name {
              font-weight: red;
            }

      card_mod:
        style: |
          ha-card {
            background: {{ 'rgba(200, 0, 0, 0.05)' if is_state('lock.harley_s_flap_locked_in', 'unlocked') else 'rgba(230, 177, 6, 0.1)' if is_state('lock.harley_s_flap_locked_in', 'locking') else 'rgba(230, 177, 6, 0.1)' if is_state('lock.harley_s_flap_locked_in', 'unlocking') else 'rgba(0, 200, 0, 0.05)'}}; 

        .entities .entity:
          $: | 
            .name {
              font-weight: red;
            }

But nothing seems to change the font in question…
I managed to sort the background without too much trouble, but making something bold should be easier than this

[Timmuhhh (Tim)]

With this code:

type: entities
entities:
  - entity: input_number.octet1
    name: Voer IP in
    icon: mdi:ip-network
  - entity: input_number.octet2
    name: ' '
    icon: mdi:none
  - entity: input_number.octet3
    name: ' '
    icon: mdi:none
  - entity: input_number.octet4
    name: ' '
    icon: mdi:none

I get this card:

I would like the card to look like this (quick and dirty ms paint job):

With horizontal stack the buttons get unusable due to the white space of the title element still being there. I thought of using card-mod to eleminate the title and icon element, only leaving the number input box, and then use horizontal stack but my card-mod skills are basicly none.

There doesnt seem to be an custom card providing only the input box. Does anyone know how to achive my goal?

[vaderag]

Unrelated to my other post above, but funnily enough I’m trying to do quite similar

I want to have my button horizontal in the same pane - if i do horizontal stack it bumps it over and looks disconnected.

(I also want to round my text boxes but that’s a problem for another day!)

[Ildar_Gabdullin]

@Mariusthvdb

any chance you could help out here too?

Do you want to style a particular entity in the Heading card?
The example I posted above contains styles for an icon & “state-display”.

[Mariusthvdb (Marius)]

yes, but that is using the mod on the nth number of entity, seen from the main header?

I’d love to do that on the entity itself

[slimak]

Hi guys! I want “ripple effect” in weather-forecast card, when it gets clicked. In the video below, the card on the left has “ripple effect” but weather-forecast card on the right doesn’t.

I “buttonized” the weather-forecast card (it’s inside button-card, so that it looks the same as my other cards). Therefore I think either of below methods could work:

1. add “ripple effect” to weather-forecast card
   OR
2. make button-card intercept click event, instead of weather-forecast card.

My code (only relevant parts):

1. button-card template to “buttonize” other cards:

buttonize:
  show_icon: false
  show_name: false
  show_state: false
  styles:
    card:
      - border: none
      - color: '#4b5254'
      - background-color: 'rgba(250, 250, 250, 0.75)'
      - padding: 0px
      - box-shadow: inset 0 0 20px var(--state-inactive-color)
      - '--mdc-ripple-color': 'rgba(0, 0, 0, 0.8)'
      - '--mdc-ripple-press-opacity': 0.5
    grid:
      - grid-template-areas: |
          "inner_card"
      - grid-template-columns: auto
      - grid-template-rows: auto
  tap_action:
    action: more-info

2. “buttonized” weather card:

type: custom:button-card
template: buttonize
entity: weather.forecast_dom
custom_fields:
  inner_card:
    card:
      type: weather-forecast
      show_current: false
      show_forecast: true
      entity: weather.forecast_dom
      forecast_type: daily
      card_mod:
        style: |
          ha-card {
            padding: 0px 0px 4px 0px !important;
            border: none;
            background-color: transparent;
          }
          /* here goes much more styling, irrelevant for the question */

[Ildar_Gabdullin]

Hmm, I do not think this is possible. Will try a bit later once again. Note that in a “buttons-row” it was also not possible to style “from the button’s level” - here it seems to be a similar story.

[Mariusthvdb (Marius)]

right, that could be it yes.

I had hoped to use :host or some other high level element…
maybe you’ll find it, Ill keep trying too