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

/config/www/ on your file system maps to /local/ on the web browser, for example myhome.duckdns.org/local/community/lovelace-card-mod/card-mod.js, but HACS should auto-add it at /hacsfiles/lovelace-card-mod/card-mod.js.

Once replaced /config/www/ by /local/ it works like a charm! I own you a beer :slight_smile: Thanks

If you used HACS it SHOULD be /hacsfiles/button-card/button-card.js

1 Like

Hello
can you tell me why this doesnā€™ work ?((((


Background color = OK, but ā€œheightā€ is ignoredā€¦

type: entities
entities:
  - entity: sun.sun
title: height
style: |
  ha-card {
    height: 500px;
    background: rgb(0,255,0);
  }

:one::six: Should I tag people?

Generally, no.

It comes across as bad manners, youā€™re demanding somebody answers you. Itā€™s different if youā€™re thanking somebody, obviously.

How to help us help you - or How to ask a good question

1 Like

I finally updated from HA 116.4 to 117.1. I see that markdown has yet again changed stuff. I canā€™t set the card height anymore with card mod. I used to have this:

IMG_0997

now it shows as this:
msedge_RD6HhRusOq

I created this by putton two markdown cards inside a vertical-stack. The ā€˜headerā€™ has this style:

  .: |
    ha-card {
      height: 20px;
      --ha-card-background: none !important;
      box-shadow: none !important;
      left: -2.5%;
      width: 100vw;
    }
  ha-markdown:
    $: |
      h1 {
        font-size: 20px;
        font-weight: bold;
        font-family: Helvetica;
        letter-spacing: '-0.01em';
      }
  

And the ā€˜subā€™ has this stile:

  .: |
    ha-card {
      height: 30px;
      --ha-card-background: none !important;
      --primary-text-color: var(--sensor-accent-color);      
      box-shadow: none !important;
      left: -1.2%;
      
    }
  ha-markdown:
    $: |
      h1 {
        font-size: 15px;
        font-weight: thin;
        font-family: Helvetica;
        letter-spacing: '-0.01em';
      }
      

It looks like the height code has changed? Does anyone know how I can fix this again?

Edit:

I see a second style (constructed stylesheet) option with height: 100%, that one disables my height setting. If i uncheck that one, all works. I tried setting that, but I have no clue how to change that and what to put for card-mod to use it. Any idead?
msedge_QEOJYalDvR

This part breaks my entire setup since I use markdown all over the place. Removing the line solves everything. Anyone know what I can do to make sure HA ignores that line in my entire UI?

For the time being I fixed it by using !important everywhere, which now overrides the new variable. Though this is very hacky and doesnā€™t look nice when reloading (starts spaced then applies the height). I really hope some has a decent global solution for this.

Edit: I created a ticket at HA Frontend. If someone else uses markdown this way, stay up to date here -> https://github.com/home-assistant/frontend/issues/7578#issuecomment-720539351

Has something changed with this mod card?
My center buttons with picture entity card in it, is now bigger than the rest, although the code is the sameā€¦ (this used to work, but something changed and they arent equal size anymore

Has something changed with this mod card?
My center buttons with picture entity card in it, is now bigger than the rest, although the code is the sameā€¦ (this used to work, but something changed and they arent equal size anymore

The code:

- card:
          name: Alarm
          type: button
          show_label: false
          icon: mdi:shield-off
          tap_action: !include popup/alarm.yaml
            
        style: |
          ha-card {
            height: 128px;
            text-align: center;
          }
        type: 'custom:mod-card'
      - entity: person.stijn
        image: /local/stijn.jpg
        tap_action: !include popup/persoon1.yaml
        style: |
          ha-card {
            height: 128px;
          }
        type: picture-entity
      - card: 
          name: Verlichting
          type: button
          icon: mdi:lightbulb-outline
          tap_action: !include popup/verlichting.yaml
        style: |
          ha-card {
            height: 128px;
          }
        type: 'custom:mod-card'

Any ideas on which level I should put style to be able to modify div with columns?
I put it like that:

  - icon: 'hass:chart-line'
    title: Charts
    path: charts
    panel: false
    style: |
      #columns {
         justify-content: end !important;
         }
    badges: []
    cards:
      - type: history-graph

but itā€™s not taken into account.

What type of card is that?

true that, but then I get yellow icons when it is onā€¦ I would really want red iconsā€¦

I tried some thingsā€¦ and am partial succesfull

code:

type: glance
entities:
  - entity: binary_sensor.laadpaal_jc_l
    style: |
      :host {
        --paper-item-icon-color: 
          green;
      }
       
  - entity: binary_sensor.laadpaal_jc_r
    style: |
      :host {
        --paper-item-icon-color:
          {% if states('binary_sensor.laadpaal_jc_r') == 'on' %}
            red;
          {% else %}
          {% endif %}
            }
  - entity: binary_sensor.laadpaal_jc_r
    style: |
      :host {
        --paper-item-icon-color:
          {% if states(config.entity) == 'on' %}
            red;
          {% else %}
          {% endif %}
            }

result:
Screenshot 2020-11-02 at 10.07.12

What is wrong?

If you want to change all the icons active colour just change the them variable state-icon-active-color to red.

like this?:

type: glance
entities:
  - entity: binary_sensor.laadpaal_jc_l
  - entity: binary_sensor.laadpaal_jc_r
  - entity: sensor.netatmo_huiskamer_reachability
style: |
  :host {
    --state-icon-active-color: 
      red;
  }

(Netatmo is 100% sure active)

this is the resultā€¦ no red icon :upside_down_face:
Screenshot 2020-11-02 at 10.43.23

No, like this:

That will change for all cards the icon color? I just want for that particular card the icon colors changed.
So this is to rigid :wink:

This works for the ā€œoffā€ (green) and unavailable (gray) state, but the ā€œonā€ state it is yellow again

type: glance
entities:
  - entity: binary_sensor.laadpaal_jc_l
    style: |
      :host {
        --paper-item-icon-color:
          {% if states(config.entity) == 'on' %}
            red;
          {% elif states(config.entity) == 'off' %}
            green;
          {% else %}
            gray;
          {% endif %}
            }
           
  - entity: binary_sensor.laadpaal_jc_r
    style: |
      :host {
        --paper-item-icon-color:
          {% if states(config.entity) == 'on' %}
            red;
          {% elif states(config.entity) == 'off' %}
            green;
          {% else %}
            gray;
          {% endif %}
            }
show_state: false
title: Laadpalen J
1 Like

Try adding state_color: false so that the default logic for setting the colour doesnā€™t get applied. That seems to work for me.

2 Likes

That did the trick!

Anyone can help me with this?

Try !important

hi
Where ? In the code? or you mean here in the post?
IF you mean in the codeā€¦ where do i place it

height: 128px !important, if youā€™re willing to help reduce forum load try reading the last 25 replies and see if you can learn basic CSS.