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

I made it work with template-entity-row.

Check this:

type: entities
entities:
  - entity: sun.sun
  - entity: sun.sun
    card_mod:
      style: |
        :host .text-content {
          display: none;
        }
  - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              display: none;
            }
  - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            state-badge:
              $: |
                ha-icon {
                  display: none;
                }

изображение

1 Like

Nobody can help me with my question regarding the restriction card?

I have a similar issue with badge card. I can’t style it.
Doing it in the inspector works fine, but in lovelace, it does not work:

type: custom:badge-card
badges:
  - entity: person.one
  - entity: person.two
  - entity: person.three
card_mod:
  style: |
    div#badges {
      transform: scale(0.5);
      color:red;
      }

Isn’t there a guide somewhere how to exactly pinpoint and then represent with card_mod the DOM element you want to style?

May be some ideas can help you.

1 Like

I checked those already.

But it turns out I’m just very stupid and didn’t read all documentation again (it’s been a while I played with card_mod and thought I remembered stuff), it seems for some cards you need to create a custom:mod-card around the card to be able to style it. The restriction card is starting to work now :slight_smile:

Check this:

type: vertical-stack
cards:
  - type: custom:badge-card
    badges:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
  - type: custom:mod-card
    card:
      type: custom:badge-card
      badges:
        - entity: sun.sun
        - entity: sun.sun
        - entity: sun.sun
    card_mod:
      style:
        badge-card:
          $: |
            div#badges {
              transform: scale(0.5);
              color:red;
            }

изображение

As far as I understood for styling all badges you need to use mod-card.
But for styling some particular badge you do not need it:

type: custom:badge-card
badges:
  - entity: sun.sun
  - entity: sensor.cleargrass_1_co2
    name: CO2
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .badge-container .label-badge .label span {
                  border-style: solid;
                  border-color: green;
                  color: blue;
                  background-color: magenta;
                 }
                .badge-container .title {
                  color: orange;
                }
            .: |
              ha-label-badge {
                --label-badge-background-color: yellow;
                --label-badge-text-color: red;
                --label-badge-red: cyan;
              }

изображение
Styles for badges are explained here.


More examples are described here.

1 Like

Been searching for several hours without joy so could someone point me in the right direction? I have a mini-graph-card and I’d like the border to change red when the humidity goes above 60. I have the code below which I know is completely wrong. A bonus would be to animate the boarder and ease flash it for 3s. Any advice would be appreciated.

card_mod:
  style: |
    ha-card {
    border-radius: 5px;
    border: |
          [[
            if (states['sensor.humidity_xiaomi_outside'].state >= 60), "red", "green";
          ]];
    }

EDIT: Cracked it! Only took 4hrs :blush:

style: |
  ha-card {
    border:
      {% if states('sensor.humidity_xiaomi_outside') | float > 60 %}
        solid 2px orange
      {% else %}
        solid 2px rgba(255,255,255,.4)
      {% endif %}
      ;
  }

Hi Guys,
could someone please help
I’m trying to reduce the Title space for this Vertical-stack shown below
Screenshot 2021-08-27 115031
I’ve added the following code yet I don’t know what I’m doing wrong

type: custom:mod-card
card_mod:
  style: |
    h1.card.header {
       padding-top: 1px;
       padding-right: 1px;
       padding-bottom: 1px;
       padding-left: 1px;
       }
card:
  type: vertical-stack
  title: Master Server
  cards:
    - type: grid
      cards:
        - type: gauge
          entity: sensor.master_intel_core_i7_9700__cpu
          min: 0
          max: 100
          name: CPU
        - type: gauge
          entity: sensor.master_generic_memory_load_memory
          min: 0
          max: 100
          name: Ram
        - type: gauge
          entity: sensor.master_gigabyte_b365m_h_ite_it8686e_fans_fan_1
          min: 0
          max: 3000
          name: Fan
        - type: gauge
          entity: sensor.master_intel_core_i7_9700_temperatures_cpu_package
          min: 0
          max: 100
          name: Temp
      square: false
      columns: 4

it’s in a vertical stack as I was intending to add hard drive bar graphs to the bottom of it.

Is there any possibility to achieve this without using card-mod?

I heard that this could be achieved by using custom:slider-entity-row (hope spelled it correctly).

1 Like

Thank you :blue_heart:

Hi,
I’d like to modify the padding of the highlighted element (div#root) for consistency with my other cards. I read through the documentation, but I still don’t understand how the styling works when the element is inside a “shadow-root”.

Could anyone help me ?
Thanks!

Does anyone have an idea on how to replicate the Schneider Connected Home “look”
Would this be best to attempt from a theme? Could both the color scheme and the card-mod/styles be implemented in a theme?

  • Simple gradient bacground
  • Big and tablet-friendly gradient “Buttons”
1 Like

Sorry if this has already been answered.

Very new to this modding tool and a little overwelmed

Came here looking to change the width of a card.

type: shopping-list
title: Shopping list

This is my shopping list card and just want to change the width. Can someone offer an example to achieve this.

All Lovelace cards are supposed to be of the same width.
If the shopping list card’s width is not enough for you, consider “panel mode” for the view (the view must contain only one card which occupies whole window’s width).

My issue is the opposite problem.

I am trying to create a dashboard for a wall mounted table and wanted the shopping list card down one edge. However Items only ever fill 1/3 of the width.

I wanted to reduce the width to allow more space for other cards / buttons.

Hi everyone.

How can I change the font size?
Thank you.

It is a whole new can of worms but have you looked at the custom button card?

It is so flexible/versatile that it is virtually an entire UI in itself.

How can I reduce the word, CPU, here?

image

Not really sure what to put. I have tried “font-size” but unsuccessful.

      - type: custom:stack-in-card
        mode: vertical
        cards:
          - type: horizontal-stack
            cards:
              - type: button
                entity: input_boolean.star
                show_name: false
                card_mod:
                  style: |
                    :host {
                      transform: scale(1.5,1.5);
                    }                       
              - type: gauge
                them: default
                name: CPU
                min: 0
                max: 100
                unit: '%'
                entity: sensor.risingstar_intel_core_i7_8565u_load_cpu_total
                card_mod:
                  style: |
                    :host {
                      transform: scale(1.5,1.5);
                    }                 
              - type: gauge
                them: default
                name: RAM
                min: 0
                max: 100
                unit: '%'
                entity: sensor.risingstar_generic_memory_load_memory
              - type: gauge
                them: default
                name: Temp
                min: 30
                max: 70
                entity: sensor.risingstar_intel_core_i7_8565u_temperatures_cpu_package
              - type: gauge
                them: default
                name: Wts
                min: 5
                max: 50
                unit: 'W'
                entity: sensor.risingstar_wattage
1 Like

Cool mod!
I’ve already got 99% of the styles the way I want.

However, how do I disable the ripple effect when pressing a button card? My wall tablet is kinda slow and it really struggles to play that…