Only card-mod.js.
Everything else is just stuff to create card-mod.js
1 Like
The changes to support modding fold-entity-row are much appreciated! Iām using it like this to dynamically change the icon color for a group and it works great:
- type: entities
entities:
- type: 'custom:fold-entity-row'
head: group.downstairs_lights
style: |
:host {
--paper-item-icon-color:
{% if states('group.downstairs_lights') == 'on' %}
red
{% else %}
green
{% endif %}
;
}
group_config:
style: *color
This is the color anchor that I use in a few other places:
color: &color |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red
{% else %}
green
{% endif %}
;
}
Hi,
How can I just change the title background?
Thx!
- type: entities
title: .....
show_header_toggle: false
style: |
.card-header {
background-color: red;
}
entities:
- entity: ......
Hello @thomasloven, first of all great work for this community, thank you , I have a cenƔrio almost working
This works ok and Iām able to change the background image:
- type: custom:more-info-card
entity: light.hallway_tablelight
title: Luz Mesa
style:
"more-info-controls":
$:
"paper-dialog-scrollable more-info-content":
"more-info-light":
$:
"div div.color_temp":
"ha-labeled-slider":
$: |
ha-paper-slider{
background-image: -webkit-linear-gradient( right, rgb(255,121, 0) 0%, rgb(255,254, 250) 100% );
}
My question is, at the same level of the ādiv div.color_tempā I have ādiv div.brigtnessā, and I would like to add a style to that element, but
if I do This:
style:
"more-info-controls":
$:
"paper-dialog-scrollable more-info-content":
"more-info-light":
$: |
div div.brightness{
background-color: blue !important;
}
"div div.color_temp":
"ha-labeled-slider":
$: |
ha-paper-slider{
background-image: -webkit-linear-gradient( right, rgb(255,121, 0) 0%, rgb(255,254, 250) 100% );
}
It applies the style to ā.brightnessā, but ignores the drill of ā.color_tempā
If I do This:
style:
"more-info-controls":
$:
"paper-dialog-scrollable more-info-content":
"more-info-light":
$: |
div div.brightness{
background-color: blue !important;
}
$:
"div div.color_temp":
"ha-labeled-slider":
$: |
ha-paper-slider{
background-image: -webkit-linear-gradient( right, rgb(255,121, 0) 0%, rgb(255,254, 250) 100% );
}
It ignores the style to ā.brightnessā, drills ā.color_tempā and applies the stype to āha-paper-sliderā ok.
If I try:
style:
"more-info-controls":
$:
"paper-dialog-scrollable more-info-content":
"more-info-light":
$: |
- div div.brightness{
background-color: blue !important;
}
- "div div.color_temp":
"ha-labeled-slider":
$: |
ha-paper-slider{
background-image: -webkit-linear-gradient( right, rgb(255,121, 0) 0%, rgb(255,254, 250) 100% );
}
Ignores both.
Can I do this? While drilling into roots, fill styles in the middle.
Thank You
Yes, you can.
To put something inside a root, and also continue drilling, you can use .:, which means āhereā.
So in your case it would be something like:
"more-info-light":
[...]
$:
# Put those styles in the shadowRoot element
.: |
div div.brightness{
background-color: blue !important;
}
# but also keep going into div div.color_temp...
"div div.color_temp":
"ha-labeled-slider":
$: |
ha-paper-slider{
background-image: -webkit-linear-gradient( right, rgb(255,121, 0) 0%, rgb(255,254, 250) 100% );
}Is it possible to have the title background part transparent ?
- type: entities
title: Date & Time
show_header_toggle: false
entities:
- sensor.date
- sensor.time
- sensor.season
- sun.sun
- sensor.next_sunrise
- sensor.next_sunset
try
style: |
.card-header {background-color: rgba(0, 0, 0, 0.0);}
Thx, iāve already tried (also transparent) but it doesnāt help 
Try
style: |
.card-header {
background-color: var(--primary-background-color);
}
style: |
.card-header {
background-color: var(--primary-background-color);
box-shadow: 0px 0px 0px 3px var(--primary-background-color);
}
1 Like
Youād have to make the entire card transparent, and then add a background to everything BUT the header.
1 Like
So now it is transparent 
. There are two thins I would like to change:
- The top padding is much smaller than the bottom padding (red arrow)
- Can I have round corners?
Thx!
- type: entities
title: .....
show_header_toggle: false
style:
.: |
ha-card {
background-color: transparent;
box-shadow: none;
}
.card-content {
border-radius: 10px;
padding: 16px;
background-color: var(--paper-card-background-color);
box-shadow: var(--ha-card-box-shadow, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) );
}
entities:
- entity: .....
who can help me out? I canāt install the ācard-modā I explain to you I followed all the discussions followed the tutorials but nothing, summary I install the ācard-modā through HACS then I add the resources as indicated but I get the following errors and the Styles do not apply:
Please show your card configuration too.
- type: horizontal-stack
cards:
- type: custom:canvas-gauge-card
style: |
ha-card {
background-color: transparent; border: none; box-shadow: none;
}
entity: sensor.livello_acqua
card_height: 170
gauge:
type: "radial-gauge"
title: Livello Acqua
width: 180
height: 180
minValue: 0
maxValue: 100
startAngle: 80
ticksAngle: 200
valueBox: true
units: "%"
majorTicks: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
minorTicks: 1
strokeTicks: true
highlights: [{"from": 0, "to": 45,"color": "rgba(200, 50, 50, .75)"}]
colorPlate: "transparent"
borders: true
needleType: "arrow"
needleWidth: 2
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: "linear"
this is my configuration, but I want to add that the following error message is present even if I do not insert the style configuration on the card
Hi @thomasloven
Iāve encountered an issue with the card-mod plugin, probably related with your slider-entity-row.
I have added the slider-entity-row as custom-field of a custom button-card in order to control a light. Iām now trying to apply CSS rules to this slider using the card-mod. I figured it out BUT the slider wonāt keep the CSS styling - after a few seconds (sounds random) or as soon as Iām shifting the slider, the custom CSS style disappears.
I have noticed that when I try to inspect the slider element with the Chrome (or Safari) dev tools, after a few seconds, I lost the focus on the HTML element being inspected.
It looks like a refresh, but the page is not refreshing at allā¦
Hopefully Iām clear, please let me know what you need from me to reproduce it.
Thanks
edit. Making some troubleshooting - seems like it occurs only when embedded into a custom button-card (as custom-field). Is there any chance, you have an idea of what makes this happen ? Thanks again !
edit 2. I have opened a bug report on the button-card github (https://github.com/custom-cards/button-card/issues/268) as Iām pretty sure that the problem comes from it - but hopefully youāll have a way to prevent the bug to occur from your side too.