As i said, you have not made any reference to a card under āoptionsā , so your ālightā will end up as entities in your glance-card , so itās up to you, so whatever you try to change, the same rules for entities-card should be valid ā¦ therefor i suggest you choose another, i.e template-entity.card or similar, which you have multiple ācustomizationā choices in both the card, as-well as card-mod ā¦ Now you only have " an entity in entities card( EDIT an entity in entities-card- in glance-card, populated by ā¦ " ā¦ i choosed mushroom-entity-card for the icon and card choices, and easy | style options
I canāt seem to do the same sort of thing rendering on a Windows (Edge) browser and on the Android app. What Iām trying to do is override the width limit entirely. (I want the map to cover the width of the window.)
Hereās what Iāve tried:
# Map
- title: Map
path: map
icon: 'mdi:map-marker'
badges: []
cards:
- type: map
card_mod:
style: |
@supports not (-webkit-touch-callout: none) {
@media (max-width: 100%)
}
entities:
- entity: person.russell_smith
- entity: person.janette
- entity: person.katie
hours_to_show: 0
title: Where is everybody?
dark_mode: true
auto_fit: true
And hereās a look at the relevant Element Styles:
(Youāll notice in the screen shot that Iāve un-checked the max-width item. This works, but I canāt figure out how to do that with card_mod.)
You can maximise the Mushroom Card Slider like this:
type: custom:mushroom-light-card
entity: light.office_light
name: Office
show_brightness_control: true
layout: horizontal
card_mod:
style: |
mushroom-state-item {
max-width: fit-content;
}
1 Like
This code seems incomplete - compare it to that post about conditional styling.
Can anybody give me a hint to how I can make the state-icon animated (flahing) and colored at the same time ?
I think I have figured out the color of the icon as it seems to work like intended.
But I cannot guess how to animate the iconā¦
Here is my code:
- type: state-icon
icon: mdi:radiator
entity: sensor.kontor_temperature
card_mod:
style: |
:host {
{% if state_attr('climate.kontor','current_temperature')
>= state_attr('climate.kontor','temperature') %}
var(--paper-item-icon-color)
{% else %}
--paper-item-icon-color: red;
{% endif %}
}
@keyframes fade {
0%{ opacity: 0; }
49%{ opacity: 50; }
60%{ opacity: 100; }
99%{ opacity: 0; }
100%{ opacity: 0; }
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
card_mod:
style:
ha-dialog$: |
div.mdc-dialog__scrim {
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
background-color: rgba(0,0,0,0.1) !important;
}
title: Radiator
content:
type: thermostat
entity: climate.kontor
timeout: 15000
style:
left: 54%
top: 94%
background-color: rgb(255,255,255)
border-radius: 50%
I have added the css animation part like:
animation: fade 2s linear infinite;
But without any effect.
Also, I do not want to have the background to animate with the icon. This needs to be static. 
Iām trying to do a similar thing, but am using a rotating icon - I can get it to change if itās in an independent card, using something similar to this: but doesnāt work when combined.
color:
{% set mode = states('climate.air_conditioner_home')
%} {% if mode == 'off' %} grey {% elif mode == 'cool' %} lightblue {% elif mode ==
'auto' %} green {% elif mode == 'heat' %} red
{% else %} grey {% endif %};
my whole piece of code in glance card looks like this:
- entity: switch.ac_zone
icon: mdi:fan
tap_action:
action: toggle
card_mod:
style: |
state-badge {
{% if is_state('switch.ac_zone', 'on') %}
animation: rotation 1.5s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
color: {% set mode = states('climate.air_conditioner_home') %} {% if mode == 'off' %} grey {% elif mode == 'cool' %} lightblue {% elif mode == 'auto' %} green {% elif mode == 'heat' %} red {% else %} grey {% endif %}; }
}
Iām looking at a different state to the switched zone, because I canāt control heat or cool based on zone, itās across the entire AC system, and it allows me to used repeatable code
Iām sure Iām missing something really obvious, butā¦
Can someone help me with this? What Iām wanting to do is to have a pop-up show the custom:time-picker-card and I want to make the text bigger for my small phone (bedside dashboard).
I have a custom theme running for the dashboard, but Iām getting all confused between card-mod-card and card-mod-more-info not to mention card-mod-more-info-yaml. Any changes I make in one of those work when I have the popup displayed in the edit screen of my dashboard, but totally ignored when the popup actually shows.
So I read up some more and switched to using the fire-dom-event, but I canāt for the life of me figure out how to get the entities to obey the CSS.
- type: custom:mushroom-entity-card
entity: input_datetime.alarm_time
name: Alarm time
icon: mdi:home-clock
secondary_info: none
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
browser_id: THIS
content:
type: custom:time-picker-card
entity: input_datetime.alarm_time
hour_mode: 24
hide:
name: true
card_mod:
style: |
.time-input
{ font-size: 2em !important; }
Is it something to do with the shadow-root DOM object?
Any help is greatly appreciated.
Yes. Thatās essentially the problem. Iām not familiar enough with how cards are styled to know whatās missing, which is why I included the Element styles to see if someone could enlighten me.
Iāve tried a bunch of variations on code Iāve seen in this thread and it doesnāt affect the #column division thatās limiting the width.
Also, Iām having difficulty locating the precise āpost on conditional stylingā that youāre referring to. Can you link to it please? Thanks.
I meant a post you answered to (describing ādevice-dependentā conditions).
The post mentioned above contains examples with ācolorā.
I suggest you to achieve your goal in two steps:
- Define which styles you need to set. Test with these styles without using ādevice-dependentā conditions.
- Wrap your styles into ādevice-dependentā conditions.
I made a device tracker that get gps locations from visitors on my website.
Iām mapping these in a map in home assistant, and trying to get the circle smaller
my current map card:
type: map
name: web
entities:
- entity: device_tracker.test_web
dark_mode: true
default_zoom: 2
hours_to_show: 24
card_mod:
style:
ha-map$:
.leaflet-overlay-pane: |
path {
fill: rgb(222, 22, 58);
fill-opacity: 1.0;
stroke: rgb(0, 0, 8);
stroke-opacity: 0.1;
}
.leaflet-marker-icon: |
marker {
width: 28px;
height: 48px;
}
not very familiar with css, but I found another post here to change the path lines color but struggeling with this black circle that overlays the current gps positionā¦trying to make it smaller.
I can edit the circle size with āInspectā and directly set smaller size, but cant figure out the proper
code for card mod.
If anyone could give me some clues with this, would be awesome
1 Like
Figured something outā¦
type: map
name: web
entities:
- entity: device_tracker.test_web
dark_mode: true
default_zoom: 2
hours_to_show: 24
card_mod:
style:
ha-map$:
.leaflet-pane: |
path {
fill: rgb(222, 22, 58);
fill-opacity: 1.0;
stroke: none;
stroke-opacity: 0.1;
}
.leaflet-overlay-pane: |
path {
fill: rgb(222, 22, 58);
fill-opacity: 1.0;
stroke: rgb(0, 0, 8);
stroke-opacity: 0.1;
}
ha-entity-marker$: |
div.marker {
display: flex;
width: 48px;
height: 48px;
font-size: 16px;
border-radius: 50%;
border: 5px solid red;
color: white;
background-color: red;
opacity: 0.2;
}
But it seems the marker gets restored back to orginal everytime the gps position are changed,
and change to another lovelace view and back to map the styling are in effect again.
1 Like
Go to 1st post ā link at the bottom ā styles for Map
There is a similar issue, there is a solution for it.
1 Like
Hi Everyone!
Iām trying to make my presence sensor card highlight in red whenever motion was detected.
I tried using card-mod styles and read endless topics but the most I got was changing the background color when on (code is below).
the specification should be:
when off: Normal
when on: card + icon background turn red (can be different types of red) and all text including the icon changes to white.
Iām using a minimalist UI generic card for the sensor (do mind changing it if you have a better solution)
Many thanks in advance!
type: 'custom:button-card'
template: card_generic
entity: binary_sensor.study_ps
card_mod:
style: |
ha-card {
background-color: {{ '#FFAAAA' if is_state('binary_sensor.study_ps', 'on') }};
}
For this, you donāt need card_mod to reach your targets. Use the stylings from custom:button-card. I would suggest to use a thread related to this card for help.
1 Like
since apparently we have no other way to show a button entity with a direct option to execute (not even the button card executes the button directly without further config) I tried to mimic the tile card like this:
- type: entities
# card_mod:
# style: |
# ha-card {
# padding: 0px;
# }
entities:
- entity: button.screen_keuken_my_position
card_mod:
style:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
font-weight: bold;
}
which comes close:
but as you can see the height of the entities card is too high, compared to the surrounding the cards.
I tried many options, but cant find a way to decrease the height. Tried setting negative padding to the card, or even to the entity, but nothing changes.
Can we not do that? please have a look?
I did rather have a chip, but even then we need a lot of config mentioning the entity twice, and still need some extra card_mod to get rid of a paddingā¦
so for now resort to this entity card, but need it to be less tall
update
nvm, found it:
- type: entities
card_mod:
style: |
.card-content {
padding: 12px 16px;
}
entities:
- entity: button.screen_keuken_my_position
card_mod:
style:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
font-weight: bold;
}
now only to find the option to show state (last-triggered) as secondary infoā¦ (and maybe position the card content a bit betterā¦grr, why dont these cards simply behave correctly in the frontend)
making that left/right padding 10 seems to help:
though the icon still looks lopsided.
Iāve been porting my āhard-codedā card_mod css to a theme by making use mostly of classes. But Iāve got a few questions:
- Iāve also seen other techniques of targeting specific domains etc, instead of classes, any place with some examples of that together with themes?
- How do you target :host with a class?
- How do you target shadowroot stuff with a class?
For example, how would I ātranslateā this:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-orange)) {{ ((states(config.entity) | as_datetime | as_local - now()).days + 1) * (100 / 3) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
mushroom-badge-icon {
top: 30px;
}
I currently got the non-shadowroot part targeting the āreminderā class, but not getting the first part working selectively:
card-mod-card-yaml: |
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-orange)) {{ ((states(config.entity) | as_datetime | as_local - now()).days + 1) * (100 / 3) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
mushroom-badge-icon.reminder{
top: 30px;
}
Hi,
it is possible to make the secondary text of a mushroom card as a scrolling text (marquee)?
I have this for the DWD weather warning and very often the text is to long so I want to have a scrolling text:
Here is the code:
- type: custom:mushroom-template-card
fill_container: true
entity: sensor.dwd_wetterwarnung_current_warning_level
layout: horizontal
primary: DWD Wetterwarnung
tap_action:
action: more-info
secondary: >-
{% if
is_state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)
%}
Keine
{% elif
(state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count')
| int) > 0 %}
{{- state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_1_description') -}}
{% else %}
Unbekannt
{% endif %}
icon: >-
{% if
is_state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)
%}
mdi:check-circle
{% elif
(state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count')
| int) > 0 %}
mdi:alert-outline
{% else %}
mdi:circle-outline
{% endif %}
icon_color: >-
{% if
is_state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count',0)
%}
green
{% elif
(state_attr('sensor.dwd_wetterwarnung_current_warning_level','warning_count')
| int) > 0 %}
red
{% else %}
grey
{% endif %}
Thanks.
1 Like
sorry for taking me a year to reply hereā¦ itās just that Ive only recently found a new reason to use the swipe cardā¦
only trying to color the button colors, whihc according to inspector are
using the swiper-theme-color (note Iāve set them to white here) so I tried
- type: custom:swipe-card
<<: &swipe
card_mod:
style: |
:host {
--swiper-theme-color: #fafafa;
}
but that wont do anything.
Also tried what you did above, and that does not change the color either.
lastly, I tested the
swiper-theme-color: red
in my themes, to have the swiper card inherit that, but even that does not do anything.
What am I missing here?
please have a look? thx!
small crosspost, since its very relevant to card-mod:
when using either bullets or progress bar on pagination, the theme color swiper-pagination-color is applied. However, when using fraction , to show 1/3 , that same theme colors is not applied, and we have to go into inspector to reveal we need to set
card_mod:
style: |
:host {
color: red;
}
but it does not kick inā¦
could anyone using swiper card please test this?
(for more details please check the post in swiper thread, dont want to post too much duplicate text)
though since this is mod-card material. and a bug:
- type: custom:mod-card
card_mod:
style:
swipe-card:
$: |
/* colors the whole fraction element: '1/3' */
/*.swiper-pagination-fraction {
color: white;
}*/
/* colors the '1' in: '1/3' */
.swiper-pagination-current {
color: var(--swiper-navigation-color);
}
/* colors the '3' in: '1/3' */
.swiper-pagination-total {
color: gold;
}
.: |
ha-card {
font-weight: bold;
font-size: 20px;
color: white; */sets the full line, or only the '/', when the other elements are colored individually
}
card:
type: custom:swipe-card
works all stylings just fine. A big Caveat warning: it loses several cards inside the Swiperā¦
even when only using:
- type: custom:mod-card
card:
type: custom:swipe-card
Hi - is card-mod able to achieve the follwoing?
Iād like to change the text in my mushroom climate cards for āHeat/Coolā, āFan Onlyā and āOffā.
Mushroom doesnāt provide this functionality, can I use templates somehow with card-mod to edit how they are shown?
1 Like
