After updating to 2023.9 the styling of my customized tile card brightness slider is broken. Iāve been digging around the DOM to find a root cause but not having any luck.
In short: Before the update, the slider element filled the surrounding container. After the update, it shrank back down to the default height. I canāt seem to make it budge. Any ideas?
Not a dev, so be gentle card config is pasted below
Some minor thing I thought. Solvable in a few minutes. Unfortunately did not happen in my case.
I would like to have the same card height for several cards. For most I managed, unfortunately for the entities card (in combination with the custom slider) it doesāt work out as hoped.
I would like to vertically align the one single custom slider in the entities card. Now I get something like this:
But I prefer to have the slider vertically centered (in the entities card).
Use the browser tools to see what other paddings and margins there are. That slider is probably vertically aligned within itās own bounding box, but the box itself may not be.
Hi, I have the follow HTML.
Iāve been trying to modify it to remove the box-shadow inside .color-circle but no luck. Iām very new to card-mod.
Iāve tried so many things though mostly blindly. Iāve been able to use card-mod to modify other stuff but not to remove this darn shadow.
For context, this is an entities card containing custom rgb card which by default adds these shadows.
The entities card is inside a stack-in card but I donāt know if that matters.
- type: entities
show_header_toggle: false
#showing all the random stuff I've tried, mostly throwing stuff at the wall admittedly
style: |
rgb-light-card {
box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
}
type-custom-rgb-light-card {
box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
}
.color-circle {
transition: none;
box-shadow: 0 0px 0px 0px rgba(0,0,0,0);
}
ha-card {
border: none; #this bit works great and I need it
margin-top: -15px; #this also works great
}
rgb-light-card:
$: |
.color-circle {
color: green;
border-radius: 10%;
}
entities:
- type: custom:rgb-light-card
entity: light.bath_1
justify: between
size: 30
colors:
- type: call-service
service: scene.turn_on
service_data:
entity_id: scene.living_room_natural_light
icon_color: ... etc
thank you very much @dimitri.landerloos !
this did it!
additionally, i had to move the original style below this one and now both are active (removed border and margin adjustment for the entire RGB card + removal of shadows for individual rgb icons)
thanks again!
I saw the cool post with many, many great examples by Ildar, but are there also example of how css templates can be/were used in HA?
I would like to play around with some of the css style templates available on codepen but I am not sure how to apply them.
I can do simple things like adjust padding, border etc.
But not sure about how to test there kinds of css styles in HA:
might have been going on for some time, but now that I wanted to move those to a secret and paste them from there, I notice it does nothing. bringing it back as posted above doesnt eitherā¦
somehow I feel bad about adding !important, to force an override, and fear it takes even more of the system.
Iāve only a few card_mods using !important, so it is quite the surprise this long-standing mod now also needs it.
Could someone help me out on the
Energy source table?
Iām not sure if itās possible,
But was trying to get rid of the background
Cq black colorā¦then wanted it transparent
Did try with help of this card_mod
But ill gues i got not the correct code
after reading up here some codeā¦
Thank youā¦
I am new to ccs styles and having a challenge identifying the primary an secondary text attributes. I would like to change font characteristics. I have attempted with the code below using card-mod. I have added the following command --primary-font-size: 10px !important; with no effect on the text font size. This is a tile card. I have had no issues with the custom button card changing the font size and color. Appreciate any assistance or guidance.
card config is pasted below
