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

If it’s jinja, then it does use the backend. Otherwise, I don’t think so.

So I do use some jinja2 templates with markdown-card (which also have card-mod stylings), but not more than before. I do have a lot of template sensors and binary sensors created (through configuration.yaml) which all are jinja2 if I’m correct. That has increased a little over the last 2 months, but by much. However, my CPU usage is very low if I look at the system (RPI4, 4GB) and temp hovers around 45-48 C.

Just very strange how this happened after using cards like auto-entities, decluttering-card and updates to browser_mod and card-mod. Seeing a video of my dashboard of 2 months ago, looks like night and day (old version was faster by a lot). Perhaps decluttering-card uses jinja internally for rendering the cards or something?

So I suppose no one using card-mod has issues then? Then I can move on from and investigate further.

Thanks for the response, I appreciate it and sorry for going so off-topic.

In my experience, installing a lot of custom cards can make the frontend slow down, and same goes with integrations and the backend.

tbh, using a lot of frontend JS doesnt hurt very much. Its where the Jinja comes in. Before Lovelace it was easy, Jinja was backend server side, and custom-ui JS was frontend browser side. While the latter kept growing stronger and stronger, that is not much of a problem these days. An iPhone might be stronger than a Rpi.

When the 2 get mixed, Jinja in Frontend, eg by template-entity-row, or thelovelace-card-templater, maybe even browser-mod, things start to weigh in. Jinja in front-end logic needs top be taken care of. Reason enough for me to try to keep the customizations in Custom-ui JS, and keep them as much as possible out of Jinja Card-mod. Of course Markdown card, which was the first jinja template card in Lovelace. But we cant live without that, and it wont hurt if you use only a few of those I suppose.

Fwiw, I noticed really and lag on using card-templates, which was odd, since it uses JS…

My suggestion would be to see if Jinja templates are happening a lot in your config, and if commenting them out would help.

1 Like

I am using lots of markdown cards for testing purpose as “labels” for each test case like this:
image
Could it be a problem?
HA is installed on RPi 3 / Libreelec (which is basically used for Kodi!!!), and the system sometimes is very slow…
Sorry for off-topic.

Not related to markdown but… 12 mini-graph cards on one page can almost kill iPhone application (on iPhone X). It sometimes happens that the app is reloading again and again while scrolling page down to show next graphs… I don’t know the framework behind but it really sucks. Cannot imagine such page is so heavy…

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.