Have a look in the dom on the right side. It is inside shadow root and not directly in ha-card. So you have to go one level deeper. Search for card-header in this thread. Asked and answered a lot of times.
Does custom:canvas-gauge-card belong to the list of cards that canât be modified with card-mod? Iâm using it within a picture_elements card so I can see <ha-card class="type-picture-elements"> when I inspect the card, but not within this for the gauge itself. The line before </canvas-gauge-card> is <card-mod slot='none'> and I am able to get things inserted into this section but they have no effect on the card size (Iâm trying to adjust its height in response to the pc or phoneâs screen size, either by explicitly re-stating the gaugeâs size or by scaling it).
My experimental card (much simplified) yaml:
Hi its been a little bit, but since i am working on a guide for styling the tile card with card mod i figured i would give you a response.
it is unfortunately not possible to change the icons for most of the tile cards (any that have a feature) as they all use svg icons. card mod cant change these as far as i know @Ildar_Gabdullin may be able to confirm, or provide some insight on this. i have certainly been unable to do this.
you can however change the colors of the states like this (of coure pick your own colors )
I have only shown the 3 states because that is all my alarm panel supports right now, but all are included in the code
in the meantime if you are interested you can check out my mushroom card mod guide here. there are some overlaps on how things are styled in those and in the tile card. below
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
)
card config is pasted below