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

anon78847916 · November 6, 2021, 4:58pm

I’d like to help, please.

Here’s my card config (I also tried replacing “style: vertical-slider-cover-card” with “ha-card” as customary but same result:

type: custom:vertical-slider-cover-card
title: Front room shades
showSidebar: false
entities:
  - entity: cover.front_bedroom_shade_left
    name: []
  - entity: cover.front_bedroom_shade_right
    name: []
card-mod:
  style: vertical-slider-cover-card {
background: url('/local/rooms/misc/frontroomwindow.png');
background-size: contain;
background-repeat: no-repeat; }

Here is the background image:

I want the image to fit inside the card (resize as the card changes size), meaning the whole image should be visible, however currently this is how it displays (different window sizes):

Two questions:

Is it possible to make my card always square, so that the image (which is 802x802px) is always displayed in full
If yes, how do I make the card always be square (1:1 aspect ratio) with the background filling all of it and resizing as the card resizes (but while maintaining the 1:1 ratio)

Thanks.

EDIT:

I changed the code to this:

type: custom:vertical-slider-cover-card
title: Front room shades
showSidebar: false
entities:
  - entity: cover.front_bedroom_shade_left
    name: []
  - entity: cover.front_bedroom_shade_right
    name: []
style: |
  ha-card {
  background-image: url('/local/rooms/misc/frontroomwindow.png');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;}

And now it displays much better, but it’s cutting off at the bottom, any ideas?

Edit2: I solved the above by using the custom card’s key that changes the slider size, increased it a bit and it now shows the whole image. Hope this helps anyone looking to do the same.

type: custom:vertical-slider-cover-card
title: Front room shades
showSidebar: false
positionHeight: 400px
openColor: rgba(161, 255, 217, 1)
closedColor: rgba(89, 89, 89, 1)
switchWidth: 60px
switchHeight: 40px
switchColor: rgba(89, 89, 89, 1)
switchFontColor: rgba(255, 255, 255, 0.8)
entities:
  - entity: cover.front_bedroom_shade_left
    name: []
  - entity: cover.front_bedroom_shade_right
    name: []
style: |
  ha-card {
  background-image: url('/local/rooms/misc/frontroomwindow.png');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;}

James_Huang · November 6, 2021, 8:02pm

Is this project capable of moving the header down to become a footer? I haven’t seen any examples… so at this point, I’m just asking if it’s theoretically possible. The old Compact Header plugin that did this broke for me in the latest build…

ASNNetworks · November 6, 2021, 8:20pm

Yes, there are some examples, but not here since this is the wrong thread for that. You need card-mod, but not using it with cards (where this thread is about) but with themes. See here:

I tried it myself back then but I didn’t like it (I had issues centering some tabs etc). You should search in that thread for ‘footer’, maybe you’ll find some code.

In any case, you can ask there for more help if you get stuck. Hopefully someone can help you. I ditched the entire header myself.

henry8866 · November 7, 2021, 4:17am

I have below code to remove the three dot on the light card. However it seems recent HA update broke it that the three dot appears again. Anyone know how to fix this? Thanks!

  - entity: light.floorlight
    card_mod:
      style: |
        mwc-icon-button {
          display: none;
        }
        .content {
          margin-top: -24px;
        }
    name: kitchen
    type: light

Philipp089 · November 7, 2021, 6:51am

Hi guys,

yesterday was a sad day. I had to finally get rid of Custom Header as it made problems with the newest Update. I am used to have my Header Icons colored, see image below or GitHub - philipp089/Home-Assistant-Config: HA Config and UI

After some trial i was finally able to change the color of the icons globally but is there a way to color each icon individually with card-mod? Any help is greatly appreciated. Other things i want to change is to get rid of the right menu (three-dotted-menu) and i want to change the box shadow. Normally i do it with:

          - type: "custom:mini-media-player"
            artwork: cover
            entity: media_player.tv_samsung_q7_series_55
            name: Fernseher Wohnzimmer
            style: |
              ha-card {
                box-shadow: 1px 1px 1px 1px var(--divider-color);
              }

but i have no clue how to affect the header. Can someone point me in the right direction here?

Cheers,
Philipp

arganto · November 7, 2021, 8:19am

Are you sure, that it is working? As far as I can see restriction embeds the sub-card without ha-card and I thought, that this is needed for card_mod to search and work.

Regardless what I try, I’m currently not able to ingest anything at card level.

type: entities
title: Rolläden
show_header_toggle: false
entities:
  - type: custom:restriction-card
    row: true
    card:
      entity: cover.alle_rolladen
      card_mod:
        style: |
          state-badge {
            color: red;
          }
      name: alle
    restrictions:
      confirm:
        text: Schalter aktivieren?
    condition:
      entity: switch.shelly_hausturklingel_klingelstatus
      value: 'off'

Ar what do you mean with your recommendation above?

Ildar_Gabdullin · November 7, 2021, 1:30pm

From the Entities card level:

      - type: entities
        entities:
          - type: custom:restriction-card
            row: true
            card:
              entity: sun.sun
              secondary_info: last-changed
        card_mod:
          style:
            restriction-card:
              $:
                hui-text-entity-row:
                  $:
                    hui-generic-entity-row: |
                      .text-content {
                        color: red;
                      }

And follow this issue:

github.com/thomasloven/lovelace-card-mod

Styling of rows with custom types stopped worked

opened 03:01PM - 24 Oct 21 UTC

ildar170975

My Home Assistant version: 2020.10.6 My lovelace configuration method (GUI or… yaml): GUI, yaml What I am doing: Trying to apply a style to a row (Entities card) with: - `config-template-card` - `restriction-card` - `fold-entity-row`. What I expected to happen: Styles are applied. Earlier it worked: - for `config-template-card`- https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1328 - for `restriction-card` - no example - for `fold-entity-row` - https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1192 What happened instead: No styles applied. **Minimal** steps to reproduce - for `config-template-card`: ``` type: entities title: config-template (row) entities: - type: custom:config-template-card entities: - sun.sun row: entity: sun.sun name: config-template style: | :host { color: green; } - type: custom:config-template-card entities: - sun.sun row: entity: sun.sun name: config-template style: hui-text-entity-row: $: | hui-generic-entity-row .text-content { color: orange; } ``` ![image](https://user-images.githubusercontent.com/71872483/138599848-5a4fbecf-ecaa-4468-85a5-9bfaf8ead6bf.png) Error messages from the browser console: none --- **By putting an X in the boxes ([]) below, I indicate that I:** - [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/). - [x] Have made sure I am using the latest version of the plugin. - [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins. - [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Ildar_Gabdullin · November 7, 2021, 1:33pm

Meanwhile - a really nice styling for mini-graph-card from @menloperk:
post

Update 22.09.22: here 3 codes are provided - one for Chrome, others work in Safari too.

arganto · November 7, 2021, 4:39pm

Hm. And where is the advantage instead of styliing from restriction card level, what was my starting point.

From my experiences, it is much more performance consuming to have this from top card level card level instead of deepest entity level. I had this with a slider entity row and it was nearly 1 second slower in having it at entity level instead of top card position.

Ildar_Gabdullin · November 7, 2021, 5:11pm

Nobody is talking about advantage.
Your method:

      style:
        $:
        hui-cover-entity-row:
          $:

was never seen before (at least by me) and seems like a glitch.
A proper method (probably which used to be used by you) stopped working - see the issue above.
Surely you may use whatever method you like.

arganto · November 7, 2021, 5:25pm

Ah o.,k. Thought that

“In your case, you should style from the Entities card level, not from restriction-card.”

Was a general recommendation from your experiences. Sorry to miss read this.

O.k. Then I stay on my additional$ work around, which works fine, until I’m perhaps able to remove it again after your bug report.

Ildar_Gabdullin · November 7, 2021, 6:22pm

Btw, the styling broken for at least these cards:

restriction-card, row mode inside Entities card
config-template-card, row mode inside Entities card
fold-entity-row inside Entities card
entity row inside picture-elements

In all these cases it was possible to style from the element’s level

CDRX2 · November 7, 2021, 8:48pm

The correct CSS code, if anyone ever comes across the same question:

            card_mod:
              style:  
                paper-buttons-row$:
                  ha-icon$: 
                    ha-svg-icon: |
                      :host {
                        animation: {% if is_state('humidifier.master_bedroom', 'on') %} blink 1s linear infinite alternate {% else %} none {% endif %};
                        color: red !important;
                      }  
                      @keyframes blink {
                        0% { opacity: 0.1; }
                        100% { opacity: 1; }
                      }

DrewXT · November 8, 2021, 4:39am

I’ve got an odd one since 2021.11.1 where it doesn’t seem that card-mod is honoring me changing icon colours in a glance card.

My code is this:

type: glance
entities:
  - entity: sensor.rubbish
    icon: mdi:delete-empty
    style: |
      :host {
        --paper-item-icon-color: red;
      }
  - entity: sensor.recycling
    icon: mdi:recycle
    style: |
      :host {
        --paper-item-icon-color: yellow;
      }
  - entity: sensor.garden_waste
    icon: mdi:leaf
    style: |
      :host {
        --paper-item-icon-color: green;
      }
title: Rubbish Bins

and in the editor preview window, I see this:

yet when I close the editor, I see this:

it’s not related to browser or OS, as I’m seeing the same thing in Edge and Chrome on Windows and Linux, as well as in the Android app.

The only change is the upgrade to HA

Ildar_Gabdullin · November 10, 2021, 12:13am

2021.11.2 - my picture is always with applied styles:

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    icon: mdi:delete-empty
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: red;
        }
  - entity: sensor.cleargrass_1_co2
    icon: mdi:recycle
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: yellow;
        }
  - entity: sensor.cleargrass_1_co2
    icon: mdi:leaf
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: green;
        }
title: Rubbish Bins

DrewXT · November 11, 2021, 5:32am

Strange - I added the card_mod: line, but still getting no colours once I exit the editor.

DrewXT · November 11, 2021, 5:50am

I also just tried adding coloured icons to a different card, and it’s done exactly the same thing… yet nothing in the logs - any idea what debugging I can turn on (if any)?

Have also reinstalled card_mod

Update: it’s working fine on my 2nd HA instance… I really don’t get this…

Luisico · November 11, 2021, 7:26am

Hi, i have css formatted several badges, it has been working until two days ago. 11.2 Core installed.

Desired look:

Since two days ago:

If i open Raw Config Editor and exit, styles are applied even without saving any changes (no one is done). I have to do that every time i open a new HA tab on web browser or open the app. Also tried with and without card_mod: label

my code is

    badges:
      - entity: person.luis_davalos
        card_mod:
          style: |
            :host {
              {% if is_state('person.luis', 'home') %}
              --label-badge-red: green;
              {% else %}
              --label-badge-red: red;
              {% endif %}
            }
      - entity: person.violeta
        card_mod:
          style: |
            :host {
              {% if is_state('person.violeta', 'home') %}
              --label-badge-red: green;
              {% else %}
              --label-badge-red: red;
              {% endif %}
            }
      - entity: sensor.temperatura_terraza
        name: Exterior
        card_mod:
          style: |
            @keyframes blinker { 50% { opacity: 0; } }
            :host {
              {% if states('sensor.temperatura_terraza') |float(0) > 40 %}
              --label-badge-background-color: red;
              --label-badge-text-color: white;
              animation: blinker 2s linear infinite;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.temperatura_terraza') |float(0) > 34 %}
              --label-badge-background-color: #FF9800;
              --label-badge-text-color: white;
              --label-badge-red: #FF9800;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.temperatura_terraza') |float(0) > 12 %}
              --label-badge-background-color: green;
              --label-badge-text-color: white;
              --label-badge-red: green;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% else %}
              --label-badge-background-color: #039BE5;
              --label-badge-text-color: white;
              --label-badge-red: #039BE5;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              animation: blinker 2s linear infinite;
              {% endif %}
            }
      - entity: sensor.media_temperatura_interior
        name: Interior
        card_mod:
          style: |
            @keyframes blinker { 50% { opacity: 0; } }
            :host {
              {% if states('sensor.media_temperatura_interior') |float(0) > 29 %}
              --label-badge-background-color: red;
              --label-badge-text-color: white;
              animation: blinker 2s linear infinite;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.media_temperatura_interior') |float(0) > 27 %}
              --label-badge-background-color: #FF9800;
              --label-badge-text-color: white;
              --label-badge-red: #FF9800;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.media_temperatura_interior') |float(0) > 18 %}
              --label-badge-background-color: green;
              --label-badge-text-color: white;
              --label-badge-red: green;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% else %}
              --label-badge-background-color: #039BE5;
              --label-badge-text-color: white;
              --label-badge-red: #039BE5;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              animation: blinker 2s linear infinite;
              {% endif %}
            }

DrewXT · November 11, 2021, 8:18am

grrr, my 2nd HA wasn’t on 11.2 - 11.2 broke card_mod when I upgraded it

thomasloven · November 11, 2021, 9:28am

I’m about to update the recommended installation method for card-mod.
It’s always been highly timing-dependent, and as hass gets more and more optimized it gets harder and harder to keep up.

Luckily, there’s a thing you can do to help.

By adding the following to your configuration.yaml (obviously adjusting the URL to where you actually have card-mod installed) and restarting, you can give card-mod a head start.
It will even be there - waiting - when the core interface parts are still loading in.

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

You may get some errors in the browser console. They can be safely ignored, and I’m currently working on some tweaks to make this installation method work even more smoothly.
Nevertheless, this should remove most issues with things working when switching tab, but not when pressing F5 and that kind of thing.

If I had started today, I would have made card-mod a custom component or integration rather than a frontend plugin. It’d be an incredibly breaking change for everyone using HACS to switch now, though. So you’ll need some manual intervention unless @ludeeus can think up some magic.