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

Iā€™ve started revising styles listed in this post due to the latest changes.

3 Likes

Thanks a lot for all the time you spend updating this post

Agreed!Ā 

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:

  1. Is it possible to make my card always square, so that the image (which is 802x802px) is always displayed in full
  2. 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;}

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

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.

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

image

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

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.

image

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?

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:

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.

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.

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.

1 Like

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.

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

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

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:

image

yet when I close the editor, I see this:

image

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

1 Like

2021.11.2 - my picture is always with applied styles:

image

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
1 Like

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

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