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

frnak · July 8, 2024, 9:12pm

How can I apply styles to two different levels of shadow roots? I’m trying to apply styles to elements under both.

    hui-card-features$:
      hui-cover-position-card-feature$: 
          **HERE**
       ha-control-slider$:
         **AND HERE**

But I don’t know how to splice this together in a valid way, I just don’t know the correct syntax here. My thinking was either of these two but neither work:

hui-card-features$:
  hui-cover-position-card-feature$: |
    div.container {
      padding: 0 !important;
    }
    ha-control-slider$: | 
      .slider .slider-track-bar {
        border-radius: 10px !important; 
      }

OR

hui-card-features$:
  hui-cover-position-card-feature$: |
    div.container {
      padding: 0 !important;
    }

hui-card-features$:
  hui-cover-position-card-feature$: 
    ha-control-slider$: | 
      .slider .slider-track-bar {
        border-radius: 10px !important; 
      }

frnak · July 8, 2024, 9:20pm

This will color it yellow and center it. It isn’t as straight forward as usually because the header is in a shadow root:

type: custom:stack-in-card
title: Speedtest
card_mod:
  style: 
      $: |
          h1.card-header {
            color: #FF0;
            display: flex;
            justify-content: center;
          }

frnak · July 8, 2024, 10:07pm

frnak:

How can I apply styles to two different levels of shadow roots? I’m trying to apply styles to elements under both.

    hui-card-features$:
      hui-cover-position-card-feature$: 
          **HERE**
       ha-control-slider$:
         **AND HERE**

But I don’t know how to splice this together in a valid way, I just don’t know the correct syntax here. My thinking was either of these two but neither work:

hui-card-features$:
  hui-cover-position-card-feature$: |
    div.container {
      padding: 0 !important;
    }
    ha-control-slider$: | 
      .slider .slider-track-bar {
        border-radius: 10px !important; 
      }

OR

hui-card-features$:
  hui-cover-position-card-feature$: |
    div.container {
      padding: 0 !important;
    }

hui-card-features$:
  hui-cover-position-card-feature$: 
    ha-control-slider$: | 
      .slider .slider-track-bar {
        border-radius: 10px !important; 
      }

Apparently this is how it’s done:

    hui-card-features$:
      hui-cover-position-card-feature$: 
        .: |
          div.container {

          }
        ha-control-slider$: |
          div#slider {

          }

fauxPalindrome · July 8, 2024, 11:47pm

I got it installed but it’s not getting recognized as a valid card. Also, it was last updated over 4 years ago.

There must be an easier way with card-mod, and I need it for over a hundred cards

Mariusthvdb · July 9, 2024, 7:21am

seeing what you want to show there, Id personally start with simplifying your card itself.
you seem to have a lot of nested custom cards while to the eye, this could all be done with core cards, maybe adding the custom hui-element card to have tiles inside an entities card.

If you’d manage that, it would be as simple as setting a card_mod on the title of the top entities card…

also, ( and this is just some yaml saving, not modding), since you have this on all your Tiles:

            tap_action:
              action: none
            hold_action:
              action: none
            primary_info: name
            secondary_info: state
            card_mod:
              style: |
                ha-card {
                  margin-right: -8px;
                }

you can list that on the top item, create an anchor and copy it for the others. Makes the card much more readable

    - type: entities
      title: Speedtest
      entities:
        - entity: sensor.speedtest_download
          #icon: mdi:download
          color: blue
          name: Download
          <<: &card_config
            type: custom:hui-element
            card_type: tile
            tap_action:
              action: none
            hold_action:
              action: none
            primary_info: name
            secondary_info: state
            card_mod:
              style: |
                ha-card {
                  margin: -8px;
                  box-shadow: none;
                }
        - entity: sensor.speedtest_ping
         # icon: mdi:lan-pending
          color: green
          name: Ping
          <<: *card_config
        - entity: sensor.speedtest_upload
         # icon: mdi:upload
          color: red
          name: Upload
          <<: *card_config

~~(didnt set the colors correctly in above config, those are for mushroom, which I dont use, and not for Tile. Just for illustrative purposes, you can make that work easily)~~
nevermind, it was too easy not to change it for you

Ill leave the title for you, and if you’re still lost, just check Ildars post at the top of this thread, its all in there
btw note that you dont need to set an icon, only if you want to change the icon the entity already has set, in your case, just the ping sensor

cut it short, my advise: make the card as short and simple as can be

Mariusthvdb · July 9, 2024, 8:59am

all of a sudden I notice my cameras in an iframe no longer to use the mod that worked before:

type: entities
title: Weer cameras
card_mod:
  class: class-header-no-margin
entities:

  - type: custom:fold-entity-row
    head:
      type: section
      label: Knmi
      card_mod: &label
        style: |
          .label {
            margin-left: 0px !important;
          }
    padding: 0
    entities:
      - type: custom:hui-element
        card_type: picture-entity
        entity: camera.weerkaart_nl
        show_name: false
        show_state: false
        <<: &style
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                margin: 8px -16px -16px -16px;
              }

  - type: custom:fold-entity-row
    head:
      type: section
      label: Roosendaal Br
      card_mod: *label
    padding: 0
    entities:
      - type: custom:hui-element
        card_type: iframe
        aspect_ratio: 100%
        url: !secret roosendaal_br
        <<: *style

did iframe change its properties? must check, this is a post to get back to…

update

and back…
had to change/move some of the margins to the fold itself )and ofc then take those out of the mod on the iframe, only keep the box-shadow on that element)
Only need to try to get the bottom title of that iframe, which now is cut off:

type: entities
title: Weer cameras
card_mod:
  class: class-header-no-margin
entities:

  - type: custom:fold-entity-row
    head:
      type: section
      label: Knmi
      card_mod: &label
        style: |
          .label {
            margin-left: 0px !important;
          }
    padding: 0
    entities:
      - type: custom:hui-element
        card_type: picture-entity
        entity: camera.weerkaart_nl
        show_name: false
        show_state: false
        <<: &style
          card_mod:
            style: |
              ha-card {
                box-shadow: none;
                margin: 8px -16px -16px -16px;
              }

  - type: custom:fold-entity-row
    card_mod: &iframe
      style: |
        div#items {
          margin: 16px -16px -16px -16px;
        }
    head:
      type: section
      label: Roosendaal Br
      card_mod: *label
    padding: 0
    entities:
      - type: custom:hui-element
        card_type: iframe
        aspect_ratio: 100%
        url: !secret roosendaal_br
        card_mod: &style_iframe
          style: |
            ha-card {
              box-shadow: none;
            }

Novan007 · July 9, 2024, 7:01pm

Tank you I gone give a try

Olivier1974 · July 10, 2024, 8:37pm

Something is broken with 2024.7.0 (and later)
This code, that was working perfectly to have 3 cards 2/5,2/5,1/5 is working in 2024.6.4, but in 2024.7.0 and 2024.7.1, the cards are 1/3,1/3,1/3

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      div#root > :first-child {
        width: 39.719%;
        flex: 0 0 39.719%;
      }

      div#root > :nth-child(2) {
        width: 39.688%;
        flex: 0 0 39.688%;
      }

      div#root > :last-child {
        width: 19.612%;
        flex: 0 0 19.612%;
      }
card:
  ...

Ildar_Gabdullin · July 10, 2024, 8:47pm

Now should be like

div#root > :last-child > * {

You are an experienced user! You could have noticed a change in Code inspector ))

Olivier1974 · July 10, 2024, 9:24pm

It seems I’m not. I always rely on all your tutorial that I’ve in favorite in chrome, right here

Then it is more about try and error, with a lot of tears. And I’m always very bad with the shadow things.

Ildar_Gabdullin · July 10, 2024, 9:27pm

step by step, all will come.
Will update my stack-related styles soon.

Timmuhhh · July 11, 2024, 11:14am

I hope somebody can help me out. I’m stuck for ages

Picture for reference:

Question1: Change field 1
I want another sensor’s data to be displayed. I worked out how to do it in field 2, see example code below:

card_mod:
  style:
    .: |
    ha-state-control-climate-temperature:
      $: |
        .label:nth-of-type(2) {
          display: inline-block !important;
          visibility: hidden;
          text-align: center;
          width: 100%;
        }
        .label:nth-of-type(2):before {
          content: "{{ states('sensor.mytemperaturesensor') | round(1) }} °C";
          visibility: visible;
          display: inline-block;
          width: 100%;
          text-align: center;
        }

I dont know how to adress field 1

Question 2: Change icons of field 3 & 4
The icons in field 3 (fan speed) and field 4 (vane angle) are not picked up. How do i assign icons to this buttons?

I expected something like this, but it doenst work:

card_mod:
  style:
    hui-card-features $ hui-climate-fan-modes-card-feature $ ha-control-select $: |
      div#option-1 ha-svg-icon {
        content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='magenta' d='M20 22H4V20C4 17.8 7.6 16 12 16S20 17.8 20 20M8 9H16V10C16 12.2 14.2 14 12 14S8 12.2 8 10M19 4C18.4 4 18 4.4 18 5V6H16.5L15.1 3C15 2.8 14.9 2.6 14.7 2.5C14.2 2 13.4 1.9 12.7 2.2L12 2.4L11.3 2.1C10.6 1.8 9.8 1.9 9.3 2.4C9.1 2.6 9 2.8 8.9 3L7.5 6H6V5C6 4.4 5.6 4 5 4S4 4.4 4 5V6C4 7.1 4.9 8 6 8H18C19.1 8 20 7.1 20 6V5C20 4.5 19.6 4 19 4Z'/%3E%3C/svg%3E");
      }

This refers to:

Strange thing is that changing the icon of HVAC modes does work with the above mentioned method

Ildar_Gabdullin · July 11, 2024, 9:27pm

One of rare cases when card-mod is needed for custom:button-card

clintferns77 · July 13, 2024, 8:42am

Hello All

Firstly very sorry for my absolute terrible HA knowledge. So here is what I’m trying to do. I have a grid card and using the awesome card mod and some codes I found online, I managed to make them transparent and coloured the way I like.

My query is that I have a title for my grid card “Rooms”
it’s to the left and really small as compared to the rest of my buttons.

I’m trying to center it, change the font colour to white and increase the font size and maybe the form weight.

If I do an inspect element I can change the stuff in browser, however I have no idea how to change it in my dashboard. Below is my code.

Thanks

square: true
type: grid
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: ''
    entity: sensor.sonoff_a4b00139e7_temperature
    name: Living Room
    icon: mdi:sofa
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(247, 248, 242, 0.0);
            color: #36013f;
            font-weight: 800;
            font-size: 30px!important;
            --card-mod-icon-color: #36013f;
            }
        }
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: ''
    entity: sensor.sonoff_a4b0013f1d_temperature
    name: Kitchen
    icon: mdi:silverware-fork-knife
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(247, 248, 242, 0.0);
            color: #006A4E;
            font-weight: 800;
            font-size: 30px!important;
            --card-mod-icon-color: #006A4E;
            }
        }
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: navigate
      navigation_path: ''
    entity: sensor.sonoff_a4b001433a_temperature
    name: Passage
    icon: mdi:shower
    hold_action:
      action: none
    card_mod:
      style: |
        ha-card {
          --ha-card-background: rgba(247, 248, 242, 0.0);
            color: #9B1C31;
            font-weight: 800;
            font-size: 30px!important;
            --card-mod-icon-color: #9B1C31;
            }
columns: 3
title: Rooms
view_layout:
  grid-area: c2

Gian-LucaA · July 13, 2024, 8:55am

Hi there, I have an I frame card with the embed Radar from windy.com. I would really like to hide the controls from card. But windys embed doesn’t allow for that anymore. I am now trying to get that done with some custom css.
First of all is that even possible? And second if it is possible what am I doing wrong?

Thanks in advance for any help!

type: iframe
url: >-
  https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=default&metricTemp=default&metricWind=default&zoom=11&overlay=radar&product=radar&level=surface&lat=<lat>&lon=<lon>&message=true
aspect_ratio: 70%
card_mod:
  style:
    iframe: |
      plugins-bottom-desktop {
        visibility: hidden;
      }

Gian-LucaA · July 13, 2024, 9:06am

To change the text styling you could just add the following right under your ha-card styling:

card_mod:
  style: |
    ha-card {
      ...
    }
    span {
      <the text styling>
    }

But I dont fully understand what you mean with left and really small …

clintferns77 · July 13, 2024, 9:29am

Hey thanks for getting back to me. Here is a screen shot of my card, if you see the title room in the grid card is to the left and is really small. I just want to change it to the centre and make it larger

Gian-LucaA · July 13, 2024, 9:46am

Ah I see, probably easiest to use a vertical stack card and the title card from lovelace-mushroom.
You could then use the following code:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: Rooms
    alignment: center
  - square: true
    type: grid
    cards:
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: navigate
          navigation_path: ''
        entity: sensor.sonoff_a4b00139e7_temperature
        name: Living Room
        icon: mdi:sofa
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(247, 248, 242, 0.0);
                color: #36013f;
                font-weight: 800;
                font-size: 30px!important;
                --card-mod-icon-color: #36013f;
                }
            }
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: navigate
          navigation_path: ''
        entity: sensor.sonoff_a4b0013f1d_temperature
        name: Kitchen
        icon: mdi:silverware-fork-knife
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(247, 248, 242, 0.0);
                color: #006A4E;
                font-weight: 800;
                font-size: 30px!important;
                --card-mod-icon-color: #006A4E;
                }
            }
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: navigate
          navigation_path: ''
        entity: sensor.sonoff_a4b001433a_temperature
        name: Passage
        icon: mdi:shower
        hold_action:
          action: none
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(247, 248, 242, 0.0);
                color: #9B1C31;
                font-weight: 800;
                font-size: 30px!important;
                --card-mod-icon-color: #9B1C31;
                }
    columns: 3
    view_layout:
      grid-area: c2

Mariusthvdb · July 13, 2024, 10:01am

are you sure this is correct?

if the entity for the button is that sensor, it should be aligned with the main type, and, why set action navigate if not setting a path, simply set action none

Gian-LucaA · July 13, 2024, 10:10am

Yes, the navigation part should be left out. Just copied his code and applied the styling. Feel free to optimise it. Not saying its a perfect solution. But it should work…