This is great and takes me almost all of the wayâŠexcept to final questionsâŠ
I can get the top icon in the right colour now, but the selector icon doesnt go blue like the home and disarmed ones do for the respective colours. Also, anyway I can change the icon for night mode?
The above two are great but colour missing from button area for custom/night mode
âââ Not entirely sure what you mean by this. Can you elaborate?âââ
As per my screengrabs, the armed home button has a green background when chosen, and disarmed whiteâŠbut night doesnât have a background colour at all
ââ No, not that i am aware of. Like I said the tile cards tend to use svg icons which card mod canâtText change.âââ
Sorry I seemed to completely ignore that part of your reply
My custom mode for night is just âNightâ The top icon colour is correct so that all good⊠Itâs just the bottom button area part that doesnât sync up
After reading all the posts and trying a lot of the solutions proposed here, I am still stuck on the fact of being able to change a text to green or red depending on its title.
I am using the flex-horseshoe-card and I would like to write the text âsolar modeâ in green and the text âEDF modeâ in red. These values ââcome from a template which transforms an On and Off value into text.
Then add your template sensors in like this to say if this state then green, else red.
card_mod:
style:
.container:
.card--filter-none:
.datagroup: |
text:nth-of-type(8) .state__value {
{% if states('binary_sensor.afternoon') == 'on' %}
fill: green !important;
{% else %}
fill: red !important;
{% endif %}
}
of course you can also change the color to whatever you want like an RGB color or a Hex Color instead of a named color like i have done. just for illustration purposes.
I tried your solution on another card but I canât get the color to change to red if the number is negative and green otherwise. Where is the subtlety?
Well you shouldnt need the mod card. You place the card mod under the flex horseshoe card.
Also check that the nth-of-type(8) is correct. If you have more values or less values on display there may be less text fields so try and play with the number until it works on the right text field.
Probably nth-of-type(4) if i were to guess without checking based on your entities in the card.
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
card config is pasted below
