I have two different codes that I need to combine into one.
First one works great:
card_mod:
style: |
bt-ha-control-circular-slider {
--clear-background-color: #e3ac55;
--control-circular-slider-color: #e3ac55;
--control-circular-slider-background: #f3f5fa;
--control-circular-slider-background-opacity: 1.0;
}
Second one also works great:
card_mod:
style:
bt-ha-control-circular-slider$: |
.arc {
stroke-width: 10px !important;
}
.background {
stroke-width: 10px !important;
}
But if I try to combine them into one, nothing works anymore:
card_mod:
style: |
bt-ha-control-circular-slider {
--clear-background-color: #e3ac55;
--control-circular-slider-color: #e3ac55;
--control-circular-slider-background: #f3f5fa;
--control-circular-slider-background-opacity: 1.0;
}
bt-ha-control-circular-slider$:
.arc {
stroke-width: 10px !important;
}
.background {
stroke-width: 10px !important;
}
I think my syntax isn’t right.
Here is a example of combining styles with .: | for the standard climate card, but it will easily convert to the bt card. The colors are different so you can identify the code that is associated with the field.
type: thermostat
entity: climate.living_room
card_mod:
style:
ha-state-control-climate-temperature:
$: |
.icon-button {padding: 10px;}
.label ha-svg-icon { color: red !important; }
.target-button { color: red !important; }
.label:nth-of-type(1) { color: yellow !important; }
.label:nth-of-type(2) { color: cyan !important; }
.target-button:nth-of-type(1) { color: lime !important; }
.target-button:nth-of-type(2) { color: blue !important; }
.buttons ha-outlined-icon-button:nth-of-type(1) {
--md-sys-color-outline:purple !important;}
.buttons ha-outlined-icon-button:nth-of-type(2)
{--md-sys-color-outline:lime !important; }
ha-state-control-climate-temperature$:
ha-control-circular-slider$: |
.high {stroke: red !important; opacity: 1 !important;
}
.low { stroke: blue !important;
opacity: 1 !important;
}
.arc { stroke-width: 10px !important;}
.background {
stroke: pink !important;
opacity: 1 !important;
stroke-width: 10px !important;}
.target-button { color: red !important; }
.: |
.title {
font-size: 14px !important;
color: cyan !important;
text-align: left !important;
background: #262626 !important;
}
ha-card {
background: black !important;
}
Try to avoid cross posting…Dimitri makes a great point about understanding .: |
For a great CSS mod guide check out this
Thank you very much. Sadly I can’t find his post about .: |
Thanks a lot. This is way to complicated for me…
Just play with the settings and ask questions. It’s better to start with simple mods and go from there.
Okay so what I’ve got is this:
card_mod:
style:
bt-ha-control-circular-slider // no need to access shadow-root
{
--clear-background-color: #e3ac55;
--control-circular-slider-color: #e3ac55;
--control-circular-slider-background: #f3f5fa;
--control-circular-slider-background-opacity: 1.0;
}
bt-ha-control-circular-slider$: | // shadow-root accessed with $: |
.arc {
stroke-width: 10px !important;
}
.background {
stroke-width: 10px !important;
}
Sadly this doesn’t work
This is the html
Can you post the entire card code? I’ll load the better-thermostat module. It should parallel the standard climate card.
This is it:
I also tried this, but still doesn’t work:
card_mod:
style: |
bt-ha-control-circular-slider {
--clear-background-color: #e3ac55;
--control-circular-slider-color: #e3ac55;
--control-circular-slider-background: #f3f5fa;
--control-circular-slider-background-opacity: 1.0;
}
.:|
bt-ha-control-circular-slider$: |
.arc {
stroke-width: 10px !important;
}
.background {
stroke-width: 10px !important;
}
Other way around.
Cant have 2 | in a row which you have here:
.:|
bt-ha-control-circular-slider$: |
So like this:
card_mod:
style:
bt-ha-control-circular-slider$: |
.arc {
stroke-width: 10px !important;
}
.background {
stroke-width: 10px !important;
}
.: |
bt-ha-control-circular-slider {
--clear-background-color: #e3ac55;
--control-circular-slider-color: #e3ac55;
--control-circular-slider-background: #f3f5fa;
--control-circular-slider-background-opacity: 1.0;
}
Basically i would say it is easiest to do all your instances of needing to enter a shadow root at the top of the code like this as an example:
card_mod:
style:
element-with-shadow$: |
element {
}
2nd-element-with-shadow$: |
element {
}
And then add your things at the bottom that dont need a shadow root. Like this:
card_mod:
style:
element-with-shadow$: |
element {
}
2nd-element-with-shadow$: |
element {
}
.: |
element-with-no-shadow {
}
But it is technically also possible to do the below. Whats important is that all instances of |start at the same indentation.
card_mod:
style:
.: |
element-with-no-shadow {
}
element-with-shadow$: |
element {
}
2nd-element-with-shadow$: |
element {
}
I also tried your idea before but again the second code doesn’t work:
First code snippet works but immediately when I add the second section:
.:|
bt-ha-control-circular-slider {
--clear-background-color: #e3ac55;
--control-circular-slider-color: #e3ac55;
--control-circular-slider-background: #f3f5fa;
--control-circular-slider-background-opacity: 1.0;
}
the code stops working.
look at the placement of .: | vs my examples.
i also gave you a working solution here (i realise now i left out a space in the .: | so it didnt actually work as it was .:| instead. which does nothing) so i have now fixed that small issue below:
1 Like
Thank you so much. It was the space between .: and |
I also thought it has to line up with “style”.
