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

1st post → bla bla bla, you know the rest, and your point is:
image

1 Like

Fantastic. Only took me 3 minutes this time - getting used to it and therefore hopefully faster - (very) slowly… :wink:

This is my final working snippet
            - entity_id: number.motion_*_duration
              options:
                secondary_info: last-changed
                card_mod:
                  style:
                    .: |
                      :host {
                        --ha-textfield-input-width: 50px;
                        /* --text-field-padding: 0px; */
                      }
                    hui-generic-entity-row $: |
                      .info {
                        flex: 1 1 50% !important;
                      }

Since you provided no minimal code, I tested with this:

  - type: markdown
    content: |
      <div class="tg-wrap">
        <table width=100%>
          <tbody>
            <tr>
              <td><ha-icon icon="mdi:bell"></ha-icon></td>
              <td>long long long long long long long long long long long long long long long long long long long long</td>
              <td>xxxxxxx</td>
            </tr>
          </tbody>
        </table>
      </div> 

image

The “ha-icon” & text elements need to be in different “td”, otherwise with this

<td><ha-icon icon="mdi:bell"></ha-icon>long long long long long long long long long long long long long long long long long long long long</td>

you will see this:
image

With these examples I found a bit tricky to get stable results.
This was unstable:

    card_mod:
      style:
        ha-markdown:
          $: |
            table tbody tr td {
              vertical-align: top;
            }

and this (contrary to my expectations) was stable:

    card_mod:
      style:
        ha-markdown $: |
          table tbody tr td {
            vertical-align: top;
          }

This one may be used as well:

    card_mod:
      style:
        ha-markdown $: |
          :first-child {
            vertical-align: top !important;
          }

image

2 Likes

Hi, I would like to change the title and sensor text color of this card, but already playing with it for hours and can’t find it, some css guru here that can help with this?

Thanks in advance!

Kind regards, D

Can you show your current yaml/card_mod, what you have tried and what is the status quo and what is not working as expected?

I’m new to Home Assistant and on a steep learning curve and in need of some help please.

I have this sensor card with large font setup but the header is cutting the text.

Here is the code-

graph: line
type: sensor
entity: sensor.heating_hot_water_tank_735
name: Hot Water Tank
style: |
  ha-card
   {
  --accent-color: red;
    }
  .header .name {
  color: #959595;
  font-size: 12px;
  font weight: bold
  }
  .header .icon {
  color: #red;
  --mdc-icon-size: 28px;
  }
  .info .value {
  color: white;
  font-size: 68px;
  font-weight: light
  }
  .info .measurement {
  color: white;
  font-size: 12px;
  }
detail: 2

Is there a way the free header space can be reduced?

Thanks Steve

(unrelated) this is wrong, use simply this
color: red;
or - if you need to comment:
/* color: red; */

1 Like

code
type: vertical-stack
cards:
  - type: sensor
    entity: sensor.xiaomi_cg_1_co2
    graph: line
    hours_to_show: 1
    detail: 1
    card_mod:
      style: |
        .info .value {
          font-size: 74px;
        }
  - type: sensor
    entity: sensor.xiaomi_cg_1_co2
    graph: line
    hours_to_show: 1
    detail: 1
    card_mod:
      style: |
        .info .value {
          font-size: 74px;
        }
        .info {
          line-height: 60px !important;
        }
1 Like

Thank you that’s great. Much appreciated

Hi, I tried searching online, using the chrome inspect option, but I can only find these values, no option to change the title, subtitle color, that said I’m no dev guy and all this template, CSS stuff is quite hard for me, but with the help of the community, trial and error I’m getting there :wink:

Thanks in advance!

card_mod:
  style: |
    ha-card {
    font-size: 1em; 
    height: 300px;
    font-size: 2cm !important;
    font-family: Helvetica;
    line-height: 50px;
    text-transform: capitalize;
    font-style: italic;
    font-weight: 900 !important;
    letter-spacing: 0.20em !important;
    word-spacing: 3px;
    --mdc-icon-size: 50px;
    } 

The white is just, well, too white :-P, so I would like to change it more to the font, color like the top bar title colors

hi, I’m trying to change the font-weight of the value in a auto-entities card, but for some reason I can’t get it to work. What am I missing here? The

      ha-card .entities .entity:
        $: |
          div:not(.name) {
            font-weight: bold;
          }    

in:

type: custom:auto-entities
card:
  type: glance
  card_mod:
    style: |
      ha-card {
        padding: 0px;
      }
      ha-card .entities {
        padding: 0px;
      }   
      ha-card .entities.no-header {
        padding: 0px;
      }
      ha-card .entities .entity:
        $: |
          div:not(.name) {
            font-weight: bold;
          }                      
filter:
  include:
    - entity_id: sensor.afvalwijzer_*
      attributes:
        days_until_collection_date: <= 10
      options:
        tap_action:
          action: none
sort:
  attribute: days_until_collection_date
  method: attribute
  numeric: true

isn’t working.

pff stupid me, this works! well hopefully I can help other people with it :wink:

Color and size title

card_mod:
  style: |
    ha-card .box .card-header {
    font-size: 1em;  
    color: grey;
    } 

Answering my own problem here.

It seems the inconsistent behaviour of card-mod is corrected if I use it as a frontend module, and not a lovelace resource. So, since I installed it via HACS, I added this to my configuration.yaml:

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

So, all good at last :slight_smile:

OMG! Thank you so much! This is exactly what I was looking for. You even provided different variations to help me understand/learn CSS styling better. I always learn better with real-world examples like this that I can relate to.

I need a little help, I have this page for bus departures in an iframe card: Västtrafik Avgångstavla
I want to hide the rows with departures from platform (Läge) B.
Here’s my card yaml so far:

type: iframe
url: https://avgangstavla.vasttrafik.se/?stopAreaGid=9021014005070000
aspect_ratio: 50%
card_mod:
  style: |
    div#root iframe  {
      --skala: 0.5;
      --procent: calc(100%/var(--skala));
      transform: scale(var(--skala));
      transform-origin: 0 0;
      width: var(--procent);
      height: var(--procent);
    }
    tr:has(td:contains("B")) {
      display: none;
    }

Any tips to get the last part working?

Does anyone know if it’s possible to use card-mod for this…

When I specify color/transparency for my card background color via: card-background-color, it is also forcing its color/transparency onto unrelated “drop-down menu background”:
image

All I’m trying to do is turn off transparency for drop-down menu backgrounds without turning off transparency for card backgrounds. I’m surprised that they are even linked together in the first place.

I can’t even use Developer tools to select the drop-down menu background to see what’s going on. When I try to use the element selector in my web browser’s Developer Tools, the drop-down menu loses focus. :confused:

I believe the popular ios-themes theme also has this issue since they have transparent card backgrounds.

I would appreciate any guidance that can help me achieve this. I’ve already spent a lot of time on this without any progress.

The one should not fore the other. You are only manipulating/setting the variable which is most probably used by both places. Just don’t manipulate the variable, which is used, but the background of the card directly instead. So where the variable is used before, set the values, you want to have.

Thanks for the quick reply.

I’m using the below color and respective transparency specifically for my card backgrounds (hence the name). I can’t change this or my cards won’t look the way I want:

card-background-color: 'rgba(115, 115, 115, 0.1)'

However, the transparency from this is directly affecting the drop-down menu background in the screenshot.

I’m not sure I understand what you’re asking me to do, I’m not manipulating a variable.

You do.

card-background-color is the variable.

And this one is assigned to the background then.

image

But now I see, you set it globally in your theme. Try to set ha-card-background instead. But I fear it will not help either.

So the question is, do you want the transparency everywehre in HA or only in your cards?

Hi. I’m trying to combine both a background colour depending on a state, but at the same time have it so it blinks if an automations is running. I have both the codes working individually, but I can’t combine them together. Help please!

I have it so if the number of days before recycling is due to go out is 0 (today), the background is red. If it is 1 day (tomorrow), the background is orange. That works fine.

I also want it so if I have a notification on my phone telling me to put the recycling out, it flashes red. But once I dismiss the notification, the flashing red stops.

These are the two bits of working code I have - please help me to combine them

        card_mod:
          style: >
            :host {
              --mush-icon-symbol-size: 1.8em;
            }

            ha-card { 
              background-color:
            {% if is_state('sensor.recycling_days', '0') %} red !important

            {% elif is_state('sensor.recycling_days', '1') %} darkorange
            !important

            {% else %} rgba(0.0.0.0);}

            {% endif %};  

            }
card_mod:
  style: |
    ha-card {
      animation: {% set status = state_attr('automation.recycling_notification','current') %}
                 {% if status == 1 %} blink 3s linear infinite;
                 {% else %} none
                 {% endif %}
    }
      @keyframes blink {
      50% {background: red;}
      }