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

The latest in HACS, 3.0.9

You should raise an issue.

as in, on github?

Yes, make an issue there.

Change the resource type from js to module.

One more reason to use card-mod - struggling with a clipped tooltip for "history-graph" card:


The problem appears when the "history-graph" card is placed inside "custom:stack-in-card".

A possible reason of this clipping - CSS style "overflow: hidden" used for "custom:stack-in-card".
How to solve:

type: 'custom:stack-in-card'
style: |
  ha-card {
    overflow: visible !important;
  }
cards:
  - type: history-graph
    title: tooltip + stack-in-card
    entities:
      - sun.sun
    hours_to_show: 6
    refresh_interval: 0

More examples are described here.

I’m trying to make the word “Fan” not appear but I would like to still be able to adjust the distance between the fan icon and the buttons. Nothing I try seems to affect it. There is an “Off” button that is not shown.

I would also like to adjust the fan icon up a little to make it even with the buttons. I adjusted the size of the icon but I can’t move it.

Is anyone else having an issue with card-mod changes not being displayed in fully kiosk browser? Everything else appears and works but none of these changes show up. I cleared fully kiosk’s cache but that didn’t solve the issue.

The fan icon is not going to stay red. I was just testing. Eventually, I would like to have the icon rotate at different speeds depending on which button was pressed.

image

              - type: entities
                show_header_toggle: false
                card_mod:
                  style:
                    '#states div':
                      fan-control-entity-row$:
                        hui-generic-entity-row$:
                          state-badge$:
                            ha-icon$: |
                              ha-svg-icon {
                                width: 48px;
                                height: 48px;
                                margin-bottom: 5px;
                               }
                            .: |
                              ha-icon { color: #fa051e; }
                        .: |
                          button.speed {
                            min-width: 48px;
                            height: 36px;
                            font-size: 14px !important;
                           }
                          .info {
                            display: none;
                           }
                entities:
                  - entity: fan.master_bedroom_fan
                    name: Fan
                    type: 'custom:fan-control-entity-row'

I have also tried changing the name and with/without !important:

                           }
                          info.pointer.text-content {
                            margin-left: 30px !important;
                           }

and

                          '#info.pointer.text-content div' {
                            margin-left: 30px !important;
                           }

Any help is greatly appreciated.

hello, I would like to apply the css style to ha-icon and set the style to “display: inline;” to a ha-icon because the icon is bigger then the element state-badge when i landscape the iphone. i have try so many way but still fail. please somebody help me out.

  floor_plan_button10:
    element:
      entity: '[[entity_1]]'
      style:
        '#root > hui-conditional-element > decluttering-card':
          $: |
            "#declutter-child": 
              $: |
                "s#tate-badge":
                  $: |
                    ha-icon {
                      display: inline;
                    }
        '#state-badge':
          $: |
            ha-icon {
              display: inline;
            }
        height: 4vw
        width: 4vw
        max-width: 4vw
        max-height: 4vw
        display: inline-flex
        align-self: start
        text-align: start
        margin-right: 0px
        '--mdc-icon-size': 90%
        transform-origin: left
        '--paper-item-icon-color': darkgrey
        align-items: center
        background-color: 'rgba(255, 255, 255, 0.4)'
        border-radius: 40%
        box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
        justify-content: center
        left: 44%
        top: 35%
        position: absolute
      tap_action:
        action: toggle
      hold_action:
        action: fire-dom-event
        haptic: success
        browser_mod:
          command: call-service
          service: script.general_button_card_detail_popup
          service_data:
            deviceID: this
            entity_1: input_boolean.ceiling_light
      text-align: center
      type: state-icon
      card_mod:
        style: |
          "#root > hui-conditional-element > decluttering-card":
            $: |
              "#declutter-child": 
                $: |
                  state-badge > ha-icon {display: inline;}

          "#state-badge":
            $: |
              ha-icon {
                display: inline;
              }


num2

Why are you replying to that person?

Try playing around with position: relative.

Thank you KTibow. I was able to get the fan icon to move upwards using position: relative.

Do you happen to know if I am using the correct name for the word Fan? I can’t seem to make it do anything.

info.pointer.text-content

Has anyone else had an issue with mod-card changes not appearing in the fully kiosk browser? In the Fully Kiosk browser it looks like I didn’t do anything.

Edit; I found the solution to mod-card changes not showing. I use a Fire HD 10 to display Home Assistant lovelace. Once I updated the Fire OS from 7.3.1.2 to 7.3.1.8 I was able see the changes.

Hello, is it possible to color this image according to the stats?

Sans titre

                - attribute: BMI
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/b_m_i.webp
                  name: IMC
                  style:
                    hui-image:
                      $: |
                        #image {
                          {% set imc = state_attr('bodymiscale.aurelien', 'BMI') | float %}
                          {% if 0 < imc < 18.4 %}color: blue;
                          {% elif 18.5 <= imc <= 25 %}color: green;
                          {% elif 25.1 <= imc <= 28 %}color: yelow;
                          {% elif 28.1 <= imc <= 32 %}color: orange;
                          {% else %}color: red;
                          {% endif %}
                        }
                  type: attribute

What do you see if you enter it into the template tab of HA devtools?

That’s an image. It doesn’t have a color attribute. Check out the css property filter, but remember that if you rotate around the color wheel starting from black, you’ll always end up at black.

color: green

The formula is ok but the css mod I’m lost😉

Change color: blue to something with filter. First of all, add an invert(1). Then, try playing around with brightness and saturate. Finally, to set the color, use hue-rotate. Try googling “css filter” if you’re lost.
And you made a typo in yellow.

Does anyone happen to know if I am using the correct name for the word Fan? I can’t seem to make it do anything. I would like to hide the word Fan.

Fan

Different names I have tried.

info.pointer.text-content

'#info.pointer.text-content div'

.info

It’s probably in a shadow root.

Unfortunately nothing happens

test with brightness, invert and saturate. Is the formatting good ?

                - attribute: BMI
                  entity: bodymiscale.aurelien
                  image: /local/bodyscale/b_m_i.webp
                  name: IMC
                  style:
                    hui-image:
                      $: |
                        #image {
                          filter: hue-rotate(10deg);
                        }

Otherwise I found an easy site for the conversion https://codepen.io/sosuke/pen/Pjoqqp
exemple:
green #008000
filter: invert(20%) sepia(84%) saturate(4295%) hue-rotate(96deg) brightness(100%) contrast(107%);

Nice. You might want to use a better shade of colors that isn’t so saturated, but if this works, then that’s great.