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

[KTibow (Kendell R)]

It doesn’t look like you did that. I meant change "remaining", "11" to "remaining", 11

[terminus]

THAT doe’s the trick. Thought you’re talking of the quoted hex codes

Thank you very much, I have learned plenty

[terminus]

But one more question. I changed the card type to “entities”. It seems to be, that the style-object changed. Now I’m examined the froontend with the dev-tools of safari and got:

and

How do i know, what to use. I tried

  - entity: sensor.ics_10
    style: |
      .pointer {
        color:

and:

  - entity: sensor.ics_10
    style: |
      state-badge.pointer {
        color:

but nothing worked out.

[KTibow (Kendell R)]

Have you tried !important? Try just plain state-badge without .pointer. Also try removing templating and just trying red or something.

[terminus]

nope :-/

[KTibow (Kendell R)]

Share config in code block?

[terminus]

type: entities
title: 'Müllabfuhrtermine:'
entities:
  - entity: sensor.ics_10
    style: |
      state-badge {
        color:
        OrangeRed !important;
      }

[maxym]

May I ask for help accesing ha-switch element in order to remove its padding?
I know CSS basics but I’m really struggling applying them to HA DOM structure.

I would like to remove space between switches and their labels above them:

here is how DOM looks like:

here is the code of the card:

type: entities
title: Kitchen
entities:
  - entity: light.kitchen
    icon: 'mdi:dome-light'
  - entity: light.kitchen_worktop
    type: 'custom:multiple-entity-row'
    state_header: Main
    toggle: true
    state_color: true
    entities:
      - entity: light.kitchen_worktop_left
        name: Left
        toggle: true
      - entity: light.kitchen_worktop_right
        name: Right
        toggle: true
  - entity: light.pantry
  - entity: light.dining_room_1
    icon: 'mdi:globe-light'
  - entity: light.dining_room_2
    icon: 'mdi:globe-light'

thank you in advance

[KTibow (Kendell R)]

Use shadow-root styling

[terminus]

I explored the icon again and found this:

–paper-item-icon-color

has it sth. to do with it?

Regards

[KTibow (Kendell R)]

Oh try !important

[terminus]

type: entities
title: 'Müllabfuhrtermine:'
entities:
  - entity: sensor.ics_10
    style: |
      –paper-item-icon-color {
        color:
        OrangeRed !important;
      }

nothing changed

[KTibow (Kendell R)]

That isn’t valid CSS. This is:

      * {
        --paper-item-icon-color:
        OrangeRed !important;
      }

[terminus]

Got it and could use it in the larger scale Thanks again

[maxym]

I’m trying hard but without success:

style: |
          ha-entity-toggle$:ha-switch
          {
            background-color:red !important;
            padding: 0px !important;
          }

Would you like to point me to what I’m doing wrong?
PLease note that following syntax works:

style: |
          ha-entity-toggle
          {
            background-color:red !important;
            padding: 0px !important;
          }

But I’m not able to get on ha-switch element.

[KTibow (Kendell R)]

Yes, I’ll point you to what you’re doing wrong. https://www.diffchecker.com/tmkpmQHM

[arganto]

Is there any way to style the grid card? I don’t like, that the h1 is without background, etc. and would like to have the shadow of the grids take away (solved), but have the whole grid hui-grid-card (including all items and h1) with background and shadowed border.

type: grid
style: |
  hui-grid-card {
    margin: 100px !important;
  }
title: Klimaanlagen
cards:
  - type: thermostat
    style: |
      hui-grid-card {
        margin: 100px !important;
      }
      .type-thermostat {
        box-shadow : none;
      }

The margin is only a dummy-test to see if something is happening.

Anyone with some hints for me?

[maxym]

Yeah… indeed it works, for one switch out of three. Can you help with others?
What does the pipe character means? I’m not familiar with this syntax. Is there any document I could learn from it how to apply advanced styling to HA?

[KTibow (Kendell R)]

Could you share your full code? You need to put it in each part.

[KTibow (Kendell R)]

Sorry, I don’t understand. Could you restate?