youāre in edit mode 
Do you see the injected styles in the HTML at the correct level when you inspect it?
You havenāt said which media player card that is.
1 Like
please help me out with this probably simplest thing: how to change the badge color (using a templated color, not the theme variables) on a core type: tile card. These 2 mods work fine, but are not yet what I am looking for
card_mod:
style: |
ha-card {
background-color: {{states('sensor.xxx_background_color')}};
}
.badge {
--tile-badge-icon-color: {{states('sensor.xxx_icon_color')}};
}
using inspector I found the obvious --tile-badge-background-color on ha-tile-badge but I cant make that happen if I add it to
ha-tile-badge {
--tile-badge-background-color: {{states('sensor.xxx_background_color')}};
}
or even the .badge
.badge {
--tile-badge-icon-color: black;
--tile-badge-background-color: green;
/*background-color: black*/
}
using background-color in .badge has an effect, but the wrong effect. as it does color the complete background of the badge, and not the badge itselfā¦
I did manage to set the border of the image and filter it based on state:
.icon-container {
border: solid {{states('sensor.xxx_background_color')}} 4px;
border-radius: 50px;
}
ha-tile-image {
filter: {{'grayscale(1)' if not is_state(config.entity,'home') else 'none'}};
}
But, the color of the badge background remains to be foundā¦
please have a look?
update
heck, I keep forgetting !importantā¦
.badge {
--tile-badge-icon-color: black;
--tile-badge-background-color: green !important;
/*background-color: black*/
}
makes it work, and overrides the theme colors.
one challenge left, why the filter is applied in Chrome, but not in Safariā¦
Sorry, my bad.
The main card is mushroom.
type: custom:mushroom-media-player-card
entity: media_player.pyrite
icon: mdi:music
use_media_info: true
show_volume_level: true
primary_info: name
tap_action:
action: navigate
navigation_path: /tablet-dash/media
fill_container: true
layout: horizontal
volume_controls: []
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'off') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),0.5);
{% endif %};
height: 85px!important;
}
:host {
background-color: red;
}
mushroom-shape-icon {
--card-mod-icon:
mdi:music
}
Thanks for the help !
How would I go abouts adding a secondary title using area or picture-glance card? thanks
found the inspiration for the solution in the Mushroom topic, targeting the element in the Shadow directly:
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
filter: grayscale(1);
}
translating to Tile card:
- type: tile
entity: person.me
show_entity_picture: true
card_mod:
style:
ha-tile-image$: |
.image {
filter: grayscale(1);
}
and in the full decluttering with additional background image (for Zone) and some special css mods for its position:
card:
type: tile
show_entity_picture: true
state_content:
- state
- last-changed
entity: person.[[id]]
card_mod:
style:
# Make this filter work in Safari too ;-)
ha-tile-image$: |
.image {
{% set zones = states.zone|map(attribute='name')|list %}
filter: {{'grayscale(100%)' if not is_state(config.entity,'home') and
states(config.entity) not in zones else 'none'}};
}
.: |
{% set id = '[[id]]' %}
{% set zones = states.zone|map(attribute='name')|list %}
ha-card {
border: solid {{states('sensor.'~id~'_background_color')}} 2px;
background-color: var(--background-color);
background-image: url("{{states('sensor.'~id~'_overlay_image')}}");
background-size: 30px;
background-position: 95% 50%;
background-repeat: no-repeat;
/*filter: {{'grayscale(100%)' if not is_state(config.entity,'home') and
states(config.entity) not in zones else 'none'}};*/
}
.badge {
/*--tile-badge-icon-color: {{states('sensor.'~id~'_background_color')}};*/
/*--tile-badge-background-color:
{{states('sensor.'~id~'_background_color')}} !important;*/
/*background-color: black*/
}
.icon-container {
border-radius: 24px;
/*filter: {{'grayscale(1)' if not is_state(config.entity,'home') and
states(config.entity) not in zones else 'none'}};*/
border: solid {{states('sensor.'~id~'_background_color')}} 3px;
}
# This filter does NOT work in Safari
# ha-tile-image {
# {{'filter: grayscale(100%)' if not is_state(config.entity,'home') and
# states(config.entity) not in zones}};
# }
id~background-color shows
green: home (no overlay image)
orange: in activity
purple: in Zone (remnant from my life360 daysā¦)
white: abroad
grey: otherwise
4 Likes
I am trying to change a picture card to shrink and center an image to a specific size. The original pic is 2164x2164 px and I want the picture card to adjust the image to 200x200 px and center it. Everything I have tried just cuts the image, but changes the height and/or width of the card.
- type: picture
image: /local/img/hass_os1.png
title: 'Home Assistant'
style: |
ha-card {
height: 200px !important;
}
How to remove that line above a header?
- type: custom:fold-entity-row
head:
type: section
label: š Historie
padding: 0
open: true
group_config:
state_color: true
entities:
...
Edit: solved with
- type: custom:fold-entity-row
head:
type: section
label: ABC
style: |
.divider {
background-color: transparent !important;
}
Thanks, got it:
card_mod:
style: |
mwc-list-item {
line-height: 3rem;
}
1 Like
first of all, you should use the
card_mod:
key before that. Aware this might still work, but it is legacy format, so adjust and be safe.
also, your mod doesnāt not āremoveā it, is merely doesnt colorize it.
taking it out is done with:
.divider {
display: none;
}
and then you should see the folds move up just a bit.
Hey @Ildar_Gabdullin , Iāve been using a lot of your tricks - this is a true wealth of information and I keep coming back to this one! Iām a bit stuck with styling a mushroom card, however and cannot find a solution.
I have a regular mushroom template card. I want to use a CSS ātranslateā command to move the main icon lower (because I have a bunch of other modifications that make it necessary to look good).
The issue Iām facing is that on my phone, to make it look good I need to translate in the Y axis by 20px but on a larger tablet, it needs to be more like 40px.
I know the āpxā units is meant already to adjust for screen size but apparently not enough.
Do you know if itās possible to detect the height of a mushroom card in px and based on that I can make the correct translation calculation. (I know card_mod supports templating)?
Thank you!
Hey guys, iāve successfully used card_mod multiple times before. But now i can not get it to work for a template-entity-row within a decluttering-card.
From what i have read here, this is how it is supposed to work:
decluttering_templates:
window_list:
card:
type: custom:template-entity-row
entity: '[[entity_id]]'
card_mod:
style:
div#wrapper:
state-badge $: |
ha-state-icon {
color: red !important;
}
.: |
.info {
color: cyan;
}
But it doesnāt. The card-mod-tag gets not injected to the DOM.
As i found out, it works if i nest the entity-row in a mod-card. But a ha-card element at a place where an entity row was supposed doesnāt feel ārightā:
decluttering_templates:
window_list:
card:
type: custom:mod-card
card_mod:
style:
template-entity-row $: |
div#wrapper .info {
color: cyan;
}
card:
type: custom:template-entity-row
entity: '[[entity_id]]'
So my questions are: what am i doing wrong that the first option does not work? And is the second option a real alternative - or is this not advisable? I ever tried not to use the mod-card because of the warnings of the author himself.
Not to interject, but are you using position: and/or float: ? It may help assist with your issue.
Good to know, thx.
ā¦and exactly thatās a side effect which is pretty ugly as the header text and the icon on the right are now not horizontally aligned anymore. Adding a margin-bottom: XXpx; to the .divider makes no difference. So instead of fixing a thing introduced by fixing a thing, I tend to continue using the āmake it invisibleā approach. ā¦unless you know a smart approach. Likely I now need to add a margin-top to the header elementā¦ only getting more complex this way, right?
.divider {
background-color: transparent !important;
#margin-top: -15px !important;
}
.divider {
display: none;
margin-bottom: 15px;
}
Sure, many options available ā¦ as long as you get what want.cheers!
trying to set a filter on a map with auto-entities person sā¦
type: custom:auto-entities
show_empty: false
filter:
include:
- domain: person
state: home
options:
card_mod:
style:
ha-map$:
ha-entity-marker$: |
div#entity_picture {
filter: grayscale(1);
}
if I can get the do path right, I will adjust the template for the filter to only grayscale on not āhomeā,
filter: {{'grayscale(100%)' if is_state(config.entity,'home')
else 'none'}};
but for now need to first get this right.
can anybody help me out here? I did check the first post on Map, but that is not helping me right now, as far as I can see itā¦
customElements.whenDefined('ha-entity-marker').then(() => {
const EntityMarker = customElements.get('ha-entity-marker');
const { html, css } = EntityMarker.prototype;
// defined added style
const newStyle = css`
.marker:has(.entity-picture) {
border: none !important;
border-radius: 10%;
background-color: transparent !important;
filter: grayscale(1) !important;}`;
const newStyles = [].concat(EntityMarker.styles, newStyle);
// The LitElement class has already been finalized, but hopefully not yet instantiated
// guess I'll just do it the hard way
Object.defineProperty(EntityMarker, 'styles', {value: newStyles, configurable: true, enumerable: false});
Object.defineProperty(EntityMarker, 'elementStyles', {value: newStyles, configurable: true, enumerable: false});
});
is loaded without errors, and the border-radius is applied, so I can see that is functional. NO filter thoughā¦
fwiw, on an entities card this always works solidly:
options:
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
filter: {{'grayscale(100%)' if not is_state(config.entity,'home')
else 'none'}};
}
but that obviously is of no help in a Map, other than the filter template being correct.
Is there way to change the name in a glance card with card_mod? I know itās possible to use name: (without card_mod), but I need to do it within card_mod (conditions) and name: test does not work. I can change the icon, its colorā¦ How do I change the name here?
card_mod:
style: |
:host {
--paper-item-icon-color: salmon;
--card-mod-icon: mdi:check-circle-outline;
name: test;
}
so we can set:
card_mod:
style:
ha-map $ ha-entity-marker $: |
.marker {
filter: grayscale();
}
on the Map card itself, but then we can not use the state of the individual config.entity?
translating that same path to the options: under the filter of auto-entities is beyond me for now.
