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

Hey Guys,

is there a way to remove the background from the icon? (Shape)
image

type: tile
entity: sensor.system_monitor_processor_use
card_mod:
  style:
    ha-tile-icon $: |
      .shape::before {
        opacity: 0 !important;
      }
2 Likes

this Is a challenge…

        - type: conditional
          conditions:
            - entity: sensor.radio_players_playing
              state: '0'
            - entity: sensor.activated_media_players #group.media_players_active
              state_not: '0'
          row:
            entity: script.play_radio
            action_name: Speel
#             card_mod:
#               style: |
#                 hui-generic-entity-row:
#                   $: |
#                     state-badge {
#                       color: var(--ok-color);
#                     }
        - type: conditional
          conditions:
            - entity: sensor.radio_players_playing
              condition: numeric_state
              above: 0
          row:
            entity: script.stop_radio
            action_name: Stop
#             card_mod:
#               style: |
#                 :host {
#                   --card-mod-icon-color: var(--alert-color);
#                 }

using these stylings both work when the entity is displayed unconditionally. But, in the above conditional setup, the colors are only applied briefly when clicking either of the 2 scripts, and then, when the condition changes, the icons remain colorless.

Ive only been able to set those reliably now using custom-ui which I was trying to minimize pr do away with…

homeassistant:

  customize:

    script.play_radio:
      icon_color: var(--ok-color)

    script.stop_radio:
      icon_color: var(--alert-color)

Thank you very much.:+1:t2::+1:t2:
Do you know a Tutorial or step by step Guide to find the right variables?

I think conditional entity rows add a Shadow DOM layer above hui-generic-entity-row, which will vary according to the type of entity.

If I’m right, you should be able to see this with the DOM inspector.

1 Like

If you mean standard HA theme variables - check here.
If you are looking for a good CSS tutorial - check here.

Do you mean a conditional row inside Entities row?
They should be styled on a higher level.
As usual, 1st post → … → conditional rows

right, I did try this 🔹 Card-mod - Add css styles to any lovelace card - #1845 by Ildar_Gabdullin

        - type: conditional
          conditions:
            - entity: sensor.radio_players_playing
              state: '0'
            - entity: sensor.activated_media_players #group.media_players_active
              state_not: '0'
          row:
            entity: script.play_radio
            action_name: Speel
          card_mod:
            style:
              hui-simple-entity-row$: |
                hui-generic-entity-row {
                  text-indent: 45px;
                  color: red;
                }

but that does not get applied either. It’s a direct c&p accept I added card_mod:

I mean a step by step to troubleshoot via Browser Developer Mode :slight_smile:

???

type: entities
entities:
  - input_boolean.test_boolean
  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: 'on'
    row:
      entity: script.test_script
      action_name: xxxxx
    card_mod:
      style:
        hui-script-entity-row $: |
          hui-generic-entity-row {
            text-indent: 45px;
            color: red;
          }
1 Like

have no idea is there any ready tutorial…

arghh, missed that script-entity-row… my bad:

          card_mod:
            style:
              hui-script-entity-row $:
                hui-generic-entity-row:
                  $: |
                    state-badge {
                      color: var(--ok-color);
                    }

this now works and colorizes the icon

Hi all,

I’ve spent hours trying to change the height of the modes buttons (and will do the same for fan speed buttons).

Value should be –control-select-thickness: 100px; (changed from 40px)

This is what I’ve tried with card-mod:

card_mod:
  style:
    hui-card-features $ hui-climate-fan-modes-card-feature $: |
      ha-control-select {--control-select-thickness: 100px; }

Where do I go wrong about this??

you have different - “hvac” on s screenshot & “fan” in a code

yes, that is a terrible nuisance, having to create those mods for all individual domains cards…
I had that figured out here How to set border-radius on Tile card Features

@TheStigh maybe it helps you somewhat

edit

my bad, sorry. only noticed the card-features… not that you dont have the Tile card there… sorry

Nailed it (!!!), thanks to a post from @arganto 🔹 Card-mod - Add css styles to any lovelace card - #6493 by arganto

Damn, this was a tricky one…

Solution:

card_mod:
  style:
    hui-card-features:
      $:
        hui-climate-hvac-modes-card-feature:
          $:
            ha-control-select:
              $: >
                :host {
                  --control-select-thickness: 100px !important;
                }
        hui-climate-fan-modes-card-feature:
          $:
            ha-control-select:
              $: >
                :host {
                  --control-select-thickness: 100px !important;
                }

I think the GUI editor doesn’t like the "!include … ", too bad

correct, cant use include in UI.


I’ve been able to stumble my way through modifying the custom:mini-media-player card so far but I’m having trouble figuring out how to move these buttons up a little bit? and bonus if someone can help me put a little padding around them too that would be great!

Here’s my current card mod:

card_mod:
  style: |
    ha-card {
      height: 200%;
      position: relative;
      max-width: 100%;
      --mmp-unit: 1.5 !important;
      --mdc-icon-size: 50px  !important;
    }
    .entity__info__media {
      font-size: 50px;
      position: relative;
      top: -5px;
      }

    .mmp-player__core { 
      height: 75px;
      top: -75px;
      }
    .entity__info__name {
      position: relative;
      top: -20px;
      }
    .entity__icon {
      position: relative;
      top: -80px;
      }

Bump, hoping someone has the right clue :bulb:

I bet it is sooooo easy… :frowning: