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

It may not look like much, but I’m kinda proud I was able to get this state text to word wrap! Starting to get the hang of this card mod stuff a little bit…

2022-04-17_21-20

style:
  hui-conditional-element: |
    hui-state-label-element {
      width: 100%;
    }
  hui-conditional-element hui-state-label-element$: |
    div {
      padding: 5% !important;
      white-space: normal !important;
      line-height: 120%;
      text-align: center;
      width: 90%;
    }
2 Likes

Got more important question -
What kind of sensor do you use for Maggie?
Is it a presence detection sensor?

It’s a sensor that reads data from her Whistle tracker which you can actually see on her collar!

(If you’re interested in purchasing one, let me know! Looks like there’s a discount for you and a gift card for me if I refer youl!)

2 Likes

Hello.
Can anyone help with my problem?

type: entities
entities:
  - entity: input_number.pctemp
    secondary_info: none
    name: NASTAWA
    card_mod:
      style: |
        :host {
        {% if is_state('sensor.danfosstempcheck', '0') %}
          color: orange;
        {% elif is_state('sensor.danfosstempcheck', '1') %}
          color: white
        {% else %}
          color: red;
        {% endif %}
        }
  - entity: input_select.pctryb
    name: TRYB
    card_mod:
      style: |
        ha-paper-dropdown-menu:
         $:
            paper-menu-button:
              .dropdown-trigger:
               paper-input:
                  $:
                   paper-input-container: |
                      iron-input {
                        color: red;
                      }
title: DANFOSS

First entity is working great but I cannot make input_select to do same change of color. In fact I cannot change it at all. I think tht i am missing something obvious but after reading posts here and some others I am not sure where to look for mistaktes. I was tying to reuse #1674 but with no luck.

What version of HA are you on?

Since 2022.03, the frontend uses Material Web Components for input fields (including input selects) so the whole CSS path has changed - your code may have once worked, but is likely out of date now.

Can you explain in more detail what you want to achieve?

I am running HA core-2022.4.4.
It has never worked since I am working on this since 2 days.
Full card should be something like this concerning “old way”:

type: entities
entities:
  - entity: input_number.pctemp
    secondary_info: none
    name: NASTAWA
    card_mod:
      style: |
        :host {
        {% if is_state('sensor.danfosstempcheck', '0') %}
          color: orange;
        {% elif is_state('sensor.danfosstempcheck', '1') %}
          color: white
        {% else %}
          color: red;
        {% endif %}
        }
  - entity: input_select.pctryb
    name: TRYB
    card_mod:
      style: |
        ha-paper-dropdown-menu:
         $:
            paper-menu-button:
              .dropdown-trigger:
               paper-input:
                  $:
                   paper-input-container: |
                      iron-input {
                        {% if is_state('sensor.danfossmodecheck', '0') %}
                          color: orange;
                        {% elif is_state('sensor.danfossmodecheck', '1') %}
                          color: white
                        {% else %}
                          color: red;
                        {% endif %}
                     }
title: DANFOSS

Aim is to use template entity “sensor.danfossmodecheck” (which checks if “input_select.pctryb” desired mode is equal to another entity that represents current setting on heat pump) to change color of “input_select.pctryb” so that i will know if sending “mode command” got to heat pump or not.
Just as on this image posted above (red part):

Thing is I was trying to figure out how do get to this new input fields but using "Chrom DevTools " just showed me that I know to little about CSS and trying to figure out anything by values names in theme file did not work either.

As Chris wrote, that post is OUTDATED - some styles do not work due to “paper elements → material web components” change.
Currently have no time to fix it.
A bit later I hope.

Even using the browser’s code inspector, and knowing the CSS selector path, I couldn’t get anything to work.

In fact, I got some very strange results indeed where the input select would just display the card_mod raw code.

It’s odd, because I have managed to get input date times to work properly with card_mod, but I’m afraid the new MWC input selects appear way beyond my (very limited) CSS knowledge.

After these 4 hours I will just step back from diving into lake of “more questions then answears”.
I guess I cannot just proces DOM navigation right.
If it comes handy for someone: For some reason (blurry to me) placing just

    card_mod:
      style: |
        :host {
          color: yellow;
        }

under input_select entity causes that all elements:

/hui-input-select-entity-row//hui-generic-entity-row/ha-select/

are inheriting color perfectly, but rest of them:

/div/div/span[3]/span

are not, so this is surely me being unable to inject value properly.

Any ideas on this? I still do not have a solution for this - and I start to believe it’s impossible… :frowning:

When I swap the commenting on these two style blocks, I can get the icon colors to change as intended. But, when I introduce the templating, I get an “Unknown error” with a RELOAD UI button. Any recommendations?

badges:
  - entity: sun.sun
    # style: |
      # :host {
        # color: white;
        # --label-badge-red: silver;
        # --label-badge-background-color: black;
      # }
    style: |
      :host {
        color: white;
        --label-badge-red: silver;
        {% if is_state('sun.sun','above_horizon') %}
        label-badge-background-color: yellow;
        {% else %}
        label-badge-background-color: black;
        {% endif %}
      }

That won’t work because I have 6 possibilities of conditional cards for total amount… I only shared 2 but… What would be a good thing is a conditional card “if then else”, at the moment we have only the “if then” version !

Can anyone help me understand why my markdown card is making line breaks in places that shouldn’t have a line break?! Below is a screenshot of the card, and for some odd reason it’s putting a break after “frost”, “North”, and “South”?

huh

Yet when I put the same statement in the template editor it outputs fine:
huh2

Below is the code I’m using:

          - type: markdown
            content: |-
              {{ states("sensor.weather_alert_title") }} <br>
              {{ states("sensor.weather_alert_desc") }}
            style: |
                ha-card {
                  box-shadow: none;
                  top: -30px !important;
                  height: 270px !important;
                  width: 393px !important;
                }

Please help!! lol

  1. This is not related to card-mod.
  2. Read about multiline yaml.
    Compare:
    image
1 Like

Maybe check how you’re writing the CSS variable in the templated example? (Missing the 2 hyphens at the start)

--label-badge-background-color

Not sure if this explains the error you’re seeing though.

@reste_narquois Thank you. Good catch. In total, I needed to add those ‘–’ and a ‘-’ to connect the multi-line jinja2 template entries. Lastly, since it requires lovelace_gen, I had to restart HA.

I feel like this is pretty basic, but I’m still a css fledgling and haven’t been able to get it to work…

I’ve got a bunch of children under a hui-conditional-element in a picture-elements card, each formatted ‘hui-state-label-element $ div’ that I’d like to apply the same style to, but everything I’ve tried (various combinations of ., >, #) only applies to the first child . What am I missing?

  hui-conditional-element hui-state-label-element $: | 
     div {
      white-space: normal !important;
      line-height: 100%;
      padding: 5% !important;
      width: 90%;
      text-align: center;
     }

Thank you for any help!

See if it helps:
1st post → link at the bottom → post with links → link for conditional

1 Like

Took me a minute to find it and grock it, but that worked! thanks!

Im trying my best to find some kind of documentation on how to change the background color of the calendar card, and I have tried my best to figure it out myself. I am trying to change the background of the grid itsself, the card I did manage to change. How can I achieve this?

Update: I figured it out, again thanks to the knowledge shared in this forum;

style:
  .: |
    ha-card {
      background-color: rgba(0,0,0,0.1);
      width: 1425px;
      margin:auto;
      position: absolute; 
      left: 0;
      right: 0;
      border: none;
      box-shadow: none;
      border-radius: 20px;
    } 
    ha-full-calendar {
      min-height: 700px !important;
    } 
    div.header {
      padding-top: 0px;
    }
  ha-full-calendar:  (<- this bit)
    $: |
      #calendar {
        background-color: rgba(0,0,0,0.1) !important;
      }