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

parautenbach · August 19, 2023, 8:21pm

Ah, it’s defined in my custom.js. It’s from the time when HA didn’t have rounded corners on cards. They since introduced it, but with a larger radius, so I’ve kept mine.

Yes, that’s what I want in my case: only the top left and right corners of the head row must be rounded.

Thanks. Indeed. The whitespace control of Jinja can catch one out. Your version is a bit more maintainable and explicit.

e-raser · August 19, 2023, 9:39pm

Exactly. But how to apply this on this point (next to the existing

                    :host {
                      --ha-textfield-input-width: 50px;
                      #--text-field-padding: 0px;
                    }

inside auto-entities)?

Full code

type: grid
columns: 1
square: false
title: 🔧 Konfiguration
cards:
  - type: custom:collapsable-cards
    title: 🏃‍♂️ Bewegungsmelder
    defaultOpen: false
    buttonStyle: 'font-size: x-large'
    cards:
      - type: entities
        title: null
        state_color: true
        show_header_toggle: false
        entities:
          - type: custom:text-divider-row
            text: Dauer (Trigger-/Aktiv-Zeit) *
            align: center
            style: |
              :host {
                #--text-divider-color: red;
                --text-divider-font-size: 16px;
                #--text-divider-line-size: 3px;
                #--text-divider-margin: 1em 0;
                #margin-bottom: 20px;
              }
          - type: custom:auto-entities
            card:
              type: entities
              title: null
              state_color: true
              show_header_toggle: false
              card_mod:
                style:
                  .: |
                    ha-card {
                      border-width: 0px;
                      margin-bottom: -5px;
                      margin-top: -10px;
                      margin-left: -15px;
                      margin-right: -15px;
                    }
            entities: null
            filter:
              include:
                - entity_id: number.motion_*_duration
                  options:
                    secondary_info: last-changed
                    card_mod:
                      style: |
                        :host {
                          --ha-textfield-input-width: 50px;
                          #--text-field-padding: 0px;
                        }
              exclude: []
            show_empty: true
            unique: true
            sort:
              method: name
              reverse: false

In short: how to combine :host with hui-generic-entity-row in this case?

Ildar_Gabdullin · August 19, 2023, 9:43pm

Unrelated to the issue: this is a wrong commentary style.
Should be:
/* --text-divider-color: red; */

Ildar_Gabdullin · August 19, 2023, 9:45pm

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

e-raser · August 19, 2023, 10:42pm

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

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

Ildar_Gabdullin · August 20, 2023, 1:07pm

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>

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:

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

dmertens · August 20, 2023, 7:58pm

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

arganto · August 21, 2023, 6:09am

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?

TheStealth · August 21, 2023, 10:16am

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

Ildar_Gabdullin · August 21, 2023, 10:19am

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

Ildar_Gabdullin · August 21, 2023, 10:34am

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

TheStealth · August 21, 2023, 10:52am

Thank you that’s great. Much appreciated

dmertens · August 21, 2023, 10:54am

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

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

Jeroennl · August 21, 2023, 11:53am

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.

dmertens · August 21, 2023, 12:21pm

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

Color and size title

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

boardlord1 · August 21, 2023, 7:52pm

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

mkanet · August 23, 2023, 2:16am

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.

frankysan · August 23, 2023, 2:18pm

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?

mkanet · August 24, 2023, 1:53am

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”:

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.

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.

arganto · August 24, 2023, 5:54am

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.