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

though nice we can now use the color variable names, I don’t feel this is as clear as in what one is doing. eg this seems more intuitive considering the layout of the badge (a circle on top, the actual badge, than an attached .label, and below that we set the style for the name, and below config represents that better imho:

    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge {
                border-style: dashed;
                border-color: blue;
                color: grey;
                background-color: yellow;
               }

              .badge-container .label-badge .label span {
                border-style: dotted;
                border-color: pink;
                color: red;
                background-color: green;
               }
          .: |
            :host {
              color: orange;
            }

in fact, this might even be better yet:

    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .badge-container .label-badge {
                border-style: dashed;
                border-color: blue;
                color: grey;
                background-color: yellow;
               }

              .badge-container .label-badge .label span {
                border-style: dotted;
                border-color: pink;
                color: red;
                background-color: green;
               }
 
              .badge-container .title {
                color: orange;
              }

and seeing the last version here, makes me wonder if we couldn’t level up the .badge-container?

apparently yes:

    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;
                }

:wink:

Schermafbeelding 2021-01-25 om 15.45.16

You could use comments as well. In the format /* Color circle */.

yes, that’s a great idea, edited the final styling above this one.

In the following entity is it possible to enlarge the font only of the state? (in this case the temperature)

type: entities
entities:
  - entity: sensor.snzb_02_corridoio_temperature
    name: Room 

Lovelace

Use search next time please)

1 Like

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;
  }