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

boardlord1 · July 13, 2023, 1:43pm

Here’s an example. The alignment is needed when displayed in the mobile app. If I didn’t pull them closer to each other, I’d have to reduce the font size very much…

arganto · July 13, 2023, 1:54pm

Can you show, what you have tried? As the direct assignment is already working?

- type: picture-elements
    image: /local/model_3_grey_wide.png
    elements:
        - type: state-icon
          entity: binary_sensor.asleep
          icon: mdi:sleep
          style:
            top: 1%
            left: 1%
            transform: none
          card_mod:
            style: |
              state-badge { color: red; }

arganto · July 13, 2023, 2:06pm

You can remove the margin-left of the second value:

card_mod:
  style: |
    .states.flex .state .state__value.ellipsis {
        font-size: 21px;
        align-self: center;
    }
    .states--secondary {
      margin-left: 0px !important;
    }

And BTW, there was a {} problem in your css above, too.

MrSir · July 13, 2023, 9:32pm

Thanks for the reply!

Unfortunately that code isn’t working… hmm… has there been a super-recent change to card mod or HA that would influence this? I’m running HA 2023.6.3, and the card_mod release from 4th of April on github.

I don’t have the exact code I’ve tried, but I’ve tried modifying var(--state-binary_sensor-active-color);, various --paper-icon-XXXX options, various :host {} options, and also some ha-card {} options.
Given that your suggestion above isn’t working for me, perhaps that’s pointing towards the true problem here.

Any ideas? What versions are you running?
(Thank you again for your reply )

alexeiw123 · July 13, 2023, 9:48pm

Thankyou, without me knowing how to identify those elements, I’ll take the question over to the mushroom topic.

arganto · July 14, 2023, 6:08am

This is, because every sensor class can build the DOM and color it in another way. Try this, because it is one level deeper and most probably more secure.

  - type: state-icon
    entity: sun.sun
    icon: mdi:sleep
    style:
      top: 1%
      left: 1%
      transform: none
    card_mod:
      style:
        state-badge:
          $: |
            ha-state-icon { color: red !important; }

And as for alexeiw123, just try to avoid manipulating the variables, which are used and set the colors directly to the element.

MrSir · July 14, 2023, 11:19am

Thank you!

For anyone else in my boat, this solution works for non-conditional state-icon within picture-elements.

Conditional ones, however, don’t seem to work. I’ve spent an hour reading the underlying CSS/html but I don’t seem to understand why they should be any different

Thanks again

arganto · July 14, 2023, 12:27pm

Where did you wrote before, that the requirement is a conditional one?

Anyway. Try invest you hours in looking, where the difference is and adjust then the examples accordingly. Here you can directly see, that with a conditional element, the element is just one level deeper.

  - type: conditional
    conditions:
      - entity: sun.sun
        state: above_horizon
    elements:
      - type: state-icon
        entity: sun.sun
        icon: mdi:sleep
        style:
          top: 1%
          left: 1%
          transform: none
    card_mod:
      style:
        hui-state-icon-element:
          $:
            state-badge:
              $: |
                ha-state-icon { color: red !important; }

Above with condition, below without

Martin_Granger · July 14, 2023, 1:38pm

Any chance of some help here.

I’m trying to add a background colour to this column on the left. any idea how i would code card-mod for this?

arganto · July 14, 2023, 1:52pm

Put a mod-card above/around the stack card and mod from there. the ha stack-card don’t have an ha-card element and can’t be modded without mod-card.

Martin_Granger · July 14, 2023, 2:56pm

Can I not just access the hui-vertical-stack-card selector (highlighted area in the image)? The css in lovelace is baffling.

I’m reluctant to wrap the whole thing in a mod card as this breaks the GUI editing doesn’t it?

arganto · July 14, 2023, 3:08pm

Not via card_mod in the card(s). Only when you are modding via card-mod-theme. But I would not recommend, because of different disadventages in loading order, etc.

So either this or mod-.card or custom stack cards like custom:vertical-stack-in-card

boardlord1 · July 15, 2023, 7:29am

Has anyone noticed that since HA 2023.4.x card mod behaves very erratically? I need to style some mini-graph cards so that the temperature info is correctly visible on the mobile client.
Example card config:

type: custom:mini-graph-card
name: Bathroom
entities:
  - entity: sensor.average_mi_bath_temperature
line_color: darkorange
card_mod:
  style: |
    .states.flex .state .state__value.ellipsis {
        font-size: 23px;
        align-self: center;
    }

However, ever since 2023.4.x when I open the mobile client the card mod styling is not applied at first. I have to exit the app and re-launch it (sometimes multiple times). i can also see the lack of styling on a desktop browser, where I need to refresh the page sometimes 2-3 times to see the correct styling.

Example - when opening the app:

Example - after closing and re-launching the app a few times (correct styling):

Since the github repo hasn’t been updated for months now, is there a fork that has maybe fixed this with newer HA versions? Thanks in advance!

MrSir · July 15, 2023, 8:48am

Thank you kind sir!

(I never mentioned the requirement was conditional because it wasn’t to begin! I’ve been playing around with the cards and testing things and noticed this afterwards)

Appreciate your help. I hope it helps others as well

parautenbach · July 15, 2023, 9:59am

Martin_Granger · July 15, 2023, 10:31am

Sorry - I’m not sure that I get what you mean with the link??

I obviously have card-mod installed and I’m using it to style many elements, but I specifically needed to style the whole column on the left of the display.

arganto · July 15, 2023, 3:09pm

I think he only want to show, what I have written already. No ha-card-element (as in build in stack cards), no direct card-mod. Only via card-mod theme, mod-card-wrapper or custom stack cards.

parautenbach · July 15, 2023, 7:18pm

I posted it because you’re reluctant to follow the correct advice given to you — so that you can see for yourself what the docs says.

Ildar_Gabdullin · July 15, 2023, 11:11pm

Although I have no issues with styling mini-graph-card, I will ask anyway - why do you not use a native “font-size” option of mini-graph-card?

boardlord1 · July 16, 2023, 5:42am

I’m also styling some of them differently , so i did both with card mod. I want to have a different colored borders based on certain conditions - on this, red if the heating is on, and white if the windows is open:

type: custom:mini-graph-card
name: Office
entities:
  - entity: sensor.average_mi_office_temperature
line_color: darkred
card_mod:
  style: |
    ha-card {
      border:
        {% set sensor = states('input_boolean.office_temp_vs_heating_set_point') %}
        {% set sensor2 = states('binary_sensor.office_window_sensor_contact') %}
        {% if sensor == 'off' and sensor2 == 'off' %}
        {% elif sensor == 'on' and sensor2 == 'off' %}solid 3px red
        {% elif sensor == 'off' and sensor2 == 'on' %}solid 3px white
        {% else %}solid 1px var(--ha-card-border-color,var(--divider-color,#e0e0e0))
        {% endif %}
    }
        .states.flex .state .state__value.ellipsis {
        font-size: 23px;
        align-self: center;
    }

And the same can happen - Often the borders are not shown, and I have to refresh the page in the desktop app (or exit/relaunch the app) to have them show up, along with the reduced font size.

Now, the “if” statements might not be 100% neat, but they used to work perfectly before 2023.4 - and the frontend changes in HA.