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.
Hello.
It is possible to do something in this style.
input_select:
border_radius_selector:
name: Select Border
options:
- None
- Small
- Standard
- Large
Automation
# beautifier 1
- alias: input select beautifier 1 border-radius
initial_state: 'true'
trigger:
- platform: state
entity_id: input_select.border_radius_selector
to: None
action:
- service: input_select.select_option
data:
entity_id: input_select.border_radius
option: 0px
# beautifier 2
- alias: input select beautifier 2 border-radius
initial_state: 'true'
trigger:
- platform: state
entity_id: input_select.border_radius_selector
to: Small
action:
- service: input_select.select_option
data:
entity_id: input_select.border_radius
option: 6px
card lovelace
- type: "custom:atomic-calendar"
title: Calendar
entities:
- entity: calendar.holiday
style: |
ha-card {
border: solid 1px rgba(100,100,100,0.3);
background: rgba(50,50,50,0.3);
background-image: url("/local/images/wallpapers/cardbackk.png");
background-repeat: repeat-x;
background-size: 100% 68px;
border-radius: {{ states('input_select.border_radius') }} #here, it is possible to do something similar?
}
The point is to be able to change some styles according to the definition of the theme and styles.
border-radius: {{ states('input_select.border_radius') }}
That should work
1 Like
slider-entity-row isnāt stylable by itself. Itās not a card.
This is what I currently get with your configuration:
How can I control the divider color and length (I wan to make it shorter and in the center of the card) ?
The divider is --secondary-text-color, and if you changed the padding of the card, youāll have to adjust the side margins https://github.com/home-assistant/home-assistant-polymer/blob/1a2ebabd22f4dfd9d308865ae630333bba7d96c4/src/panels/lovelace/special-rows/hui-section-row.ts#L55-L58
what I donāt understand then is why I successfully applied CSS style to it ? Only problem Iām encountering is when I embedded it into a custom button-cardā¦ ?
Also, Iām confused because you were recommanding card-mod to someone asking how to customize style of the slider here https://github.com/thomasloven/lovelace-slider-entity-row/issues/73 ?