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

We cannot use here smth like "config.entity".

  - type: picture-glance
    title: title
    image: /local/images/blue_low.jpg
    entities:
      - entity: sun.sun
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
        icon: 'mdi:fan'
    style:
      '.box div:nth-child(3)':
        'div:nth-child(2)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    {% if is_state('input_boolean.test_boolean','on') %}
                    animation: rotation 1s linear infinite, colorize 5s linear  forwards 1;
                    {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
                  @keyframes colorize {
                    0% {
                      color: var(--disabled-text-color);
                    }
                    100% {
                      color: blue;
                    }
                  }
        'div:nth-child(1)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    {% if is_state('input_boolean.test_boolean','on') %}
                    animation: rotation 1s linear infinite, colorize 5s linear  forwards 1;
                    {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
                  @keyframes colorize {
                    0% {
                      color: var(--disabled-text-color);
                    }
                    100% {
                      color: blue;
                    }
                  }
      .: |
        .box div:nth-child(3) div:nth-child(2) {
          --ha-picture-icon-button-on-color: var(--disabled-text-color);
        }
        .box div:nth-child(3) div:nth-child(1) {
          --ha-picture-icon-button-on-color: var(--disabled-text-color);
        }

Actually, since the " --ha-picture-icon-button-on-color" is supposed to be the same for the 1st & 2nd item, the corresponding code may be reduced - if there is no other entities in this “right” group.

bingo, that works. silly of me, I should have edited that myself correctly, sorry. Although I do have another entity next to the engines, I still would love to see your suggestion for a reduced code? Not to use in this config, but for learning purposes.

2 groups:

  • left - all animated
  • right - ##1,2,3 animated
type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_boolean.test_boolean
        icon: 'mdi:fan'
  - type: picture-glance
    title: title
    image: /local/images/blue_low.jpg
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
        icon: 'mdi:fan'
      - entity: input_boolean.test_boolean
        icon: 'mdi:fan'
      - entity: input_boolean.test_boolean
        icon: 'mdi:fan'
      - entity: input_boolean.test_boolean_2
    style:
      '.box div:nth-child(3)':
        'div:nth-child(-n+3)':
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    {% if is_state('input_boolean.test_boolean','on') %}
                    animation: rotation 1s linear infinite, colorize 5s linear  forwards 1;
                    {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
                  @keyframes colorize {
                    0% {
                      color: var(--disabled-text-color);
                    }
                    100% {
                      color: blue;
                    }
                  }
      '.box div:nth-child(2)':
        .wrapper:
          ha-icon-button:
            $:
              mwc-icon-button:
                $: |
                  .mdc-icon-button {
                    {% if is_state('input_boolean.test_boolean','on') %}
                    animation: rotation 1s linear infinite, colorize 5s linear  forwards 1;
                    {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }
                  @keyframes colorize {
                    0% {
                      color: var(--disabled-text-color);
                    }
                    100% {
                      color: red;
                    }
                  }
      .: |
        .box div:nth-child(3) div:nth-child(-n+3) {
          --ha-picture-icon-button-on-color: var(--disabled-text-color);
        }
        .box div:nth-child(3) .wrapper {
          --ha-picture-icon-button-on-color: var(--disabled-text-color);
        }

zzzzzzzzzzzzzzzzzzzzz

Thanks! I see what you do now. Good to know. Bookmarked.

My fan has off, low, medium, high. I am able to make the icon spin at different speeds depending on which button is pressed. What I would like to have happen is an ease-in or out depending on what is selected. Right now, if the fan is running and I press off, it stops instantly.

I have tried placing transition-timing-function: ease-in; in each of the if statements but that does not seem to do anything.

This code works to rotate the fan icon at different speeds.

                                 animation: back-spin linear infinite;
                                {% if state_attr('fan.logans_fan', 'speed') == 'low' %}
                                 animation-duration: 3s;
                                {%- elif state_attr('fan.logans_fan', 'speed') == 'medium' %}
                                  animation-duration: 1.5s;
                                {%- elif state_attr('fan.logans_fan', 'speed') == 'high' %}
                                  animation-duration: .75s;
                                {%- else -%}
                                {%- endif %}
                               }
                              @keyframes back-spin {
                                0% {
                                  transform: rotate(0deg);
                                  }
                                100% {
                                  transform: rotate(-360deg);
                                  }
                                }
1 Like
  1. Are you sure that you must use “transition-timing-function” instead of “animation-timing-function” ?
  2. I think that the property “animation-timing-function” specifies a speed within one cycle.
    In case of “rotate” using “ease-in” (-out) will cause stuttering.
  3. You specified “linear” and “ease-in” for same conditions.

No, I am not sure about “transition-timing-function”. I’m just guessing right now. Is there a way to have the icon start with an ease in or out, then change to linear until the attribute changes and then ease in or out again? That way it makes a smooth transition from one change o the next?

Don’t think this is possible fully featured. It’s possible to slow down at the end, but it’ll have no transition from the position it was in while spinning to no rotation while slowing down.

It’s possible to make it slow down to a stop when the attribute is off? How would I do that? I’ve tried placing animation-timing-function: ease-out in “else” but it doesn’t work.

I would recommend creating another keyframe, and setting animation as a whole instead of individually.

To come back to my own post: There is definitely some heavy impact with card-mod. I’m not sure however where the issue itself is. I disabled card-mod and noticed how blazing fast everything was again.

I also remembered that I haven’t updated my brothers installation for some time. His Lovelace is also blazing fast. I still have card-mod 2.0.3 on his system installed. So I downgraded mine to 2.0.3 as well and noticed it was a lot faster again.

On card-mod 3.0 my Samsung tablet is completely useless, it won’t even load up the dashboard completely and freezes. Using card-mod 2.0.3 loads up everything again. This explains now why it suddenly was like this overnight (because I updated to card-mod 3.0 back then)

On more powerfull hardware (like new iPhones, Galaxy phones and desktop) I also noticed this huge improvement. On card-mod 3.0 a lot of the state changes of button-cards are delayed when toggling. Also delays occur a lot when changing tabs inside a dashboard. All that works fast again now using the latest version before 3.0 dropped.

Not sure if something drastic has changed in how 3.0 handles certain stylings (so changing variables might fix it) or that there is something else going on. I noticed on 3.0 when using a dashboard with only 4 button-cards (RomRiders), there was no performance hit. Using more button-cards made the UI a lot more sluggish. Using the exact same setup with many button-cards, is a lot faster on 2.0.3 than on 3.0 however. I’ll try to investigate further and create a ticket.

You could try around with the Performance tab in the browser devtools.

1 Like

Thanks, I will investigate using that with both builds and report on Github.

Styling footer (or header):


This whole description outdated since HA 2021.12 when new "chip" buttons were presented.

Earlier I tried to understand the styling and faced some problem which was described here and here. The problem was not solved but I found a walkaround - and then decided not to worry about the problem (since there is another solution).

Resizing icons:
image

      - type: entities
        style: |
          .header-footer.footer {
            --mdc-icon-size: 50px;
            height: 50px;
          }    
        entities:
          - sun.sun
          - type: divider
        footer:
          type: buttons
          entities:
            - entity: binary_sensor.updater
            - entity: binary_sensor.updater

Note: this method allows to resize icons but do not align them with respect to the center of the card:
image

To make icons aligned, the following method must be used:

      - type: entities
        style:
          .header-footer.footer hui-buttons-header-footer$:
            hui-buttons-base$div: |
              state-badge {
                width: unset !important;
              }
          .: |
            .header-footer.footer {
              --mdc-icon-size: 50px;
              height: 50px;
            }    
        entities:
          - sun.sun
          - type: divider
        footer:
          type: buttons
          entities:
            - entity: binary_sensor.updater
            - entity: binary_sensor.updater

image

Colored icons:
Method #1 - works for all kind of entities including "sensor", "input_boolean", "binary_sensor", "sun.sun":
image

type: entities
card_mod:
  style:
    hui-buttons-header-footer$:
      hui-buttons-base$div: |
        state-badge {
          color: red;
        }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun

Method #2 - same for some particular items:
image

type: entities
card_mod:
  style:
    hui-buttons-header-footer$:
      hui-buttons-base$div: |
        div:nth-child(1) state-badge {
          color: red;
        }    
        div:nth-child(3) state-badge {
          color: cyan;
        }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sun.sun
    - entity: sun.sun
    - entity: sun.sun

Method #3 - changing "--paper-item-icon-color" & "--paper-item-icon-active-color" variables which define styles for binary_sensor, input_boolean, switch, sun.sun:
image

type: entities
card_mod:
  style: |
    .header-footer.footer {
      --paper-item-icon-active-color: orange;
      --paper-item-icon-color: grey;
    }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sensor.cleargrass_1_co2
    - entity: sun.sun
    - entity: input_boolean.service_true_value

Changing a background:
image

type: entities
entities:
  - sun.sun
footer:
  type: buttons
  entities:
    - entity: sun.sun
    - entity: sun.sun
style:
  .header-footer.footer hui-buttons-header-footer:
    $: |
      hui-buttons-base {
        background-color: red;
      }

####### END of old style-buttons #######


Styling an image inside a footer:
By default the footer’ height is automatically set dependingly on the image’s size:
image

type: entities
entities:
  - sun.sun
footer:
  type: picture
  image: >-
    https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png

Here is how to adjust the image’s height to the card’s height:
image

type: entities
entities:
  - sun.sun
footer:
  type: picture
  image: >-
    https://www.home-assistant.io/images/lovelace/header-footer/balloons-header.png
style:
  .header-footer.footer hui-picture-header-footer:
    $: |
      img {
        height: 100%;
      }
  .: |
    .header-footer.footer {
      height: 200px;
    }

P.S. Do you know that you can use a GIF?
11

type: entities
entities:
  - sun.sun
footer:
  type: picture
  image: 'https://i.gifer.com/Z23b.gif'
style:
  .header-footer.footer hui-picture-header-footer:
    $: |
      img {
        height: 100%;
      }
  .: |
    .header-footer.footer {
      height: 100px;
    }

qaws

  type: entities
  entities:
    - sun.sun
  footer:
    type: picture
    image: 'https://i.gifer.com/5uwq.gif'
  style:
    .header-footer.footer hui-picture-header-footer:
      $: |
        img {
          height: 100%;
        }
    .: |
      .header-footer.footer {
        height: 70px;
      }
      ha-card {
        --ha-card-background: black ;
        color: white;
      }

More examples are described here.

1 Like

One thing I remembered: with card-mod 3.0 the syntax has changed. While the old syntax still works like Thomas mentioned in the changelog, I now wonder if using the old syntax could somehow cause a performance hit.

Old:

style:
  ... stuff here ...

New:

card_mod:
  style:
    ... stuff here ...

Since I use the old syntax, I figured maybe this can cause this. If it’s unknown, I’ll re-create a dashboard with some elements using the new syntax and load 3.0. And then compare that with old syntax on 3.0 and use the performance tab. A lot of people still use the old syntax, so I find it odd no-one else has mentioned or experienced this performance hit.

But could be I’m way off and the syntax has no influence (I’m not experienced enough to make that assumption). I want to prevent wasting a lot of time in testing stuff that has no effect ofcourse.

I gonna ask some probably silly questions (sorry for broken English).

I have HA on RPi 3 (docker).
My HA setup includes 3 dashboards (for HA itself, for testing things, for testing card-mod), each dashboard includes lots (~10…20) of views.
This is all edited in UI, not in yaml files (I know nothing about yaml-mode, it is in my plans).
And I use an old card-mod syntax in most cases (99%).

Every time when I work with Inspector (Chrome, Win10x64) with views with card-mod, I observe a high CPU load on my PC (~40% load for Chrome).
Sometimes I have to restart Chrome since it becomes too slow.
When I do not use Inspector - it works quite fine.
And I usually use Inspector only for testing card-mod.
Q1: Is it normal for Chrome to become so slow when using an Inspector?
If not - should I change something in Chrome’s settings?

Also, as I understand, a code for some particular view works only when I open this view in my browser.
And some part of this code works on RPi, some part - on my PC.
That means that I can have lots of views in my HA setup, and it will not make my HA slower - unless I open some very complex view. But - this is just my opinion, my knowledge about HA internal structure is very poor.
Q2: Since I have a separate dashboard with ~20 views for testing card-mod - may it slow down my HA when I do not open this dashboard?

Meanwhile - a small Animation for bar-card:

The progress is moving if the battery is charging.

type: 'custom:bar-card'
title: animation
columns: 1
entities:
  - entity: sensor.battery_life360_ildar_iphone_5s
    direction: right
    name: Battery
    icon: 'mdi:battery'
    height: 40px
    decimal: '0'
    min: '0'
    max: '100'
    target: '100'
style: |
  bar-card-row bar-card-card bar-card-background bar-card-targetbar {
    {% if is_state('binary_sensor.battery_charging_life360_ildar_iphone_5s','on') %}
    animation: filling 5s linear infinite;
    {% endif %}
    --bar-percent: 0 !important;
  }
  @keyframes filling {
    0% {
      --bar-target-percent: 0;
    }
    10% {
      --bar-target-percent: 10%;
    }
    20% {
      --bar-target-percent: 20%;
    }
    30% {
      --bar-target-percent: 30%;
    }
    40% {
      --bar-target-percent: 40%;
    }
    50% {
      --bar-target-percent: 50%;
    }
    60% {
      --bar-target-percent: 60%;
    }
    70% {
      --bar-target-percent: 70%;
    }
    80% {
      --bar-target-percent: 80%;
    }
    90% {
      --bar-target-percent: 90%;
    }
    100% {
      --bar-target-percent: 100%;
    }
  }
  bar-card-row bar-card-card bar-card-background bar-card-markerbar {
    display: none;
  }

More examples are described here.

2 Likes

Hi Guys,

I wonder if you can help me I am in the process of setting up my card for my air fresheners im 90% there but I can’t seem to figure out how to style the text input highlighted below:

using the following I have been able to change the font size:

--paper-input-container-shared-input-style_-_font-size: 12px;

but I can’t work out how to change the colour and justify the text to the right hand side. Any ideas?

You’ll probably need to shadow-root into it.

Styling an "input-text" row inside the Entities card:

Update (21.06.22): the post is updated with styles for MDC controls; old styles (see at the bottom of the post) do not work since 2022.3.


Colored name:
Two methods are available:
– using a CSS variable;
– using a CSS property with a detailed DOM navigation.

it3

Notes:
1.The 1st method - the name’s color changes if an input field is selected (from “ --mdc-text-field-label-ink-color” to “--mdc-theme-primary”).
2.The 2nd method - allows to change a color permanently (whether the input field is selected or not).

code
      - type: entities
        title: Colored name
        entities:
          - entity: input_text.test_text
            name: Colored name (method 1)
            card_mod: &ref_card_mod_red_text_host
              style: |
                :host {
                  --mdc-text-field-label-ink-color: red;
                }
          - entity: input_text.test_text
            name: Colored name (method 1)
            secondary_info: last-changed
            card_mod: *ref_card_mod_red_text_host
          ################################################
          - entity: input_text.test_text
            name: Colored name (method 2)
            card_mod: &ref_card_mod_red_text_dom
              style:
                ha-textfield $: |
                  span#label {
                    color: red;
                  }
          - entity: input_text.test_text
            name: Colored name (method 2)
            secondary_info: last-changed
            card_mod: *ref_card_mod_red_text_dom
          ################################################
          - entity: input_text.test_text
            name: default
          - entity: input_text.test_text
            name: default
            secondary_info: last-changed

How to style several rows:
it2

Note that a common style may be overwritten for some particular entity.

code
      - type: entities
        title: Colored name for all entities
        card_mod:
          style:
            .card-content:
              div:
                hui-input-text-entity-row $ hui-generic-entity-row ha-textfield $: |
                  span#label {
                    color: orange;
                  }
        entities:
          - entity: input_text.test_text
            name: Cannot be overwritten
            card_mod:
              style: |
                :host {
                  --mdc-text-field-label-ink-color: red !important;
                }
          - entity: input_text.test_text
            name: Overwritten style
            card_mod: &ref_card_mod_overwritten_text
              style:
                ha-textfield $: |
                  span#label {
                    color: red !important;
                  }
          - entity: input_text.test_text
            name: Overwritten style
            secondary_info: last-changed
            card_mod: *ref_card_mod_overwritten_text
          - entity: input_text.test_text
            secondary_info: last-changed
            name: Colored name (common)
          - entity: input_text.test_text
            name: Colored name (common)
          - entity: input_text.test_text
            secondary_info: last-changed
            name: Colored name (common)

Colored icon:
Two methods are available:
– using a CSS variable;
– using a CSS property with a detailed DOM navigation.

image

code
      - type: entities
        title: Colored icon for some entity
        entities:
          - entity: input_text.test_text
            name: 'Colored icon (method #1)'
            secondary_info: last-changed
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: red;
                }
          - entity: input_text.test_text
            name: 'Colored icon (method #2)'
            secondary_info: last-changed
            card_mod:
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    color: red;
                  }      
          - entity: input_text.test_text
            secondary_info: last-changed
            name: default
          - entity: input_text.test_text
            name: default

How to style several rows:
image

Note that a common style may be overwritten for some particular entity.

code
      - type: entities
        title: Colored icon for all entities
        card_mod:
          style: |
            ha-card {
              --paper-item-icon-color: cyan;
            }
        entities:
          - entity: input_text.test_text
            name: Overwritten color
            secondary_info: last-changed
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: red;
                }
          - entity: input_text.test_text
            secondary_info: last-changed
            name: Colored icon (common)
          - entity: input_text.test_text
            name: Colored icon (common)

Some other styles for an icon - resized icon, hidden icon:
image

code
      - type: entities
        title: Other styles for icon
        entities:
          - entity: input_text.test_text
            name: resized icon
            card_mod:
              style: |
                :host {
                  --mdc-icon-size: 40px;
                }
          - entity: input_text.test_text
            name: hidden icon
            card_mod:
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    display: none;
                  }

Colored value:
Two methods are available:
– using a CSS variable;
– using a CSS property with a detailed DOM navigation.

image

code
      - type: entities
        title: Colored value
        entities:
          - entity: input_text.test_text
            name: colored value (method 1)
            card_mod:
              style: |
                :host {
                  --mdc-text-field-ink-color: red;
                }
          - entity: input_text.test_text
            name: colored value (method 2)
            card_mod:
              style:
                ha-textfield $: |
                  .mdc-text-field__input {
                    color: red !important;
                  }
          - entity: input_text.test_text
            name: default

Colored field’s background:
image

code
      - type: entities
        title: Colored background
        entities:
          - entity: input_text.test_text
            name: colored background
            card_mod:
              style: |
                :host {
                  --mdc-text-field-fill-color: lightgreen;
                }
          - entity: input_text.test_text
            name: default

Colored underline:
The underline had 3 possible states:
– a default (static) state;
– the input field is hovered by a mouse;
– the input field is selected by a mouse.

There are CSS variables for each state.
In the example below:
– the 1st row is modded by using these CSS variables;
– the 2nd row is modded by changing CSS properties with a detailed DOM navigation;
– the 3rd row has transparent underlines.

it1

code
      - type: entities
        title: Colored underline
        entities:
          - entity: input_text.test_text
            name: colored underline (method 1)
            card_mod:
              style: |
                :host {
                  --mdc-text-field-idle-line-color: red;
                  --mdc-text-field-hover-line-color: cyan;
                  --mdc-theme-primary: magenta;
                }
          - entity: input_text.test_text
            name: colored underline (method 2)
            card_mod:
              style:
                ha-textfield $: |
                  .mdc-line-ripple::before {
                    border-bottom-color: orange !important;
                  }
                  .mdc-line-ripple::after {
                    border-bottom-color: magenta !important;
                  }
          - entity: input_text.test_text
            name: no underline
            card_mod:
              style:
                ha-textfield $: |
                  .mdc-line-ripple::before,
                  .mdc-line-ripple::after {
                    border-bottom-style: none !important;
                  }
          - entity: input_text.test_text
            name: default

Making the name hidden or more compact:
Since the row has a bigger height than other entity rows, we may want to make a row more compact.
First, we need to customize the row’s height.
Next, there are 2 options for a name & a value:
– remove the name;
– place the name and the value closer to each other.

image

code
  - type: entities
    title: Hidden/compact name
    entities:
      - entity: input_text.test_text
        name: custom
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
              .mdc-text-field__input {
                align-self: center;
              }
              span#label {
                display: none;
              }
            .: |
              ha-textfield {
                height: 40px;
              }
      - entity: input_text.test_text
        name: custom
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
              .mdc-text-field__input {
                align-self: end;
              }
            .: |
              ha-textfield {
                height: 40px;
              }
      - entity: input_text.test_text
        name: default

How to disable an input_text row:
Two methods are available:
– the row is displayed as disabled;
– the row only has a read-only input field.

image

code
  - type: entities
    title: Locked input_text
    entities:
      - entity: input_boolean.test_boolean
        name: Lock input_text
      - entity: input_text.test_text
        name: disabled
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                --mdc-text-field-ink-color: var(--disabled-text-color);
                --mdc-text-field-label-ink-color: var(--disabled-text-color);
                --mdc-text-field-idle-line-color: var(--disabled-text-color);
                --paper-item-icon-color: var(--disabled-text-color);
                pointer-events: none;
              {% endif %}
            }
      - entity: input_text.test_text
        name: read-only
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                pointer-events: none;
              {% endif %}
            }

Short list of CSS variables available for “textfield” control:


Old styles - not valid since HA 2022.3

Colored name:
image
Method #1:

type: entities
entities:
  - entity: input_text.test_text
    style:
      hui-generic-entity-row:
        $: |
          .info {
            color: red;
          }

Method #2:

type: entities
entities:
  - entity: input_text.test_text
    style: |
      :host {
        color: red;
      }

Colored value:
image
Method #1:

type: entities
entities:
  - entity: input_text.test_text
    style:
      hui-generic-entity-row:
        paper-input:
          $: |
            paper-input-container iron-input {
              color: red;
            }

Method #2:

type: entities
entities:
  - entity: input_text.test_text
    style: |
      :host {
        --paper-input-container-input-color: red;
      }

Colored background:
image
Method #1:

type: entities
entities:
  - entity: input_text.test_text
    style:
      hui-generic-entity-row:
        paper-input:
          $: |
            paper-input-container iron-input {
              background-color: orange;
            }

Method #2:

type: entities
entities:
  - entity: input_text.test_text
    style: |
      :host {
        --paper-input-container-shared-input-style_-_background: orange;
      }

Aligned value:
image
Method #1:

type: entities
entities:
  - entity: input_text.test_text
    style:
      hui-generic-entity-row:
        paper-input:
          $: |
            paper-input-container iron-input {
              text-align: right;
            }

Method #2:

type: entities
entities:
  - entity: input_text.test_text
    style: |
      :host {
        --paper-input-container-input_-_text-align: right;
      }

Wrapping a text for the name:
By default a long name is clipped:
image

type: entities
entities:
  - entity: input_text.test_text
    name: long long long long long long long

How to enable wrapping:
image

type: entities
entities:
  - entity: input_text.test_text
    name: long long long long long long long
    style:
      hui-generic-entity-row:
        $: |
          .info {
            text-overflow: unset !important;
            white-space: unset !important;
          }

Changing a width of the input field:
image
Method #1:

type: entities
entities:
  - entity: input_text.test_text
    style:
      hui-generic-entity-row:
        paper-input:
          $: |
            paper-input-container iron-input {
              width: 300px;
            }

Method #2:

type: entities
entities:
  - entity: input_text.test_text
    style: |
      :host {
        --paper-input-container-shared-input-style_-_width: 300px;
      }

Hidden name:
image

type: entities
entities:
  - entity: input_text.test_text
    style:
      hui-generic-entity-row:
        $: |
          .info {
           display: none;
          }
        paper-input:
          $: |
            paper-input-container iron-input {
              --paper-input-container-shared-input-style_-_width: 400px;
            }

Colored underline:
image
image
Method #1:

type: entities
entities:
  - entity: input_text.test_text
    style:
      hui-generic-entity-row:
        paper-input:
          $:
            paper-input-container:
              $: |
                .underline .unfocused-line {
                  border-color: orange;
                }
                .underline .focused-line {
                  border-color: red;
                }

Method #2:

type: entities
entities:
  - entity: input_text.test_text
    style: |
      :host {
        --paper-input-container-focus-color: red;
        --paper-input-container-color: orange;
      }

Disabled control:
image

type: entities
title: Locked input_text
entities:
  - entity: input_boolean.test_boolean
    name: Lock input_text
  - entity: input_text.test_text
    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 %}
        }

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


More examples are described here.

2 Likes