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

The CSS-style don’t change in a conditional row. what i doing wrong?

This doesn’t works:

  - type: entities
    entities:
      - type: conditional
        conditions:
          - entity: sensor.kompaktansicht_buro_naehlicht
            state: 'on'
        row:
          entity: light.buro_nahlicht
          icon: 'mdi:desk-lamp'
          name: Nählicht Lampe
          card_mod:
            style: |
              :host {
                text-indent: 45px;
                }

When i use this in a normal row, its works fine:

    entities:
      - type: section
      - entity: switch.bugeleisen
        icon: 'mdi:curling'
        name: Bügeleisen
        card_mod:
          style: |
            :host {
              text-indent: 45px;
              }

Thanks for Helping

Conditional row inside Entities card:

Do not use ":host" here.

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
  - type: entities
    entities:
      - sun.sun
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        row:
          entity: sun.sun
          icon: 'mdi:desk-lamp'
          name: Nählicht Lampe
        style:
          hui-text-entity-row$: |
            hui-generic-entity-row {
              text-indent: 45px;
              color: red;
            }
      - entity: sun.sun

image

Update 20.05.22:
The styling may not working sometimes - see a description for a conditional element inside Picture elements card. There is an issue on Github.

1 Like

@Ildar_Gabdullin Thanks for you fast help. :+1:
But what i do wrong?
This (part of) code:

 ...
  - type: conditional
    conditions:
      - entity: sensor.kompaktansicht_kinderzimmer_dimm_einzeln_deckenlicht
        state: 'on'
    row:
      entity: light.kinderzimmer_01_esph
      icon: 'false'
      name: 'Fenster'
      type: 'custom:slider-entity-row'
      state_color: false
    style:
      hui-text-entity-row$: |
        hui-generic-entity-row {
          text-indent: 45px;
          color: red;
        }
  - type: conditional
    conditions:
      - entity: sensor.kompaktansicht_kinderzimmer_dimm_einzeln_deckenlicht
        state: 'on'
    row:
      entity: light.kinderzimmer_02_esph
      icon: 'false'
      name: 'Mitte'
      type: 'custom:slider-entity-row'
      state_color: false
   ...

results:
ss_mod2

Thanks again

These will not work together:

Replace "hui-text-entity-row" with an appropriate element’s name (cannot tell it, I do not use "custom:slider-entity-row".

1 Like

okay, @Ildar_Gabdullin you bring me on the right track. Thanks a lot. This works:

    style:
      slider-entity-row$: |
        hui-generic-entity-row {
          text-indent: 30px;
        }

I followed the official instructions on Github. But I have no CSS experience. Accidentally found “slider-entity-row” in the source code, added a $ (like in your example) and it worked. A random noob hit.

So that I can understand this and apply it to other cards. Why does it work with it:

 ...
      slider-entity-row$: |
        hui-generic-entity-row {
 ...

and why does it not work with it:

 ...
      slider-entity-row$: |
        slider-entity-row$ {
 ...

Thanks one more time :wink:

I am also a noob in CSS. No web programming experience at all ))). Used to be a software developer for real-time applications. But what I understand and you can understand too:

  • a web page has a tree structure, one element can contain other elements;
  • each element has smth like a name;
  • to style some element you need to point to that element;
  • to point some element = to define a path to this element like “element 1 → element 1.3 → element 1.3.2 → element 1.3.2.6” and so on;
  • path contains “names” of elements and may contain “$” element which specifies a “shadow-root” of some element (a special sub-element inside some element); this “shadow-root” may contain some internal elements; some of this internal elements may contain “shadow-root” elements too;
  • a good tool to find a path to some required element is Code Inspector (in Chrome it is called by F12).

According to written above - it is impossible to have a path like this:

      slider-entity-row$: |
        slider-entity-row$ {

BTW, on your screenshot I see nothing about slider-entity-row…

1 Like

@Ildar_Gabdullin Wonderful, thank you very much for this execution

I’ll go crazy. Everything now seems to be working and the text is now shifted to the right. But that does not work if the hidden entity rows are “shown turn on” during i’m looking on my Lovelace-dashboard. You have to reload the page every time so that it is displayed correctly. With my plan (press a button so that the details are displayed for a few seconds) unfortunately not to be used. Here’s how the effect works:

red square in GIF = is displayed incorrectly, green square = is displayed correctly.
This effect can be seen in all browsers including the HA-IOS-APP.

What am I doing wrong?
(My dashboard idea is based on this “extended detail button” and that’s why it’s important to me)

I also have this effect without type: ‘custom: slider-entity-row’)

type: entities
title: 1.OG Büro / Korridor
style: |
  ha-card {

    --ha-card-background: rgba(255,228,0,0.07);
  }
entities:
  - type: conditional
    conditions:
      - entity: timer.auto_off_korridor_1og
        state_not: idle
    row:
      entity: timer.auto_off_korridor_1og
      icon: 'mdi:timer-outline'
      name: Licht Korridor automatisch aus in...
  - entity: light.1_og_korridor_c
    icon: 'mdi:vanity-light'
    name: Korridor
  - type: section
  - type: conditional
    conditions:
      - entity: timer.auto_off_buro
        state_not: idle
    row:
      entity: timer.auto_off_buro
      icon: 'mdi:timer-outline'
      name: Licht Büro automatisch aus in...
  - entity: light.buro
    icon: 'mdi:vanity-light'
    name: Deckenleuchte Büro
  - entity: group.buro_nahlichter_beide
    icon: 'mdi:desk-lamp'
    name: Nählampen
    extend_paper_buttons_row:
      buttons:
        - entity: script.kompaktansicht_buro_einzelne_naehlicht_lampen
          name: false
          icon: 'mdi:arrow-split-horizontal'
          style:
            button:
              margin-right: 15px
  - type: conditional
    conditions:
      - entity: sensor.kompaktansicht_buro_naehlicht
        state: 'on'
    row:
      entity: light.buro_nahlicht
      icon: 'mdi:subdirectory-arrow-right'
      name: Tischlampe
    style:
      hui-toggle-entity-row$: |
        hui-generic-entity-row {
          text-indent: 50px;
          margin-bottom: -12px;
          margin-top: -10px;
        }
  - type: conditional
    conditions:
      - entity: sensor.kompaktansicht_buro_naehlicht
        state: 'on'
    row:
      entity: switch.nahmaschienen_spot
      icon: 'mdi:subdirectory-arrow-right'
      name: Spot
    style:
      hui-toggle-entity-row$: |
        hui-generic-entity-row {
          text-indent: 50px;
          margin-bottom: -5px;
        }
  - type: section
  - entity: switch.bugeleisen
    icon: 'mdi:curling'
    name: Bügeleisen
  - entity: switch.plotter
    name: Plotter
    icon: 'mdi:printer'
  - type: conditional
    conditions:
      - entity: timer.auto_off_bugeleisen
        state_not: idle
    row:
      entity: timer.auto_off_bugeleisen
      icon: 'mdi:timer-outline'
      name: Bügeleisen aus in...
  - type: conditional
    conditions:
      - entity: sensor.kompaktansicht_buro_fenster
        state: 'on'
    row:
      type: section
  - type: conditional
    conditions:
      - entity: sensor.kompaktansicht_buro_fenster
        state: 'on'
    row:
      entity: binary_sensor.aqara_kontaktsensor_buro_links_c
      icon: 'mdi:window-open-variant'
      name: Fenster
show_header_toggle: false

many thanks for the help

Styling "hui-input-number-entity-row" - entity row for "input_number"

////
UNDER RENOVATION
//
//

This post is dedicated to styling an "input_number" entity defined with a "box" type:

input_number:
  test_number:
    name: ...
    min: ...
    max: ...
    step: ...
    mode: box
    icon: ...

If an "input_number" entity is defined with a "slider" type - then check this post for “slider entities”.

NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).

Colored name:
Styling is done like for other entity rows - check this description.
image

Colored secondary_info:
Styling is done like for other entity rows - check this description.
image

Colored icon:
Styling is done like for other entity rows - check this description.
image

Colored value:
Styling is done like for "input-text" entity row - check this description.

not valid since HA 2022.3

image

Colored background:
Styling is done like for "input-text" entity row - check this description.

not valid since HA 2022.3

image

Aligned value:

not valid since HA 2022.3

Styling is done like for "input-text" entity row - check this description.
image

Wrapping a text for the name:
Styling is done like for other entity rows - check this description.
image

Changing a width of the input field:
Styling is done like for "input-text" entity row - check this description.

not valid since HA 2022.3

image

Hidden name:
Styling is done like for "input-text" entity row - check this description.

not valid since HA 2022.3

image

Colored underline:
Styling is done like for "input-text" entity row - check this description.

not valid since HA 2022.3

image
image

Disabled control:

not valid since HA 2022.3
type: entities
title: Locked input_number
entities:
  - entity: input_boolean.test_boolean
    name: Lock input_number
  - entity: input_number.test_number_2
    tap_action:
      action: none
    card_mod:
      style: |
        :host {
          {% if is_state('input_boolean.test_boolean','on') %}
            --paper-item-icon-color: var(--disabled-text-color);
            --paper-input-container-color: var(--disabled-text-color);
            --paper-input-container-input-color: var(--disabled-text-color);
            color: var(--disabled-text-color);
            pointer-events: none;
          {% endif %}
        }

image
Also, you may remove color options to make the row clearly visible but “read-only”.


More examples are described here.

Hi!

I try all examples from this thread, but not work for me. I try change Badge icon color in HA Dark Theme, path for svg-icon:

/html/body/home-assistant//home-assistant-main//app-drawer-layout/partial-panel-resolver/ha-panel-lovelace//hui-root//ha-app-layout/div/hui-view/hui-masonry-view//div[1]/hui-state-label-badge[1]//ha-state-label-badge//ha-label-badge//div/div[1]/div/slot/ha-icon//ha-svg-icon

Any ideas?
Thanks!

PS:
This work without problem:

        card_mod:
          style: |
            :host {
              --label-badge-blue:
                {% if is_state(config.entity, 'on') %}
                  var(--label-badge-red)
                {% else %}
                  var(--label-badge-blue)
                {% endif %};
            }

Elaborate with context and your specific intent in order for us to help you.

Look at the 1st post, it contains a link to another post with many possible styles.

1 Like

I want to change the color of the icon in the badge depending on the state of the sensors. I use default HA Dark theme.

Thanks, tried again today, it didn’t work, did a cache cleanup and a hard reset in Chrome, it worked.

1 Like
type: custom:auto-entities
card:
  type: glance
  title: Pollenvarsel i dag
entities: null
filter:
  include:
    - state: Medium
    - state: Low
    - state: High
  exclude:
    - entity_id: sensor.pollen_0*_tomorrow
      options:
            options:
              style: |
                :host {
                  --paper-item-icon-color:
                    {% if states(config.entity) | string == Medium}
                      orange
                    {% elif states(config.entity) | string == Low}
                      red
                    {% else %}
                      green
                    {% endif %}
                    ;
                }

What am i doing wrong here, the states are low, medium, high, i want to color the icons based on low, medium, high

Why it is written twice?
And why you are applying a style to the excluded entity?
The "options" section must a part of each "include" section.
Since you decided to list your entities as “first Medium, then Low, then High”, you should “hard-code” a corresponding style for each group.

no idea, its late, moved it to included, and removed the extra options, didnt solve it though

Already tried changing the code and moving it to each include section, still black

Try this (not checked by myself):

filter:
  include:
    - state: Medium
      options:
        style: |
          :host {
            --paper-item-icon-color: smth;
          }
    - state: Low
      options:
        style: |
          :host {
            --paper-item-icon-color: smth;
          }
    - state: High
      options:
        style: |
          :host {
            --paper-item-icon-color: smth;
          }

or you can use one "include" with "or" option and one "style" (with if & else).
Kind of this (cannot check by myself):

filter:
  include:
    - or:
        state: Medium
        state: Low
        state: High
      sort:
        method: state
        reverse: true
      options:
        style: YOUR_COMPLEX_STYLE_WITH_IF_ELSE

hi
how i make weather card bigger in height ?

type: custom:swipe-card
cards:
  - type: custom:simple-thermostat
    entity: climate.bf6d70bf6a79938e9794fu
    sensors:
      - entity: sensor.temperatura_maia
      - entity: sensor.sonoff_a480001b01_temperature
      - entity: sensor.motion_sensor_air_temperature
      - entity: sensor.sonoff_a480001b01_humidity
    decimals: '1'
    step_layout: row
    header:
      name: Termostato
      icon: mdi:thermometer-lines
    layout:
      mode:
        names: false
    step_size: '1'
    view_layout:
      mode:
        names: false
  - type: weather-forecast
    entity: weather.maia
    card_mod:
      style: |
        ha-card {
          color: red;
          height: 1000px
        }

solved

 card_mod:
      style:
        .: |
          ha-card {
            height: 292px !important;
            #background: teal;
          }
           ha-card .name-state .state {
           #color: red;
           font-size: 16px;
          }
           ha-card .name-state .name {
           #color: blue;
           font-size: 35px;
          }

Is there any way to make the slider knob appear even if it is at the top of the stack?

image

image

cards:
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - input_number.system_startup_event_delay
          - input_number.system_startup_event_delay