Styling a flex-table-card by using it’s own “css” option & card-mod.
Hello
Can someone please help me to add top/bottom padding to a picture card? Please
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
1st post → link at the bottom
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 %}
}
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:
after:
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!
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?
@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:
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;
}
1 Like
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
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
3 Likes
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!)
I’m happy you noticed it )))
What is a code you use for styling? In my tests that was unstable.
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;
}
2 Likes
Thanks but that did not do it for a custom:slider-entity-row anything else I need to add?
Probably you need to change a code depending on a difference between a conventional slider and your custom one
No, the style is not applied after F5.
confirmed. Interestingly, after the circle returns from a reload, I can click another dashboard tab, click back and the css is working again.
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;
}
1 Like
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?
H!! can we change color of background based on image main color?