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

Does anybody know how to change the color of an entity from an entities card based on the value of the entity?

I have like these entities:

- type: entities
        entities:
          - entity: binary_sensor.unraidsrv1_lan
          - entity: binary_sensor.reverseproxysrv1_lan

and i want to color the text or icon based on the states (on, off).
This does not work:

      - type: entities
        entities:
          - entity: binary_sensor.unraidsrv1_lan
            style: >
              :host {

              color: {% if is_state('binary_sensor.unraidsrv1_lan', 'off') %}
              red {% endif %};

              }

Is the “if” statement correct? Is the state correct (the values come from a ping adapter and i want to see if the specific device is up)

What does your template evaluate to in the template section of HA devtools?

2020-12-17 16_12_54-Entwicklerwerkzeuge - Home Assistant

Do you mean this here?

Yes, but the 3rd tab.

What do you need from the template?
I didnt changed it. I think its a default template?

Put the style you’re using in there.

like this?
2020-12-17 16_19_32-Entwicklerwerkzeuge - Home Assistant

Yeah. What does it show on the right side?

:host {
              color: ;
              }

Check your template. It looks like it’s either not working, or binary_sensor.unraidsrv1_lan is off, so it’s not red.

Thank you for the tip! It works now!
Second problem: do you know how to manipulate the result? I want to change the text “Verbunden” to “Online” as example…

2020-12-17 20_44_38-Übersicht - Home Assistant

I don’t think you can change your language per card. You could do some fancy stuff with shadow roots, ::before and visibility to change that.

Hoping for some help on markdown cards! No matter what I change I can’t seem to apply any format changes to the fonts for both of the below markdown cards:

                - type: markdown
                  style: |
                    ha-card {
                      background-color: var(--primary-background-color);
                      box-shadow: none;
                    }
                    ha-markdown:
                      $: |
                        ha-markdown-element:first-of-type h2 {
                            font-size: 50px !important;
                            font-weight: bold;
                            font-family: Helvetica;
                            letter-spacing: '-0.01em';
                          }
                  content: |
                      ## <font color='#1e90ff'><ha-icon icon=mdi:ceiling-light ></ha-icon></font> Lighting
                - type: markdown
                  style: |
                    ha-card {
                      background-color: var(--primary-background-color);
                      box-shadow: none;
                    }
                    ha-markdown:
                      $: |
                        ha-markdown-element:first-of-type h3 {
                          font-size: 50px !important;
                          margin-inline-start: 20px;
                        }
                  content: |
                      ### Lounge Room

This is the result:

image

I am hoping to reduce the padding between the two markdown cards and pad the second one so it aligns with the words in the first markdown. Any help appreciated!

format changes to the fonts

reduce the padding between the two markdown cards and pad the second one so it aligns with the words in the first markdown

Which one do you mean?
This is incorrect:

                  style: |
                    ha-card {
                      background-color: var(--primary-background-color);
                      box-shadow: none;
                    }
                    ha-markdown:
                      $: |
                        ha-markdown-element:first-of-type h3 {
                          font-size: 50px !important;
                          margin-inline-start: 20px;
                        }

This is correct:

                  style:
                    .: |
                      ha-card {
                        background-color: var(--primary-background-color);
                        box-shadow: none;
                      }
                    ha-markdown:
                      $: |
                        ha-markdown-element:first-of-type h3 {
                          font-size: 50px !important;
                          margin-inline-start: 20px;
                        }

Also if that works, see if it also works without first-of-type.

Can’t get this working. I am trying to hide the three dot on the top right corner of the light card inside horizontal-stack. I read the github page that we need mod-card for this case. Below is my code:

type: custom:mod-card
style: |
  ha-card {
    mwc-icon-button {
	    display: none;
		}
  }
card:
	type: horizontal-stack
	show_icon: true
	show_name: true
	show_state: true
	cards:
		- entity: light.xx1
			name: xx1
			type: light
		- entity: light.x2
			name: xx2
			type: light

It is not working. What should be the correct syntax?

I think I had the card-mod installed correctly since below example is working fine:

type: entities
style: |
  ha-card {
    color: red;
  }
entities:
  - light.xx1

You don’t need mod-card for this, you can just apply the style inside of the individual card config.

like below? still not working for me :frowning:

type: horizontal-stack
show_icon: true
show_name: true
show_state: true
cards:
	- entity: light.xx1
		style: |
			ha-card {
				mwc-icon-button {
					display: none;
				}
			}
		name: xx1
		type: light
	- entity: light.x2
		name: xx2
		type: light

Choose one:

  • ha-card {
  • mwc-icon-button {

Do you want to make the mwc-icon-button, or the ha-card invisible?

Thanks a bunch, worked perfectly! Next question :slight_smile:
I can’t seem to get the to match my primary-color variable. It successfully changes the color but to something completely different. Here is the full markdown code:

              style:
                .: |
                  ha-card {
                     background-color: rgba(0,0,0,0) !important;
                     box-shadow: none;
                  }
                ha-markdown:
                  $: |
                    ha-markdown-element:first-of-type h2 {
                      background-color: none;
                    }
              content: |
                  ## <font color='var(--primary-color)'><ha-icon icon=mdi:shield-account ></ha-icon></font> Security and Presence

Any idea what I might be doing wrong? The --primary-color variable in the theme above is the green color yet it is coming out dark blue in my markdown

What if you hardcode the color? Does it work then?