Entity card – space reduction between icon and entity name

Configuration Frontend
1

Hi all,

I have this entity card and I would like to reduce the space between icon and entity name:

image
image788×170 20 KB

type: entities
entities:
  - entity: sensor.current_version_2
  - entity: sensor.latest_version_2
  - entity: sensor.hacs
show_header_toggle: false
state_color: true
card_mod:
  style:
    .: |
      #states > * {
        margin: 0px 0px !important;
        margin-top: -20px !important;
        margin-left: -15px !important;
        margin-bottom: -15px !important;
        padding-top: 8px;
        padding-bottom: 0px;
        font-size: 12px;
        --mdc-icon-size: 18px; 
      }
      .card-header {
        font-size: 20px;
        line-height: 20px;
      }

I have read many posts but I cannot find the right answer.
Thank you

2

image
image848×182 5.35 KB

This should do it

type: entities
entities:
  - entity: sensor.basement_sensor
    card_mod:
      style:
       hui-generic-entity-row:
        $: |
          .info {
            color: yellow;
            margin-left: -10px !important;
             }
3

It works, thats great, thank you a lot :slight_smile:

full code is:

type: entities
entities:
  - entity: sensor.current_version_2
    card_mod:
      style:
       hui-generic-entity-row:
        $: |
          .info {
            margin-left: -5px !important;
             }
  - entity: sensor.latest_version_2
    card_mod:
      style:
       hui-generic-entity-row:
        $: |
          .info {
            margin-left: -5px !important;
             }
  - entity: sensor.hacs
    card_mod:
      style:
       hui-generic-entity-row:
        $: |
          .info {
            margin-left: -5px !important;
             }
show_header_toggle: false
state_color: true
card_mod:
  style:
    .: |
      #states > * {
        margin: 0px 0px !important;
        margin-top: -20px !important;
        margin-left: -15px !important;
        margin-bottom: -15px !important;
        padding-top: 8px;
        padding-bottom: 0px;
        font-size: 12px;
        --mdc-icon-size: 18px; 
      }
      .card-header {
        font-size: 20px;
        line-height: 20px;
      }

image

1 Like
4

One more question to this topic. How to combine this card:

    - type: entities
      entities:
        - entity: vacuum.sileno
          name: Sileno
          card_mod:
            style: |
              :host {
                {% if states('vacuum.sileno') == 'docked' %}
                  --paper-item-icon-color: #4169E1;
                  color: #4169E1;
                {% elif states('vacuum.sileno') == 'cleaning' %}
                  --paper-item-icon-color: #008000;
                  color: #008000;
                {% elif states('vacuum.sileno') == 'paused' %}
                  --paper-item-icon-color: red;
                  color: red;
                {% elif states('vacuum.sileno') == 'error' %}
                  --paper-item-icon-color: red;
                  color: red;
                {% elif states('vacuum.sileno') == 'returning' %}
                  --paper-item-icon-color: #ba55d3;
                  color: #ba55d3;  
                {% endif %}
              }

with this:

    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .info {
              margin-left: -2px !important;
               }
5

This should work for you.

I also think you can delete --paper-item-icon-color: and still get the same effect.

type: entities
entities:
        - entity: vacuum.sileno
          name: Sileno
          card_mod:
           style:
            hui-generic-entity-row:
             $: |
              .info {
              margin-left: -12px !important;
               }
              :host {
                {% if states('vacuum.sileno') == 'docked' %}
                  --paper-item-icon-color: #4169E1;
                  color: #4169E1;
                {% elif states('vacuum.sileno') == 'cleaning' %}
                  --paper-item-icon-color: #008000;
                  color: #008000;
                {% elif states('vacuum.sileno') == 'paused' %}
                  --paper-item-icon-color: red;
                  color: red;
                {% elif states('vacuum.sileno') == 'error' %}
                  --paper-item-icon-color: red;
                  color: red;
                {% elif states('vacuum.sileno') == 'returning' %}
                  --paper-item-icon-color: #ba55d3;
                  color: #ba55d3;  
                {% endif %}
              }
6

Wow. It works :slight_smile: and you are right --paper-item-icon-color: is not necessary. Thank you so much :+1:

7

Sorry for asking again. I try to understand. I used your advise for other entity but it doesn’t work. I don´t why. Thank you.

        - entity: sensor.mezi_altnem_a_b_dalsi_cyklus
          card_mod:
            style:
              hui-generic-entity-row:
                $: |
                  .info {
                  margin-left: -2px !important;
                   }
                  :host {
                    {% if states('sensor.mezi_altnem_a_b_dalsi_cyklus') == now().date() %}
                      color: #4169E1;
                  }
8

Worked for me

image
image894×226 11.5 KB

type: entities
entities:
  - entity: sensor.basement_sensor
    card_mod:
      style:
       hui-generic-entity-row:
        $: |
          .info {
            margin-left: -15px !important;
             }
  - entity: sensor.basement_sensor_battery
    card_mod:
      style:
       hui-generic-entity-row:
        $: |
          .info {
            margin-left: -15px !important;
             }
  - entity: sensor.bed_curtains_battery
    card_mod:
      style:
       hui-generic-entity-row:
        $: |
          .info {
            margin-left: -15px !important;
             }
show_header_toggle: false
state_color: true
card_mod:
  style:
    .: |
      #states > * {
        margin: 0px 0px !important;
        margin-top: -20px !important;
        margin-left: -15px !important;
        margin-bottom: -15px !important;
        padding-top: 8px;
        padding-bottom: 0px;
        font-size: 12px;
        --mdc-icon-size: 18px; 
      }
      .card-header {
        font-size: 20px;
        line-height: 20px;
      }
9

I found a mistake in the code. Now it works. Thank you.

        - entity: sensor.mezi_altnem_a_b_dalsi_cyklus
          card_mod:
            style:
              hui-generic-entity-row:
                $: |
                  .info {
                  margin-left: -2px !important;
                   }
                  :host {
                    {% if as_datetime(states(config.entity)).date() == now().date() %}
                      color: #4169E1;
                    {% endif %}
                  }
10

Great…doesn’t take much. Alignment and brackets are everything :straight_ruler: ()