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

Strange, I have another result with the last code:
изображение
I need some time to find out the reason of this.

Use search next time please)

Thank you so much.
You are absolutely right but it is not easy to find something among more than 1300 posts.
Thanks again

Note that there is no “:” after “badge-container” in the last code. So that is not a “level up”.

im the first to confess the code is still somewhat unfamiliar to me, but what I posted above does work. To be clear on what I posted last (there we more than a couple of iterations in that post) this is my latest code:

  - entity: sensor.state_badge
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container
                /* Top circle of the Badge (State) */
                .label-badge {
                  border-style: dashed;
                  border-color: blue;
                  color: grey;
                  background-color: yellow;
                }
                /* Label of the Badge (Unit) */
                .label-badge .label span {
                   border-style: dotted;
                   border-color: pink;
                   color: red;
                   background-color: green;
                 }
                /* Below the Badge (Name) */
                .title {
                   color: orange;
                }

resulting in:

Schermafbeelding 2021-01-26 om 22.56.14

With Ildar_Gabdullin’s suggestion I was able to change the font of the state of an entity but this doesn’t work for an attribute. Can you help me?

type: entities
entities:
  - entity: sensor.snzb_02_corridoio_temperature
    name: Temperatura rilevata
    icon: mdi:thermometer
    style: |
      :host .text-content {
        font-size: 30px;
        font-weight: bold;
        color: black;
      }  
  - entity: climate.riscaldamento_termosifoni
    name: Temperatura impostata
    icon: mdi:thermometer
    attribute: temperature
    type: attribute
    style: |
      :host .text-content {
        font-size: 30px;
        font-weight: bold;
        color: black;
      } 

Lovelace

Styling Entities card with attributes:

image

type: entities
entities:
  - type: attribute
    entity: sun.sun
    attribute: azimuth
    name: Size for name, sec_info & attribute
    secondary_info: last-changed
    card_mod:
      style: |
        hui-generic-entity-row {
          font-size: 10px;
          color: red;
        }
  - type: attribute
    entity: sun.sun
    attribute: azimuth
    name: Size for attribute
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row $: |
          .text-content {
            font-size: 10px;
            color: red;
          }
  - type: attribute
    entity: sun.sun
    attribute: azimuth
    name: "!!!! Size for attribute (w/o sec_info) !!!!"
    card_mod:
      style:
        hui-generic-entity-row $: |
          .text-content:not(.info) {
            font-size: 10px;
            color: red;
          }
  - type: attribute
    entity: sun.sun
    attribute: azimuth
    name: Size for name & sec_info
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .info.pointer {
              font-size: 10px;
              color: red;
            }
  - type: attribute
    entity: sun.sun
    attribute: azimuth
    name: Size for sec_info
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .info.pointer .secondary ha-relative-time {
              font-size: 10px;
              color: red;
            }
  - type: attribute
    entity: sun.sun
    attribute: azimuth
    name: Size for name (w/o sec_info)
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .info.pointer.text-content {
              font-size: 10px;
              color: red;
            }
  - type: attribute
    entity: sun.sun
    attribute: azimuth
    name: Size for name
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            .info.pointer: |
              .secondary ha-relative-time {
                font-size: var(--mdc-typography-body1-font-size,1rem);
                color: orange;
              }
            .: |
              .info.pointer {
                font-size: 10px;
                color: red;
              }
  - type: attribute
    entity: sun.sun
    attribute: azimuth
    name: Colored icon
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: orange;
        }

More examples are described here.

1 Like

Very strange. I see this:
изображение
Once again I want to remark about “:” after “.badge-container” - are you sure that it must be absent?

no, I am not…
though it works Safari, our doesn’t in Chrome…

changed it to:

  - entity: sensor.state_badge
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge {
                /* Top circle of the Badge (State) */
                border-style: dashed;
                border-color: blue;
                color: grey;
                background-color: yellow;
               }
                /* Label of the Badge (Unit) */
              .badge-container .label-badge .label span {
                border-style: dotted;
                border-color: pink;
                color: red;
                background-color: green;
               }
                /* Below the Badge (Name) */
              .title {
                color: orange;
              }

makes it work in Chrome to:

Safari:
Schermafbeelding 2021-01-27 om 13.49.49

Chrome:

Schermafbeelding 2021-01-27 om 13.49.57

Firefox:

Schermafbeelding 2021-01-27 om 13.51.21

So Chrome is the exclusion here. Which is surprising because the iOS companion app, essentially a Chrome browser, shows fine too…

I am using Chrome, btw. That is why this difference…

hi, how can i edit the ha-switch? @maxym ?

CSS:

ha-switch {
    padding: 13px 5px;
}

padding-switch

here the yaml:

entities:
  - entity: switch.test_force_data_refresh
    name: Erzwingen
    toggle: true
    style:
                      .: |
                      "ha-entity-toggle":
                        $: |
                          ha-switch {
                            padding: 3px 5px;
                          }

but it does not work :frowning:

Always check your indentation, and try basic troubleshooting. Also you’re using a

when you could just delete that whole line.

Hi, Im trying to color my icon in picture-elements depends od state of entity (“Otevřeno” - red or “Zavřeno” - green).
I try this code:

      - type: picture-elements
        image: /local/images/myhouse.jpg
        style: |
          ha-card {
            --my-icon-color: {% if is_state('sensor.okno_pracovna', 'Otevřeno') %} red {% else %} green {% endif %}
          }

        elements:
          - type: state-icon
            entity: sensor.okno_pracovna
            tap_action:
              action: more-info
            icon: mdi:window-maximize
            state_color: true
            style:
              '--paper-item-icon-color': var(--my-icon-color)
              top: 50%
              left: 27%

But it not work (icon is still blue). Can you help me where is the mistake?

Are you sure the sensor has that exact state?

I suspect the sensor is for a window (open/closed).
Do not have any windows/doors, so cannot say what must be an exact value.

guys, how can i check if I’ve installed the module correctly. I went into my ssh terminal, went into the config directory, created a www directory, cd’d into that and ran the git clone command.

I’m now trying to add the bit from style… onwards (intend is to hide the keypad)

type: alarm-panel
entity: alarm_control_panel.master_alarm_panel
name: Master Panel
states:
  - arm_home
  - arm_away
  - arm_night
style: |
  #keypad, #alarmCode {
    display: none !important;
  }

I would like to modify the standard light card for a dimmer with three goals:

  • eliminate the three dots for the more-info menu
  • make the background transparent
  • let the icon keep its color instead of changing with dim level / brightness

I managed to achieve the first two but I’m stuck with the third. Any advice?

type: light
entity: light.shelly_leo_dimmer
style: |
  mwc-icon-button.more-info {
    display: none;
  }
  ha-card {
    background: none;
  }

2021-01-30_13-37-31

Inspecting the document, I can see that a filter: on ha-icon-button is responsible for the changing color. However, setting it to none doesn’t seem to have an effect:

type: light
entity: light.shelly_leo_dimmer
style: |
  mwc-icon-button.more-info {
    display: none;
  }
  ha-card {
    background: none;
  }
  ha-icon-button {
    filter: none;
  }

I feel like missing something obvious.

The filter is responsible for the brightness; you also need to set color.

I don’t think it is that easy. The following has no effect:

type: light
entity: light.shelly_leo_dimmer
style: |
  mwc-icon-button.more-info {
    display: none;
  }
  ha-card {
    background: none;
  }
  ha-icon-button {
    filter: none;
    color: green;
  }

image

Use !important

Thanks, yes, that was it!

type: light
entity: light.shelly_leo_dimmer
style: |
  mwc-icon-button.more-info {
    display: none;
  }
  ha-card {
    background: none;
  }
  ha-icon-button {
    filter: none !important;
  }

2021-01-30_16-24-23