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

You may have a default box-shadow setting applied in your theme.
Try this under your image:

style:
  box-shadow: none

not working

I have a picture elements card where I wish to change the opacity of the background depending on the sun state


          type: picture-elements
          image: /local/floorplan2/lights/floorplan-dark.png
          style: |
            ha-card:first-child {
              background: rgba(87, 87, 74, 1);
              width: 100%;
              margin: 0 auto;
             }

I have a sensor (which works) called sensor.sunlight_opacity

Can I somehow use this sensor to change the alpha “1” value in the rgba

I already use this sensor in my config for opacity

opacity: '${ states[''sensor.sunlight_opacity''].state }'


This results in a value between 0 and 1

Can you let me see how you made this?

found it

:host { 
   --paper-item-icon-active-color: red;
   --paper-item-icon-color: #5A5A5A;
}

Yes, I centered my picture element with a blank custom button card.

type: custom:button-card
color_type: blank-card
styles:
  card:
    - width: 50px
tap_action:
  action: toggle
name: offset
show_name: false

If you don’t enter a width all cards will be the same size. If you want a bigger picture-element you just have to make the blank cards a little smaller like in my example and the picture-element will get bigger.
Ofc if your picture-element sais square it will still be square

How to add a small header to a card:
изображение

type: entities
title: Header
entities:
  - sun.sun
  - sun.sun
card_mod:
  style: |
    .card-header {
      display: flex;
      flex-direction: row;
    }
    .card-header::after {
      flex: 1 1 50%;
      color: var(--secondary-text-color);
      font-size: 1rem;
      text-align: right;
      content: "small header";
    }

More examples are described here.

2 Likes

Could someone point me in the right direction of styling the custom:swipe-card. I’m specifically trying to style the .swiper-container class to fix the drop shadow cut off, but I’m getting lost in #shadow-root notation.

EDIT:

For anyone else stumbling across this, I got it working with the below:

              - type: custom:mod-card
                style:
                  swipe-card$: |
                    .swiper-container {
                      padding: 0px 2px 4px !important;
                      margin-left: -2px !important;
                      margin-right: -2px !important;
                    }

Is it possible to hide icon and state as in entities card?

show_icon: false
show_state: false

before recent frontend changes, or maybe the graph changes, I had an entities card with several graphs and pictures, and a few listings, which I post below. As you can see I had a card-mod in place, to spread the graphs nicely and use the available width to the max, with the same adjustments I use for all other cards on left and right side, being -16px, which I use throughout my complete config. However, using it now makes the card too wide and overlap the other cards in the view. Using anything less doesnt really help.

Upon first load it seems to work, but a seconds refresh make the card too wide again. So I am now left with this un modded history-graph’s, which are not using the available space at all. Hope anyone of you can see what to do? thanks!

  - type: entities
    entities:
      - type: custom:hui-element
        card_type: picture-entity
        card_mod:
          style: |
            ha-card.type-picture-entity {
              box-shadow: none;
              margin: -16px -16px 0px -16px;
            }
        entity: input_boolean.ventilate
        name: Ventilate
        image: /local/images/ventilate.png
        state_filter:
          'off': grayscale(72%)
        tap_action:
          action: toggle
        hold_action:
          action: more-info

      - type: custom:hui-element
        card_type: glance
        columns: 4
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              margin: 0px -16px 0px -16px;
            }
        entities:
          - entity: binary_sensor.schimmel_alert
            name: Alert
            show_last_changed: true
          - entity: sensor.co2_living
            name: Co2
          - entity: sensor.temperatuur_living
            name: Temp
          - entity: sensor.luchtvochtigheid_living
            name: Vocht
          - entity: sensor.schimmel_sensor
            name: Schimmel
          - entity: binary_sensor.humidity_living_low
            name: Hum Living low

      - type: custom:hui-element
        card_type: history-graph
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
            /*  margin: 0px -16px 0px -16px; */
            }
        entities:
          - entity: sensor.co2_living_statistics
            name: Co2
          - entity: sensor.temp_living_statistics
            name: Temp Living
          - entity: sensor.humid_living_statistics
            name: Vocht
          - entity: sensor.schimmel_sensor
            name: Schimmel

      - type: custom:fold-entity-row
        head:
         type: section
         label: Living climate daystart
        padding: 0
        entities:
          - sensor.co2_living_daystart
          - sensor.luchtvochtigheid_living_daystart
          - sensor.temperatuur_living_daystart

      - type: custom:fold-entity-row
        head:
         type: section
         label: Climate automations
        padding: 0
        entities:
          - entity: automation.vocht_living_te_laag
            secondary_info: last-triggered
          - entity: automation.average_indoor_temp
            secondary_info: last-triggered
          - entity: automation.ventileren_aan
            secondary_info: last-triggered
          - entity: automation.ventileren_uit
            secondary_info: last-triggered

un-modded:

modded first load:

and after a reload once again:

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.


How to add a “normal” background:
By default the badge card does not have a border & background:


Here is how to add a “normal” look:

  - type: custom:mod-card
    card:
      type: custom:badge-card
      badges:
        - entity: sun.sun
    card_mod:
      style: |
        ha-card {
          background: var(--ha-card-background,var(--card-background-color,#fff));
          box-shadow: var(--ha-card-box-shadow, none);
          border-radius: var(--ha-card-border-radius, 12px);
          border-width: var(--ha-card-border-width, 1px);
          border-style: solid;
          border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
        }

изображение

Also, it is possible to add a top/bottom paddings to the card.


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: