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

I was referring to Markdown using jinja templates in the content, (or in the card-mod style of course)
And yes, the mini-graph is a hog too in my experience, which probably has to do with the fact it has te read the history of the server (in my case a RPi) don’t think it has to do with the hand held though.

Again, try minimize backend issues as much as possible.

I have some entities card at the bottom of my wall mount got clipped. Is there a way using this card-mod to reduce the height of the card?

Thanks

I use this kind of markdown templates for instance, with card-mod:

                      ## <ha-icon icon="mdi:lightbulb"></ha-icon> &nbsp;&nbsp;&nbsp; {% if is_state('sensor.woning_lampen_aan', '0')%} Alle lampen
                      staan uit. {% elif is_state('sensor.woning_lampen_aan', '1')%} Er
                      staat 1 lamp aan.  {% else %}  Er staan
                      {{states('sensor.woning_lampen_aan')}}  lampen aan.  {% endif%}

Which include template sensors, which I believe also use the jinja template engine right? But those use the backend if I understand correctly (the sensors themselves). Seeing as my CPU temp and load are very low all the time, I don’t think it’s a RPI4 bottleneck right?

Also I use a lot of RomRider’s button-cards, which all have label_templates, like this:

    label: |
      [[[
        var bri = Math.round(entity.attributes.brightness / 2.55);
        return (bri ? bri : '0');
      ]]] 

Each button-card is rendered througha decluttering-card, which allows me to envoke browser-mod popups. And all this is inside an auto-entities card with the include filters. This allows me to automatically populate my UI with button-cards, which also auto-generate popup cards for the specific device. Adding a new light for instance to HA, automatically creates the light button-card, correct brightness label and popup slider with brightness, without doing anything.

Is decluttering-card heavy if it’s loaded with many ‘layers’ like mine? I also use a dashboard without auto-entities, but still use a lot of decluttering-cards. That dashboard even struggles a lot of the time on my desktop (which is powerfull enough). Also my media_player cards are created using decluttering-cards.

Might try a new dashboard where I revert and manually write each button and use global popups (which I used before, but got tired of creating a new popup everytime a light changed). Instead of using decluttering-card and load it with different layers.

Tbh, I couldn’t say. Besides the pop-ups your config is nothing special :wink:

You’re the only one who is able to try and see. Disable the pop-ups and see if things get better. If not, try something else.

Also, processor % usage per se doesn’t mean a lot. I mean, what is low, or high? Mine is on 17 % often and has 7% as minimum while others see 2%.

That’s 83 percent unused :wink: and that’s on a pi4 with 3126 entities and all customized.

Again, you never know till you find out :sunglasses:

1 Like

Trying to learn how to change an icon’s color for buttons in a card’s footer (or header).

Here is an easy way:

type: entities
title: '--paper-item-icon-color -> .header-footer.footer'
style: |
  .header-footer.footer {
    --paper-item-icon-color: red;
  }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sensor.cleargrass_1_co2
    - entity: sun.sun

image
Note that the color is changed only for the 1st entity, for the "sun.sun" we are supposed to change “active” color:

type: entities
title: '--paper-item-icon-XXX-color -> .header-footer.footer'
style: |
  .header-footer.footer {
    --paper-item-icon-active-color: red;
    --paper-item-icon-color: cyan;
  }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sensor.cleargrass_1_co2
    - entity: sun.sun

image
That was a changing color by using variables.
And when I try to change a color directly for "ha-svg-icon" I am getting a wrong placement:

type: entities
title: color -> ha-svg-icon
style:
  .header-footer.footer:
    hui-buttons-header-footer:
      $:
        hui-buttons-base:
          $:
            state-badge:
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {
                      color: red;
                    }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sun.sun
    - entity: sun.sun

image
The same result I get when changing the "--paper-item-icon-color" variable for some particular item:

type: entities
title: '--paper-item-icon-color -> div'
card_mod:
  style:
    .header-footer.footer hui-buttons-header-footer$hui-buttons-base$: |
      div:nth-child(1) {
        --paper-item-icon-color: red;
      }    
entities:
  - sun.sun
  - type: divider
footer:
  type: buttons
  entities:
    - entity: sensor.cleargrass_1_co2
    - entity: sensor.cleargrass_1_co2

image

OK, this is NOT critical - but I wonder why this misplacement happens after applying a style.

HI Ildar,
since you’re in the mood: would you know of a way to set a background to a horizontal stack? Add background image to horizontal stack?

I think Ive explored every possible option, and even fellows here believe it impossible, but hey, you’re the magician :wink: Maybe Card-mod can be the rescue after all…

Hi there !

I’m looking for make rotate my entites card’s icon when it’s on.
For now I just changed colors when it’s on but I want a rotation too

type: entities
entities:
  - entity: switch.vocolinc_vp5_1096ca_humidifier
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if is_state('switch.vocolinc_vp5_1096ca_humidifier', 'on') %}
            green
          {% elif is_state('switch.vocolinc_vp5_1096ca_humidifier', 'off') %}
            orange
          {% endif %}
        }

I want use something like

-icon:
 - animation:
   - rotating 2s linear infinite

but nothings happen :thinking:

I personally like to help users who have knowledge of CSS already. Anyway, first you need to declare a keyframe with transform. Then you can shadow-root as needed and apply that.

I have tested this :

type: entities
entities:
  - entity: switch.vocolinc_vp5_1096ca_humidifier
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if is_state('switch.vocolinc_vp5_1096ca_humidifier', 'on') %}
            green
            @keyframes spin {
            from {
            transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }
          }
          {% elif is_state('switch.vocolinc_vp5_1096ca_humidifier', 'off') %}
            orange
          {% endif %}
        }

I have some skills in CSS but I’m lost with css selector here

Try using this:

type: entities
entities:
  - entity: sensor.cleargrass_1_co2
    icon: 'mdi:fan'
    name: Xiaomi breather CO2
style:
  hui-sensor-entity-row:
    $:
      hui-generic-entity-row:
        $:
          state-badge:
            $:
              ha-icon:
                $: |
                  ha-svg-icon {
                    color: orange;
                    animation: rotation 0.5s linear infinite;
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(360deg);
                    }
                  }

The result similar to this:

If you will not achieve what you want - let me know.

Hi Marius, I have seen your post and even tried to find a way.
So far with no success((.
I will keep looking.

Hi,
could someone please help me.

I’m trying to reduce the padding on the h1.card-header for the below but I don’t understand why it’s not working


here is the style code I’m using which I’ve used on other cards

style: |
  h1.card-header {
    padding-top: 2px;
    padding-right: 16px;
    padding-bottom: 1px;
    padding-left: 16px;
  }

where do i place it on the above lovelace card as I can’t seem to figure it out

type: horizontal-stack
title: Phair-Sever
cards:
  - type: 'custom:mini-graph-card'
    hours_to_show: 12
    points_per_hour: 2
    animate: true
    hour24: true
    height: 150
    entities:
      - sensor.phair_server_cpu_usage
    state_adaptive_color: true
    show_state: true
    name: CPU
    line_color: '#00ff26'
    line_width: 7
    color_thresholds:
      - value: 20
        color: '#00ff26'
      - value: 50
        color: '#ddff00'
      - value: 60
        color: '#ff8c00'
      - value: 80
        color: '#ff5900'
      - value: 90
        color: '#ff0000'
    show:
      extrema: true
      name_adaptive_color: true
      icon_adaptive_color: true
  - type: 'custom:mini-graph-card'
    hours_to_show: 12
    points_per_hour: 2
    animate: true
    hour24: true
    height: 150
    entities:
      - sensor.phair_server_system_temperature
    state_adaptive_color: true
    show_state: true
    name: TEMP
    line_color: '#00ff26'
    line_width: 7
    color_thresholds:
      - value: 20
        color: '#00ff26'
      - value: 50
        color: '#ddff00'
      - value: 60
        color: '#ff8c00'
      - value: 80
        color: '#ff5900'
      - value: 90
        color: '#ff0000'
    show:
      extrema: true
      name_adaptive_color: true
      icon_adaptive_color: true
  - type: 'custom:mini-graph-card'
    hours_to_show: 12
    points_per_hour: 2
    animate: true
    hour24: true
    height: 150
    entities:
      - sensor.phair_server_memory_usage
    state_adaptive_color: true
    show_state: true
    name: RAM
    line_color: '#00ff26'
    line_width: 7
    color_thresholds:
      - value: 20
        color: '#00ff26'
      - value: 50
        color: '#ddff00'
      - value: 60
        color: '#ff8c00'
      - value: 80
        color: '#ff5900'
      - value: 90
        color: '#ff0000'
    show:
      extrema: true
      name_adaptive_color: true
      icon_adaptive_color: true

Why is it in a stack-in card? Anyway, add it to the mini-graph-cards.

Hi all,

I’m trying to reduce the line height and icon width of an input_select entity.
I want to use the code I found in this post:

However, I’m really new to css and can’t get it to work. I have tried inspecting those fields, but I’m still lost.

This is what I have right now:

  - type: entities
    entities: 
      - entity: input_select.test
        card_mod:
          style:
            ha-paper-dropdown-menu:
              $:
                paper-input:
                  $:
                    paper-input-container: |
                      div.floated-label-placeholder {
                         line-height: 0px;
                      }
            hui-entities-card$hui-input-select-entity-row$: |
              state-badge {
                width: 0px;
              }

If anyone could help me out that’d be great! Thank you!

I have this message:

So this is my code , if you can save me

That is not an error. It’s just because the HA validator wasn’t made to account for custom properties. You should be using card_mod 3.0 syntax, though.

Can you tell me more about how using this syntax?
Because when I try like this, it not working anymore

Like what?

You tell me to use this syntax, but when I read the documentation, is that I do.
Maybe I think it’s my Vs code who dont understand this.