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

[Snacker]

I have been trying to read and follow the syntax for cardmod across the 4000+ great comments, but I consistently fail to get this working on my own cards (or follow the logic of how others are approaching).

As a simple example on a slider row, just to see if I can follow a solution. I am trying to change the text-align of the number from the default left to center. I have tried all sorts, but without success and am really just shooting in the dark at this stage!

Here is a very basic card I am playing with:

type: custom:slider-entity-row
entity: input_number.bed_timer 
full_row: true
grow: false
show_header_toggle: false
state_color: true
card_mod:
  style:
    slider-entity-row$: |
      .state {
        text-align: center !important;
      }

Can someone help educate me please! Knowing how to properly interrogate (or make baby-steps towards) with give me lots of new things to play around with!!

[Ildar_Gabdullin]

code

type: entities
entities:
  - type: custom:slider-entity-row
    entity: input_number.test_number 
  - type: custom:slider-entity-row
    entity: input_number.test_number 
    card_mod:
      style: |
        .state {
          text-align: center !important;
          color: red;
        }

[Snacker]

Thank you very much for the solution. That was a variant I had tried previously, but the missing point was to embed it within an entities card. Is that generally something required rather than just directly having the custom card?

[Ildar_Gabdullin]

@Snacker

within an entities card

[Snacker]

Thanks for clearing that up, I confess I had read that but not really understood it (and since it wasn’t an exhasutive list - impossible I assume!) That will help me tackle a load more stuff now!

[Mariusthvdb (Marius)]

simple challenge, no easy fix?

have a picture-entity card with a default camera stream from Buienradar integration. I want to have it squared, so I can fit it in a stack/grid or other config, next to a 1/1 custom:button-card.

There is no property I can find to auto resize this picture-entity so it always covers the square it should. I can give it a larger canvas, but then it doesnt resize properly, and ofc, therein lies the challenge. Have it show properly on desktop And mobile:

    - type: horizontal-stack
      cards:
        - !include /config/dashboard/includes/button/include_button_animated_weather.yaml
        - type: picture-entity
          card_mod:
            style:
               hui-image:
                $: |
                  #image {
                    object-fit: cover;
                  }

if I mod the card itself, the image wont change along, so I probably need to set the #image property.

my goal is to tie these together and flatten the picture with:

    - type: custom:mod-card
      card_mod:
        style: |
          ha-card {
            --stack-card-margin: 0px;
            --ha-card-box-shadow: none;
          }
      card:

and have it show like:

fwiw, stack-in-in-card has the identical result:

    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - !include /config/dashboard/includes/button/include_button_animated_weather.yaml
        - type: picture-entity

the official way to make an image resize automatically, as instructed at W3 seems to already been implemented…:

        - type: picture-entity
          card_mod:
            style:
              hui-image:
                $: |
                  #image {
                     max-width: 100%;
                     height: auto;
                  }

makes no difference what so ever

Please have a look how I can make this fit better?
thx

Update

made a wild guess and searched for ‘ratio’… lo and behold;

    - type: custom:stack-in-card
      mode: horizontal
      cards:
        - !include /config/dashboard/includes/button/include_button_animated_weather.yaml
        - type: picture-entity
          card_mod:
            style:
              hui-image:
                $: |
                  #image {
                    aspect-ratio: 1/1;
                  }
          entity: camera.buienradar
          show_state: false
          show_name: false
          camera_view: auto

which resizes perfectly on any size. ofc the image is a bit out of perspective. Still havent found a way to zoom in only. other than

                      transform: scale(1.2);

which loses the time stamp in the top. does keep the perspective 100%

should have though of that earlier, since button-card uses that with a reason
see: aspect-ratio | CSS-Tricks - CSS-Tricks for some extra explanation
bingo!

[Bagunda]

How to connect a font to a specific entity, downloaded from the Internet?

[ASNNetworks]

Can someone perhaps help me style an element inside a card (custom tabbed-card). I have found the correct code and it works using inspect element. However I am having difficulties using it is card_mod, since I have no clue how to traverse the DOM correctly. I have been at it trying to traverse the DOM for 2 weeks now with no succes. I hope someone can find the time to help me with this.

It’s located in this line: mwc-tab-bar. And the changes I want to add to are in

:host {
    display: block;
}

Any help is greatly appreciated!

[ariel]

Trying to customize the color of the icon of a button that is included in an entities card. I’ve found references aboves to the below pattern that uses ha-state-icon:

              - type: button
                entity: input_boolean.inhibit_siren_sound
                icon: mdi:volume-off
                name: Siren Sound is DISABLED
                action_name: enable
                card_mod:
                  style:
                    ha-state-icon:
                      $: |
                        ha-svg-icon {
                          color: green;
                        }      
                tap_action:
                  action: toggle

It just does not work. This is with HA 2023.2, default dark theme.

card_mod is working well in my install as I am using it to conditionally color icons of other entities. It doesn’t seem to work with buttons for some reason.
I tried many variations of this with no luck. I also tried setting state_color to False, to no avail.

Any hint/idea?

[Ildar_Gabdullin]

code

type: entities
entities:
  - type: button
    name: entity specified
    entity: input_boolean.test_boolean
    tap_action:
      action: none
    card_mod:
      style:
        ha-state-icon $ ha-icon $: |
          ha-svg-icon {
            color: magenta;
          }
  - type: button
    name: entity NOT specified
    tap_action:
      action: none
    card_mod:
      style:
        ha-state-icon $: |
          ha-svg-icon {
            color: cyan;
          }

Main post here.

[Ildar_Gabdullin]

@ariel

I tried many variations of this with no luck.

This happened because users just copy/paste solutions without attempting to find out a reason by Code Inspector.

[Djdevil (Davide)]

hello all how do i display a text based on a state i tried this code but it doesn’t work! can you help me thanks

- type: custom:multiple-entity-row
        entity: sensor.conteggiotapparelle
        style: |
          .state.entity {           
            {% if states('sensor.controllotapparellenotificheestate')== 'on' %}
              content: "da";    
            {% endif %}
            {% if states('sensor.controllotapparellenotificheestate')== 'off' %}
               content: "da";           
            {% endif %}
          }
        state_color: true
        icon: mdi:information
        toggle: false
        name: STATO
        state_header: TAPPARELLE

[Ildar_Gabdullin]

What do you want to achieve?
I am not an expert in CSS, but imho the “content” property is used for pseudoclasses like “after” & “before”.

Styling multiple-entity-row: go to 1st post → link at the bottom → styles for multiple-entity-row

[Djdevil (Davide)]

I simply want to display a custom state against the original state of the sensor

[Ildar_Gabdullin]

A small picture describing your needs is better than 100 words.
Post s draft made in MS Paint or whatever.

[ariel]

thanks @Ildar_Gabdullin !!

Great pointer. I tried this in a plain entities card and it worked fantastic.
Now my case is actually a bit more complicated, I have a conditional card embedded in the entities card, like so,

              - type: conditional
                conditions:
                  - entity: input_boolean.inhibit_siren_sound
                    state: 'on'
                row:
                  type: button
                  entity: input_boolean.inhibit_siren_sound
                  icon: mdi:volume-off
                  name: Siren Sound is DISABLED
                  action_name: enable
                  #state_color: False
                  card_mod:
                    style:
                      hui-conditional-row:
                        $:
                          hui-button_row:
                            $:
                              ha-state-icon $ ha-icon $: |
                                ha-svg-icon {
                                color: green;
                                }      
                  tap_action:
                    action: toggle

Where you can see I tried to change the color of the icon, but this did not work - I took some hints from your post and looking at the browser console, which shows:

Unfortunately I have an almost zero understanding of html styling and all my tests failed. I can see that card_mod gets triggered and inserts some code right before hui-conditional-row ends but I can see that’s the wrong place for the insertion. I tried to get the insertion to be done within “ha-icon” but couldn’t. I tried some variations like,

card_mod:
   style:
     hui-conditional-row $ hui-button_row $ ha-state-icon $ ha-icon $: |
       ha-svg-icon {
         color: green;
       }      

none of which worked. Any idea/pointer on how to tackle this case?

[Ildar_Gabdullin]

@ariel

hui-button_row

typo?
Correct it and test again, see if it helps you.

[ariel]

Definitely a typo! Thanks.
Still no there though,

card_mod:
                    style:
                      hui-conditional-row:
                        $:
                          hui-button-row $ ha-state-icon $ ha-icon $: |
                                ha-svg-icon {
                                  color: green;

Card_mod still not inserting color:green like it does in the plain entity example; it does insert the stance in the html code but it’s empty, there is no color: green in it for some reason

[Ildar_Gabdullin]

@ariel

hui-conditional-row:
                        $:
                          hui-button_row:
                            $:

Try removing this

[ariel]

In the end, reading the documentation of this custom module, I found this;

NOTE: card-mod only works on cards that contain a ha-card element. 
This includes almost every card which can be seen, but not e.g. conditional, 
entity_filter, vertical-stack, horizontal-stack, grid.

Note, though that those cards often include other cards, which card-mod 
can work on.
See the manual for each card to see how to specify parameters for the 
included card(s).

Which I guess explained my problem. I thought about working around the issue by using vertical-stack-in-card and then a conditional card with an entities card inside, but in the end I opted to use a custom button-card with a bunch of templates in it to customize icon color, label, and actions, to achieve roughly the same result with less code (it doesn’t look as nice though as native buttons, for this use case)