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

Ildar_Gabdullin · September 14, 2022, 12:00pm

type: entities
entities:
  - type: custom:numberbox-card
    entity: input_number.test_number
    name: Threshold 1
    secondary_info: last-changed
    card_mod:
      style: |
        .grid-content.grid-left .info .secondary ha-relative-time {
          color: transparent;
          line-height: 0px !important;
        }
        .grid-content.grid-left .info .secondary::before {
          color: orange;
          content: "Warning\A";
          line-height: normal;
        }

In your case you tried to add ONE MORE LINE - i.e. to create a multiline string.
See a difference between content: "Warning\A" & content: "Critical\A Line 2".
Then you made a mistake - the “\A” is missing BEFORE the original secondary-info value (which is hidden):

        .grid-content.grid-left .info .secondary::before {
          color: red;
          content: "Critical\A Danger\A";
          line-height: normal;
          white-space: pre-wrap;
        }

Update 15.09.22: disregard all written above, see a corrected info below.

But anyway - there is an old note:

and now you do not need to use this “:before” trick (and elements are better aligned too):

  - type: custom:numberbox-card
    entity: input_number.test_number
    name: Threashold 3
    secondary_info: Critical<br/>Danger
    card_mod:
      style: |
        .grid-content.grid-left .info .secondary {
          color: red;
        }

Vike_Dragon · September 14, 2022, 6:15pm

Hi, Ildar!

Wrong indentation are distorted in the forum post, everything is fine in my configuration. Thanks for the advice on compatibility with Apple devices, but in the presented variants, without displaying the design on another card, this does not work. Maybe there will be other tips on this problem?

Ildar_Gabdullin · September 14, 2022, 6:28pm

Not clear, elaborate. Does my code work?

tamorix · September 15, 2022, 1:53am

In my own configuration I’m using if and else statements to dynamically change the multi-line text of secondary info and not static multi-line strings (see down below in Example 4). I wasn’t sure if/ how you could use an if statement directly with secondary_info so I used the old method of ::before. My bad if it is actually possible to use if statements within secondary_info, because that would be the preferred solution. Could you point me in the right direction if it’s possible to implement an if statement directly into secondary_info?

I’m not sure if I misunderstood your explanation but the given example of content: "Critical\A Danger\A"; only works for me when the white-space: pre-wrap; is added, which wasn’t added in the original example. Adding only \A at the end of the content does not solve this issue (Example 2). Additionally, by adding \A at the end you won’t be able to use ::after properly anymore because the transparant last_changed text is moved over to the next line (Example 3). I’m not sure why someone would want to use ::after, but it’s good to know in case someone wants to use it.

Example 1: Dynamic text
Maybe it’s possible to do something similar directly in secondary_info?

example

.grid-content.grid-left .info .secondary::before {
  content: 
	"Temp: {{ states('sensor.temperature_sensor') | round(1) }}°C \A"
	"Damper: {%- set sensor = 'fan.damper_example_room' %}
	{%- if states(sensor) == 'on' %} {{ state_attr(sensor,'percentage')  }}%
	{%- else %} Off
	{%- endif %}"
  ;
  line-height: normal;
  white-space: pre-wrap;
  }

Example 2: Without pre-wrap but with \A at the end of the line.

.grid-content.grid-left .info .secondary::before {
  content: "Line 1\A Line 2\A";
  line-height: normal;
  }

Example 3: With pre-wrap, with \A, and with a 3rd line using ::after
The transparant last_changed information has moved over to the next line by using \A at the end of Line 2. This causes Line 3 to move over.
Example2

        .grid-content.grid-left .info .secondary::before {
          content: "Line 1\A Line 2\A";
          line-height: normal;
          white-space: pre-wrap;
          }
        .grid-content.grid-left .info .secondary::after{
          content: "\A Line 3";
          line-height: normal;
          white-space: pre-wrap;

        }

Example 4: With pre-wrap, without \A, with a 3rd line using ::after
The ::after content does start with \A to move the text to the next line.

Example3

        .grid-content.grid-left .info .secondary::before {
          content: "Line 1\A Line 2";
          line-height: normal;
          white-space: pre-wrap;
          }
        .grid-content.grid-left .info .secondary::after{
          content: "\A Line 3";
          line-height: normal;
          white-space: pre-wrap;
        }

Ildar_Gabdullin · September 15, 2022, 3:17am

You are right, conditional content in "secondary-info" is possible only by using card-mod & “:before” method.

Now I see the point.
The original example has an error - there is no need to add a new string as a separate line.
The correct code is:

  - type: custom:numberbox-card
    entity: input_number.test_number
    name: Threshold 1
    secondary_info: last-changed
    card_mod:
      style: |
        .grid-content.grid-left .info .secondary ha-relative-time {
          color: transparent;
        }
        .grid-content.grid-left .info .secondary::before {
          color: orange;
          content: "Warning";
        }

And yes, if you need a multiline string - you need to add “\A” (do not add it right before the original “secondary-info”) and “white-space: pre”.

Also, there is no need in “line-height” since we only make the original secondary-info transparent.
The final variant is:

type: entities
entities:
  - type: custom:numberbox-card
    entity: input_number.wait_period_before_alarm_1_xiaomi_roborock_s50_mop_check
    name: Threshold 1
    secondary_info: last-changed
    card_mod:
      style: |
        .grid-content.grid-left .info .secondary ha-relative-time {
          color: transparent;
        }
        .grid-content.grid-left .info .secondary::before {
          color: orange;
          content: "Warning";
        }
  - type: custom:numberbox-card
    entity: input_number.wait_period_before_alarm_2_xiaomi_roborock_s50_mop_check
    name: Threshold 2
    secondary_info: last-changed
    card_mod:
      style: |
        .grid-content.grid-left .info .secondary ha-relative-time {
          color: transparent;
        }
        .grid-content.grid-left .info .secondary::before {
          color: red;
          content: "Critical\A Danger";
          white-space: pre;
        }

Updated the original example.

Ildar_Gabdullin · September 15, 2022, 4:52am

Styling a flex-table-card by using it’s own “css” option & card-mod.

image969 · September 15, 2022, 10:25pm

Hello

Can someone please help me to add top/bottom padding to a picture card? Please

nasgul · September 17, 2022, 8:37am

Hi there, i am rebuilding my dashboard

Q1: Ca I get the entity names colored individually? I got it for the icons but cannot get the names
Q2: can I change the color parameter for entities (all the same in this case) in the card style as opposed to the entity style?.

          - type: horizontal-stack
            cards:
              - type: entities
                title: Blinds & Awnings
                style:
                  .: |
                    .card-content {
                      color: white;
                      font-size: 20px;
                      padding: 0px 30px 0px 20px;
                    }
                    ha-card .name {
                    color: darkgrey;
                    margin-top: -20px;
                    padding: 0px 0px 0px 180px;
                    font-size: 28px;
                    }
                entities:
                  - entity: cover.awning_e
                    icon: mdi:awning-outline
                    name: Awning SE
                    style: |
                      :host {
                        --paper-item-icon-color: yellow;
                        --text-color: green;          
                       }
                  - entity: cover.awning_s
                    name: Awning SW
                    icon: mdi:awning-outline
                  - entity: cover.awning_w

Ildar_Gabdullin · September 17, 2022, 12:46pm

1st post → link at the bottom

happyhammer7 · September 17, 2022, 6:08pm

I am trying to change the icon colour for the media player using the mushroom theme using card mod. I have this working with my lights and plug sockets but cannot get it working with my media players.

The code i have tried is -

- type: custom:mushroom-media-player-card
  entity: media_player.living_room_virgin_tv
  icon_type: default
  icon: mdi:set-top-box
  style: |
    :host {
      --paper-item-icon-color:
      {% if states('media_player.living_room_virgin_tv') == 'off' %}
        white;
      {% else %}
        purple;
      {% endif %}
        }

Gubtug · September 17, 2022, 6:58pm

Hello modders!

I’m trying to hide the b/g circle behind an entity image on a map.

I believe the css properties I want to modify are here in .marker here:

<ha-map>
  #shadow-root (open)
    <div id="map"...
      <div class="leaflet pane leaflet-map-pane"
        <div class="leaflet pane-marker-pane"
          <div class="leaflet-marker-icon...
            <ha-entity-marker entity-id="sensor.iss">
              #shadow-root (open)
                <div class="marker"

Adjusting properties in the chrome devtools gives me the result I’d like…
before:
2022-09-17_14-32
after:
2022-09-17_14-30

I’ve tried adding style to the card itself, and also tried adding it to the entity. Neither has worked. Here’s the script I used to try to add it to the entity.

  - type: map
    entities:
      - entity: sensor.iss
        card_mod:
          style:
            ha-map:
              $:
                ha-entity-marker:
                  $: |
                    .marker {
                      border: 0;
                      background-color: #1c1c1c00;
                      margin-left: -15px;
                      margin-top: 15px;
                    }

is this the right approach? Anything jump out as obviously wrong? Any thoughts would be much appreciated!

Gubtug · September 17, 2022, 7:16pm

update!
I was able to get the css to take by adding it to the card with !important; BUT, it seems to reset whenever location information updates. So, I suspect if this is possible, it would need to be done at the entity level instead of updated on the card?

Ildar_Gabdullin · September 17, 2022, 8:24pm

@Gubtug
Try this:

type: map
entities:
  - sensor.iss
card_mod:
  style:
    ha-map $ ha-entity-marker $: |
      .marker {
        border: none !important;
        background-color: transparent !important;
      }

Tested locally, seems to work…
Check on your side.
Let me know your progress.

Update: no, loosing style after a page refresh… In Editor window - the style works again. Not stable.

Registered an issue:

github.com/thomasloven/lovelace-card-mod

Map card: style is unstable

opened 09:01PM - 17 Sep 22 UTC

ildar170975

My Home Assistant version: 2022.9.4 My lovelace configuration method (GUI or …yaml): storage/yaml What I am doing: Styling a Map card. I assigned a `entity_picture` to some tracker, now I want to remove a white circle around the picture. ([initially it was a task about displaying ISS](https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/3649?u=ildar_gabdullin)). Here is a detailed path to the styled elements: ``` type: map entities: - device_tracker.samsung_p6800_composite - device_tracker.ipad_air_2_composite card_mod: style: ha-map: $: div#map: .leaflet-pane.leaflet-map-pane: .leaflet-pane.leaflet-marker-pane: .leaflet-marker-icon: ha-entity-marker: $: | .marker { border: none !important; background-color: transparent !important; } ``` What I expect to see - the marker is with a transparent background & w/o a border: ![image](https://user-images.githubusercontent.com/71872483/190876287-6e6aa181-fe36-4121-bec5-21b15a8a9acb.png) This works - until I refresh a page; then I see the not styled picture: ![image](https://user-images.githubusercontent.com/71872483/190876252-94931e8a-77bc-4a91-b1dd-92eb3924eee4.png) Seems that elements are updated periodically and loosing their style. Error messages from the browser console: None --- **By putting an X in the boxes ([]) below, I indicate that I:** - [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/). - [x] Have made sure I am using the latest version of the plugin. - [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins. - [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Code for testing (card-mod element is created on every level):

type: map
title: Problem 156
entities:
  - entity: device_tracker.demo_paulus
  - entity: device_tracker.demo_home_boy
  - entity: device_tracker.demo_anne_therese
card_mod:
  style:
    ha-map:
      $:
        div#map:
          .leaflet-pane.leaflet-map-pane:
            .leaflet-pane.leaflet-marker-pane:
              .leaflet-marker-icon:
                ha-entity-marker:
                  $: |
                    .marker {
                      border: none !important;
                      background-color: transparent !important;
                    }

happyhammer7 · September 18, 2022, 9:39am

I have made some progress with this but the icon colour only changes when the media player is on, no colour change is made when its off.

card_mod:
  style: |
    ha-card {
      {% set state=states('media_player.living_room_tv') %}
        --rgb-state-media-player:
        {% if state=='0' %}
          var(--rgb-green)
        {% elif state!='0' %}
          var(--rgb-yellow)
        {% endif %};
    }

The icon changes to yellow when its powered on so I am halfway there. Can anyone help with this please? Spent ages looking online to try and find a solution but i am quite new to this and a little lost. Thanks

Ildar_Gabdullin · September 18, 2022, 5:26pm

Picture-elements - styling a “selection area”

Note: the main idea of styling was found in the post of @gabrielmiranda.

Note: this works in Chrome+Win; in iOS Companion App the behaviour is different.

For some elements it is possible to specify “tap_action”.
If it is not specified - a default action like “more-info” may be executed (if “entity_id” is defined for this element).
Assume that default action is “more-info” (which is true, but may be is not in some cases, I do not know). Then on tapping a “more-info” popup is displayed. But in case of a “long tap” and then releasing a mouse button (so called “hold_action”) first a “selection area” (circular or oval shape) appears (sometimes it is called a “ripple”) and then disappears when the “more-info” popup comes:

Code

type: picture-elements
title: Default behaviour (tap_action)
elements:
  - type: icon
    icon: mdi:car
    style:
      top: 10%
      left: 10%
  - type: state-icon
    entity: zone.home
    style:
      top: 10%
      left: 25%
  - type: state-label
    entity: sun.sun
    style:
      top: 10%
      left: 70%
  - type: image
    image: /local/images/test/Stan_small.png
    style:
      top: 22%
      left: 10%
    entity: sun.sun
  - type: image
    image: /local/images/test/car.png
    style:
      top: 23%
      left: 65%
    entity: sun.sun
image: /local/images/test/white.jpg

But what if “tap_action: none” or “action: call-service”?
Then we see a not disappearing “selection area”; it only disappears when another element is tapped:

Code

type: picture-elements
title: Default behaviour
elements:
  - type: icon
    icon: mdi:car
    tap_action: none
    style:
      top: 10%
      left: 10%
  - type: state-icon
    entity: zone.home
    tap_action: none
    style:
      top: 10%
      left: 25%
  - type: state-label
    entity: sun.sun
    tap_action: none
    style:
      top: 10%
      left: 70%
  - type: image
    image: /local/images/test/Stan_small.png
    style:
      top: 22%
      left: 10%
    tap_action: none
  - type: image
    image: /local/images/test/car.png
    style:
      top: 23%
      left: 65%
    tap_action: none
image: /local/images/test/white.jpg

It is possible to make this “selection area” transparent:

Code

type: picture-elements
title: transparent
card_mod:
  style: |
    div#root {
      --divider-color: rgba(0,0,0,0);
    }
elements:
  - type: state-icon
    entity: zone.home
    tap_action: none
    style:
      top: 6%
      left: 10%
  - type: state-icon
    entity: zone.home
    tap_action: none
    style:
      top: 6%
      left: 30%
image: /local/images/test/white.jpg

Also you may specify a color for this “selection area” - see below:

Colored area, common style:

Code

type: picture-elements
title: Common style
card_mod:
  style: |
    div#root {
      --divider-color: rgba(255,0,0,1);
    }
elements:
  - type: state-icon
    entity: zone.home
    tap_action: none
    style:
      top: 6%
      left: 10%
  - type: state-icon
    entity: zone.home
    tap_action: none
    style:
      top: 6%
      left: 30%
image: /local/images/test/white.jpg

Colored area, individual styles:

Code

type: picture-elements
title: Individual style
elements:
  - type: state-icon
    entity: zone.home
    tap_action: none
    style:
      top: 6%
      left: 10%
    card_mod:
      style: |
        :host {
          --divider-color: rgba(255,0,0,1);
        }
  - type: state-icon
    entity: zone.home
    tap_action: none
    style:
      top: 6%
      left: 30%
    card_mod:
      style: |
        :host {
          --divider-color: rgba(0,255,0,1);
        }
image: /local/images/test/white.jpg

How different elements are affected:

What we can see here:
– icon & state-label have an oval area;
– “png” image have a circular or oval area (depends on the image’s aspect ratio);
– “jpg” image is not affected (???);
– service-button & state-badge are not affected.

Code

type: picture-elements
title: Different elements
card_mod:
  style: |
    ha-card {
      --divider-color: rgba(255,0,0,1);
    }
elements:
  - type: icon
    icon: mdi:car
    tap_action: none
    style:
      top: 10%
      left: 10%
  - type: state-icon
    entity: zone.home
    tap_action: none
    style:
      top: 10%
      left: 25%
  - type: state-badge
    entity: zone.home
    tap_action: none
    style:
      top: 10%
      left: 45%
  - type: state-label
    entity: sun.sun
    tap_action: none
    style:
      top: 10%
      left: 70%
  - type: service-button
    title: xxxx
    service: input_boolean.toggle
    service_data:
      entity_id: input_boolean.test_boolean
    style:
      top: 10%
      left: 90%
  - type: image
    image: /local/images/test/Stan_small.png
    style:
      top: 22%
      left: 10%
    tap_action: none
  - type: image
    image: /local/images/test/car.png
    style:
      top: 23%
      left: 65%
    tap_action: none
  - type: image
    image: /local/images/test/orange.jpg
    style:
      top: 22%
      left: 86%
    tap_action: none
image: /local/images/test/white.jpg

More examples.

Gubtug · September 18, 2022, 6:02pm

Thanks again for the help @Ildar_Gabdullin . Seems to be working pretty solidly.

,

Very happy with this piece of the dashboard.

(Those deathstar and USG Ihimura tracker integrations are so cool!)

Ildar_Gabdullin · September 18, 2022, 6:05pm

I’m happy you noticed it )))

What is a code you use for styling? In my tests that was unstable.

Gubtug · September 18, 2022, 6:10pm

I used what you recommended and am using Chrome on a PC. ((I know the two style entries could be integrated, but it worked like this, so I left it… )

type: vertical-stack
cards:
  - type: iframe
    url: https://www.youtube.com/embed/86YLFOog4GM?autoplay=1&mute=1&controls=0
    aspect_ratio: 56%
  - type: map
    entities:
      - sensor.iss
    dark_mode: true
    hours_to_show: 1
    aspect_ratio: 35%
    default_zoom: 1
    card_mod:
      style:
        ha-map $ ha-entity-marker $: |
          .marker {
            border: none !important;
            background-color: transparent !important;
            height: 50px !important;
            width: 50px !important:
           }
        ha-map$: |
          .leaflet-control-attribution {
            visibility: hidden;
           }
          .leaflet-control-zoom {
            visibility: hidden;
           }

filikun · September 18, 2022, 6:25pm

Thanks but that did not do it for a custom:slider-entity-row anything else I need to add?

Ildar_Gabdullin · September 18, 2022, 6:39pm

Probably you need to change a code depending on a difference between a conventional slider and your custom one