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

[Ricks88]

Does someone already know how to edit the new Climate Card?
I would like to make the feature bar smaller (or add more padding also makes it smaller)

[arganto]

@Ricks88

Does someone already know how to edit the new Climate Card?

Hm. If you have already the DOM, you should know/see, where to mod it, shouldn’t you? Or do Imiss the point?

[Ricks88]

Maybe, i am not experience enough in it anymore. Tried a lot of things in the “style” but all have no effect include .container…

[e-raser]

Thanks. Immediately when reading your post I reminded that HA Core 2023.11 has exactly what I’m looking for. Guess I mixed it up with some CSS stuff I came across recently.

2023.11 To-do: Add release title

Conditional Card

[Ildar_Gabdullin]

1. You posted an unformatted code.
2. Ending brackets seem to be missing.
3. Styling Entity card: 1st post → link at the bottom → entity card

[Ildar_Gabdullin]

Lets start with a simpler task.
Try to change a color of the text first: post your attempt here + screenshot.
Then I will tell you which attr to change to hide the text.

[Ildar_Gabdullin]

@Jani0

It would be cool if I could understand what I’m doing

I already suggested you to check the 1st post → link at the bottom.

[Ildar_Gabdullin]

1st post → link at the bottom - > styling Entity card

[Jani0]

Thanks man. I just found the topic you linked… and wow…there seems to be a lot of knowledge in it. I was reading completely wrong posts.

First of all I now found a way to set card height, hide icon and header. Align other entity to left and other right.

I’m still searching discussion about how to move value position in to the middle of the card. I have now set card height to 80px and that is the max before text starts to disappear.

type: horizontal-stack
cards:
  - type: entity
    entity: sensor.time_date
    icon: hide
    card_mod:
      style: |
        ha-card div.name {
          font-size: 0
        }
        ha-card {
          height: 80px !important;
          text-align: left;
          letter-spacing: 3px;
        }
  - type: entity
    entity: sensor.weather_new_temperature
    icon: hide
    card_mod:
      style: |
        ha-card div.name {
          font-size: 0
        }
        ha-card {
          height: 80px !important;
          text-align: right;
          letter-spacing: 3px;
        }

[Ildar_Gabdullin]

@Jani0

ha-card div.name {

No need to write "ha-card " here.
It is “ha-card” already by default.

As for styling particular things like “place element in the center” etc - use Code Inspector (F12 in Chrome, smth else in other browsers) to find your particular element and then play with css attrs:

[Ildar_Gabdullin]

1. Learning CSS principles is a minimum thing that is required if you need to use card-mod. Ofc there some ready examples & you may copy/paste them & use - but they may not cover your particular usecase. (we all have to learn, 3 years ago I have zero knowledge about it, I only knew that “css” word is smth about making webpages).
2. On my last screenshot I advised a simple way to test: find your UI element in a tree-like structure on the right panel - paste a mouse cursor on the top “element.style” thing - then type some CSS property and it’s value. If you got a desired effect - write this style in your code.

[Ricks88]

@arganto

What i was looking for is:

      style: |
        hui-card-features {
          width: 600px !important;
        }

[Opontios (Agisilaos Ignatiadis)]

As arganto said - happened after moving to material web.
Will update my post dedicated to a slider later.

Any progress on “pointer-events: none” parameter in the new material web slider component?

[Ildar_Gabdullin]

No, a bit busy with local things here…
Later…

[arganto]

@Opontios

Any progress on “pointer-events: none” parameter in the new material web slider component?

I always suggest to open the devtools and see where it is set.

And then you “directly” see, that you have to overwrite this.

type: entities
entities:
  - entity: input_number.musikbox
    card_mod:
      style:
        ha-slider:
          $: |
            input[type="range"] {
              pointer-events: none;
            }

It’s faster than to wait that the prepared solution is flying in.

[wtstreetglow (Weston)]

Hello all!,

Could someone help me figure out if the post below is doable and how you would go about it possibly with an example? Thank you all for any help you can give.

Could I get some help on figuring out if the below is doable and how to do it possibly.

Below is what I have so far but I’m noticing it sets the color to black and it doesn’t change after the icon is pressed. (card-mod). I would like it to be black as just the default color but then go to whatever color it used to go to without using the card-mod. For instance, I think bulbs go to the color they actually are if you have the “state to color” turned on in the entity settings.

Is there a way to do this? (So when its off or inactive, icon is black, and its yellow when on or active)

type: custom:minimalistic-area-card
title: Back Patio
area: back_patio
shadow: true
hide_unavailable: true
state_color: true
darken: true
card_mod:
  style: |
    :host {
      --card-mod-icon-color: black;
    }
tap_action:
  action: navigate
  navigation_path: /dashboard-automatic/back-patio
entities:
  - entity: light.all_back_patio_lights
  - entity: switch.back_patio_fountain
  - entity: switch.back_patio_speaker_power

[Ildar_Gabdullin]

@wtstreetglow

tagging

Please don’t tag people here )
Basic rule: people help who can help.

[wtstreetglow (Weston)]

Ahh, I follow you. No issue there. I apologize for that @Ildar_Gabdullin

[Tarcisio (Tarcisio Alves de Menezes)]

Hello Guys! Can someone please help me with this? I tried everything, but I’m having a hard time to understand how exactly this works.

I’m trying to change the margin property to ‘0px’ from the decluttering-card itself.

how can I do that with card_mod?

      - type: custom:decluttering-card
        template: outside
        variables:
          - entity: light.outside_light
        card_mod:
          style: 

Thank you so much!

[Ildar_Gabdullin]

decluttering card does not have ha-card.
You need to either style from the inner card’s level or wrap decluttering card into mod-card. Or style from the outer level.