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

Unkn0wnUs3r · December 17, 2020, 3:10pm

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)

KTibow · December 17, 2020, 3:11pm

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

Unkn0wnUs3r · December 17, 2020, 3:13pm

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

Do you mean this here?

KTibow · December 17, 2020, 3:14pm

Yes, but the 3rd tab.

Unkn0wnUs3r · December 17, 2020, 3:16pm

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

KTibow · December 17, 2020, 3:16pm

Put the style you’re using in there.

Unkn0wnUs3r · December 17, 2020, 3:20pm

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

KTibow · December 17, 2020, 3:20pm

Yeah. What does it show on the right side?

Unkn0wnUs3r · December 17, 2020, 3:21pm

:host {
              color: ;
              }

KTibow · December 17, 2020, 3:24pm

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

Unkn0wnUs3r · December 17, 2020, 7:45pm

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

KTibow · December 17, 2020, 8:32pm

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.

benm7 · December 18, 2020, 5:23am

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:

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!

KTibow · December 18, 2020, 2:48pm

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.

henry8866 · December 19, 2020, 2:59am

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

KTibow · December 19, 2020, 3:08am

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

henry8866 · December 19, 2020, 3:22am

like below? still not working for me

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

KTibow · December 19, 2020, 3:24am

Choose one:

ha-card {
mwc-icon-button {

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

benm7 · December 20, 2020, 10:56am

Thanks a bunch, worked perfectly! Next question
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

KTibow · December 20, 2020, 3:11pm

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