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

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

Ildar_Gabdullin · September 18, 2022, 6:50pm

No, the style is not applied after F5.

Gubtug · September 19, 2022, 1:28am

confirmed. Interestingly, after the circle returns from a reload, I can click another dashboard tab, click back and the css is working again.

Ildar_Gabdullin · September 19, 2022, 2:09am

And this code works (seems to) more stable in case several objects are present:

    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;
          }

Flavien · September 19, 2022, 10:12am

Is there a way to apply the same style to all the cards on the dashboard? Currently I have to repeat the same style on every card, but there has to be a better way?

itsboo · September 19, 2022, 5:42pm

H!! can we change color of background based on image main color?

kazir1 · September 20, 2022, 11:51am

Helo.
I found a frame like this. how can I do it for HA ?

.ramka-4 {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 30px auto;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center; 
    font-size: 24px;
    font-family: 'Roboto', sans-serif;       
}
.ramka-4 span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    z-index: -1;
}
.ramka-4 span:nth-child(1) {
    transform:rotate(0deg);
}
.ramka-4 span:nth-child(2) {
    transform:rotate(90deg);
}
.ramka-4 span:nth-child(3) {
    transform:rotate(180deg);
}
.ramka-4 span:nth-child(4) {
    transform:rotate(270deg);
}
.ramka-4 span:before {
    content: '';
    position: absolute;
    width:100%;
    height: 6px;
    background: #BFE2FF;
    animation: anim-ramka-4 4s linear infinite;
}
@keyframes anim-ramka-4 {
    0% {
        transform:scaleX(0);
        transform-origin: left;
    }
    50% {
        transform:scaleX(1);
        transform-origin: left;
    }
    50.1% {
        transform:scaleX(1);
        transform-origin: right;
    }
    100% {
        transform:scaleX(0);
        transform-origin: right;   
    } 
}

Gubtug · September 21, 2022, 3:31am

Hello modders! I’ve got a map with 5 entities on it that I’d like to reduce in size.

I’m able to navigate down the dom tree to the first and change it with:

    card_mod:
      style:
        ha-map $ ha-entity-marker $: |
          .marker {
            height: 30px !important;
            width: 30px !important:
           }

The others are in branches below that first one.

I tried to play around with multiple instances of div:nth-child(X), but, that approach quickly exceeded my current level of css fluency and didn’t seem like an efficient way to do it.

Any help or pointers would be appreciated!

(is there a best resource or reference that covers the general concepts for dissecting dom tree paths and applying css? There are so many great posts, but they’re a bit specific sometimes and can be time-consuming to comb through for general concepts. I’d love to be able to dig into a definitive reference so I can post questions less )

Ildar_Gabdullin · September 21, 2022, 3:43am

Is that what you need:
– there are 100500 child elements;
– there is a style for the 1st element;
– need to specify the style for all elements;
– and the code must be short.
???

Try this from my example above:

    ha-map $ div#map .leaflet-pane.leaflet-map-pane .leaflet-pane.leaflet-marker-pane:
      .leaflet-marker-icon:
        ha-entity-marker $: |
          .marker {
            ...
          }

Gubtug · September 21, 2022, 4:03am

Thank you as always, Ildar! (I tried adding that code on the ISS map, but it didn’t work the first time I tried. I’m not sure what I missed, but trying it again now it’s working AND it’s working on all the entities on this new map!!! Although, I’m not sure why! does it have to do with div#map?