Try this (not tested):
card_mod:
style:
scheduler-entity-row:
$:
ha-switch:
$: |
...
I’d like to override the fold-entity-row fold icon, which works with the following code, but only until the button is clicked. It reverts to the expected icon again on refresh.
type: custom:fold-entity-row
card_mod:
style:
ha-icon:
.: |
ha-icon {
--card-mod-icon: mdi:plus-circle-outline;
}
head:
entity: cover.blinds
card_mod:
style:
hui-generic-entity-row$: |
state-badge {
display: none
}
div {
font-size: 1.5em;
font-weight: bold;
padding-left: 0px;
float: left;
}
entities:
- entity: cover.north_blind
name: North Blind
- entity: cover.south_blind
name: South Blind
Any ideas? I’ve seen a few instances of the --card-mod-icon being described as working partially, so I wonder if this is one of those instances, but it could easily be something I’m missing. Even with the amazing examples in this thread it’s still slow going with my weak CSS skills.
Wonder if anyone can help with modifying a picture-glance card. I want to remove the gray overlay that comes down halfway across our faces, or just make it smaller so it only covers the bottom thrid of the image.
The following code bit is for the first image.
type: grid
cards:
- type: picture-glance
image: /local/myImage.png
entity: person.me
show_state: true
state_filter:
home: brightness(110%) saturate(1.2)
not_home: brightness(110%) saturate(0)
School: brightness(110%) saturate(0)
Work: brightness(110%) saturate(0)
entities:
- entity: sensor.my_phone_battery_level
icon: none
- entity: person.me
icon: none
- type: picture-glance
...
...
Thanks in advance
This should work:
type: grid
cards:
- type: picture-glance
style: |
ha-card .box {
background-color: rgba(0,0,0,0);
}
image: /local/myImage.png
entity: person.me
show_state: true
state_filter:
home: brightness(110%) saturate(1.2)
not_home: brightness(110%) saturate(0)
School: brightness(110%) saturate(0)
Work: brightness(110%) saturate(0)
entities:
- entity: sensor.my_phone_battery_level
icon: none
- entity: person.me
icon: none
- type: picture-glance
...
...
if you want that in your full config, why not simply hack the resource:
icon=${this.open?"mdi:chevron-up":"mdi:chevron-down"}
seems easy enough to edit…
- type: custom:config-template-card
entities:
- input_select.theme
variables:
dark-mode: states['input_select.theme'].state.includes(['ight','Dark','Matrix'])
card:
type: custom:auto-entities
show_empty: false
filter:
include:
- domain: person
not:
state: home
card:
type: map
hours_to_show: 48
dark_mode: '${dark-mode}'
card_mod:
style: |
ha-card {
box-shadow: none;
}
but I get an error about an unexpected ‘-’…
do you see the obvious issue?
edit
nvm, that was because the variable has a -. changing made the error disappear. However, the mode isnt set correctly, so I guess the template isnt correct. also because
states['input_select.theme'].state.includes('Dark')
does work!
Ill move this to a topic regarding the config-template-card.
Thanks Idar, that worked great. I also managed to mod a header part of the card. The icons in the card I’m having troubles with, but I’m gonna try more. I’m beginning to understand the structure more with your examples and the explanation of shadowroot on the docs 
1 Like
@olympia, if you are still interested in transparent background for numberbox-card, check the updated post.
You’re really helpful @Ildar_Gabdullin!
I removed my post, because I figured it out in the meantime and thought you didn’t look at it yet.
However, you generated a really helpful addition to your post! Thank you for this!
In my case, I also had to add
box-shadow: none;
as well to the entities card, because I had it within a custom:button-card and the shadow was visible even without having the background.
Many thanks again for looking into this!
Hi guys, I have a badge-card, is it possible to change the color of the badge? If it’s possible…
sensor.alarm_last_motion
- type: custom:badge-card
badges:
- entity: sensor.paradox_battery_voltage
name: Batteria
- entity: sensor.paradox_panel_voltage
name: Alimentazione
- entity: sensor.run_status
name: Centrale
Thanks
1st post → link at the bottom → consolidated post → styles for badges
Great thanks!
So first of all, thanks! Owing to a lack of necessity, and an assumption it’d be completely over my head, I haven’t really explored editing Lovelace resources like this. However, I found this bit of code in the js and it does look very straightforward.
Unfortunately though, making the change across the whole config isn’t ideal. I’d prefer the chevron icon in most instances since it’s quite minimal, but I want to use fold-entity-row in conjunction with mini media player, and MMP also uses the chevron icon for the source select menu. Having both is a little confusing, so I wanted to use mdi:minus/plus-circle-outline for MMPs (and also for select fold rows that are bigger/more important).
I believe any changes I make to the resource also won’t survive an update via HACS, right?
1 Like
wouldn’t know about the HACS specifics sorry.
And the MMP indeed looks nice!
Guess you’re right not wanting to mod the resource, and try to card-mod the icon. Sometimes its indeed not very obvious why things happen or not. In that case you could raise an issue in the Repo for the card, Thomas wrote both card-mod and fold-entity-row, so thats handy 
or try and ask him in #frontend Discord channel, he’s mostly there.
Can anyone suggest what would be the issue with the icon rotation in the picture-elements component below? This used to work fine, and at some point it stopped. I’ve spent the last hour looking through this thread, and only one other person had something they confirmed worked, but it does not work for me.
cards:
- type: picture-elements
image: /local/floorplan.jpg
style: |
ha-card {
--cover_master_bedroom_color: {% if is_state('input_select.cover_master_bedroom','Closed') %} 4d4d4d {% else %} gold {% endif %};
--cover_living_room_color: {% if is_state('input_select.cover_living_room','Closed') %} 4d4d4d {% else %} gold {% endif %};
--cover_bedroom_3_color: {% if is_state('input_select.cover_bedroom_3','Closed') %} #4d4d4d {% else %} gold {% endif %};
--cover_study_color: {% if is_state('input_select.cover_study','Closed') %} 4d4d4d {% else %} gold {% endif %};
}
elements:
....
....
- type: state-icon
tap_action:
action: more-info
entity: fan.bedroom_3_fan
style:
top: 15%
left: 18%
--paper-item-icon-color: white
card_mod:
style: |
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
{% if is_state('fan.study_fan', 'on') %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Regardless of whether the condition is set on the rotation (being on), it doesnt rotate on or off.
Is there a way to place a image as background or add text on to the pagination bullets on the right?
- type: custom:mod-card
style:
swipe-card:
$: |
.swiper-pagination {
top: 0vw;
}
.swiper-pagination-bullets .swiper-pagination-bullet {
margin-top: 6px !important;
}
.swiper-container {
overflow: visible !important;
}
.swiper-container .swiper-button-next {
display: none;
}
.swiper-container .swiper-button-next::after {
display: none;
}
.swiper-container .swiper-button-prev {
display: none;
}
.swiper-container .swiper-button-prev::after {
display: none;
}
.swiper-pagination-bullets span {
display: block !important;
width: 12%;
height: 17%;
border-radius: 5%;
opacity: 1;
background-size: cover;
}
.swiper-container-horizontal .swiper-pagination-bullets {
left: 75vw !important;
}
card:
type: custom:swipe-card
parameters:
roundLengths: true
centeredSlides: true
effect: coverflow
preventClicks: true
init: true
loop: true
speed: 650
spaceBetween: 500
threshold: 5
coverflowEffect:
rotate: 80
depth: 200
pagination:
type: bullets
clickable: true
cards:
- !include /config/include/swiper_1.yaml
- !include /config/include/swiper_2.yaml
1st post → link at the bottom → post about picture-elements.
Hi @Ildar_Gabdullin I was looking for a way to hide/ make the underline completely transparent (not visible). Is there a way to do this? Actually I wanted to try it with the coloring method described in this post, but it seems I can only get it applied to labels and not not for underline (so I couldn’t try to set it transparent this way).
Thanks got there with that,
- type: state-icon
tap_action:
action: more-info
entity: fan.bedroom_3_fan
style:
top: 15%
left: 18%
--paper-item-icon-color: white
card_mod:
style: |
state-badge {
{% if is_state('fan.bedroom_3_fan', 'on') %}
animation: rotation 1s linear infinite;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
There is a method of coloring the underline only, check the post you answered.