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

Hi

Trying hard to change the font size, margin, padding of an input_datetime element. I wonder if anyone could shed some hint on how to achieve my goal. I would like to reduce the size to better fit my phone screen (see image). Anyone did something similar ??

entities:
  - entity: input_datetime.modetect_l0_sdb
    icon: 'mdi:motion-sensor'
    name: Salle de bain sous-sol
    secondary_info: last-changed

TIA

I have similar setup. You don’t need your input_datetimes to be editable, do you?
If you don’t, don’t expose them in fronted. If you really need to, wrap them in template_sensors.

To sum it up: don’t think you need all the information in one place (provided you show that last_changed) especially on a small screen so change your UI design.
Here’s what I have as a main card
mot1
and this is a conditional card I display when Debug is enabled (as you can see, no input_datetimes, they’re all in HA only).
Screen Shot 2020-03-25 at 07.15.05 (2)
Hope that helps.

@thomasloven I’ve recently started using card-mod and would be grateful if you could explain me something.
I want to hide entity’s state badge. I can do that when my entity is in Entities card:

type: entities
entities:
  - entity: automation.ventilation_1st_floor_bathroom_extractor_fan_turn_on_by_humdity_threshold
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            display: none;
          }

but it doesn’t work if my entity is inside fold-entity-row:

type: entities
entities:
  - type: custom:fold-entity-row
    open: true
    head:
      type: section
      label: test
    entities:
      - entity: automation.ventilation_1st_floor_bathroom_extractor_fan_turn_on_by_humdity_threshold
        style:
          hui-generic-entity-row:
            $: |
              state-badge {
                display: none;
              }

What am I doing wrong here?

Are you using the latest versions of both?

fold-entity-row: 1.0.1 (btw, you use numbers instead of 1.0.1 on Github - tough)
card-mod has no version in console but file size is the same as the latest release.

Important message

Since this is popping up more and more here, in discord and on github let me make a clarification to everyone:

Do not use mod-card unless absolutely necessary.

mod-card is the final, all-other-options-exhausted, I’m-about-to-cry-it-must-be-possible-somehow, last resort if nothing else works.

The first line under the “Usage” seciton of the readme states

This is not a new card. Instead it changes the way pretty much any other card works .

That means it should not be used as a card, I.e. if you write type: followed by anything other than the type of the card you actually want to display you’re likely doing it wrong.

Of course, mod-card wouldn’t exist unless there were some cases where it was in fact needed. However, while the list in the readme says “among other”, it’s actually pretty darn exhaustive.
And even for the cards in that list, it’s not necessary most of the time, and not in the way that you think (mod-card is for things like adding a border around an entire stack of cards. If you want to mod the cards in the stack - don’t use mod-card.)

Do not use mod-card unless absolutely necessary.

3 Likes

I don’t really know if it is OK to ask here for advice about styling something very specific but honestly, when else can we do at the moment except prettify our UI?

So,
Thanks to the guidance from @thomasloven a few posts up I don’t have a problem with the template side of things but I can’t find what element I need to use in style to change the icon based on the state of an input boolean. Can anyone help please?

It’s a custom:multiple-entity-row
image

It is in an entities card which is in turn in a vertical stack

I’m successfully changing the icon colour with this, so the template will be similar:

style: |
  :host {
    {% raw %}
    {% set schedule = {% endraw %} {{ schedule }} {% raw %} %}
    {% if states('input_boolean.heating_downstairs_schedule' ~ schedule ~ '_active') == 'on' %}
      --paper-item-icon-color: rgb(255, 165, 0);
    {% elif states(config.entity) == 'on' %}
      --paper-item-icon-color: var(--accent-color);
    {% else %}
      color: var(--secondary-text-color);
      --paper-item-icon-color: var(--secondary-text-color);
    {% endif %}
    {% endraw %}
    ;
  }

Are you trying to change the icon itself, i.e. what symbol is displayed?
That can’t be done with card-mod, I’m afraid.

I was yes,

But never mind.

I tried to add this way but it does not work unfortunately … anyone can help?

could you describe us your goal?

Yes, I want the ₪ mark to go down

That’s not how you target a class.
https://www.w3schools.com/cssref/sel_class.asp

Also, you’ll most likely need to read the “Advanced usage” section of the readme for this one.

Hello!

I came across this wonderful mod in search of a solution to the following problem:

      - entities:
          - entity: input_boolean.humi2x14_drymode
            name: rftg
        type: entities
        style: >
          ha-card {
            padding-top: 16px;
          }

I am trying to move a switch to a place of text (input_boolean entity).
Please, help ) I am absolute zero in CSS )


So I have been screwing around with this all morning… You’d think it would be very simple.
I have a harmony_hub I want to change the icon colour if it is on or off.

Why doesn’t this work:

          - type: entities
            title: Harmony Remote
            state_color: true
            show_header_toggle: false
            entities:
              - input_boolean.harmonyremote
              - entity: remote.harmony_hub
                state_color: true
                style: |
                  :host {
                  --paper-item-icon-color:
                    {% if is_state('remote.harmony_hub',  'on') %}
                      var(--primary-color)
                    {% else %}
                      var(--disabled-text-color)
                    {% endif %}
                    ;
                  }

But then THIS does work:

          - type: entities
            title: Harmony Remote
            state_color: true
            show_header_toggle: false
            entities:
              - input_boolean.harmonyremote
              - entity: remote.harmony_hub
                state_color: true
                style: |
                  :host {
                  --paper-item-icon-color: {% if is_state('remote.harmony_hub', 'on') %} var(--primary-color) {% else %} var(--disabled-text-color) {% endif %};
                  }

I would much prefer to use the first one as it is more readable but can’t for the life of me see my mistake.

@DavidFW1960 I tried both versions in Chrome and Safari and they do work as expected.

try this

- entity: input_boolean.humi2x14_drymode
  name: rftg
  style:
    hui-generic-entity-row:
      $: "div.info.pointer.text-content {display: none}"

but if

well… then it’s either learn some or don’t touch it imho :wink:

1 Like

Thanks. Did get it to work but zero idea what I screwed up…
I probably don’t need to specify the state_color: true twice… might remove and see if it still works.

Thank you very much! It works. I came a little closer to understanding how this works )

1 Like

well… this morning I spent some time playing with card-mod and it didn’t work… why?! then I realised I was changing one part of code but was looking at another element in UI.
need more sleep :wink:

1 Like