I apologize @Mariusthvdb, I should have explained myself better. Currently when hovering over the active tab the icon, label text, and underline are all highlighted. However, when hovering over an inactive tab only the icon is highlighted. Since I donāt use icons on the tabs and only the label text is displayed, when I hover Iād like the label text to highlight.
Yes, that is what I tested and see happening with the mod I posted. Text only label gets highlighted when hovered
Is there a way to target the ha-sortable element inside of the drag-and-drop sections ?
Iāve tried several ways to add this but I canāt find the right selectorsā¦
What Iām trying to reproduce:
Here is the exact thing Iām trying to target (but any above element could do):
Iāve tried to add this to that specific section:
card-mod:
style: |
ha-sortable$: |
.card {
padding: 20px 17px;
background-color: white;
border-radius: 1em;
}
Without much luckā¦ tried also a few other selectors like hui-grid-section but nothing seems to work 
Maybe this? But no luck either
card_mod:
style:
hui-section$: |
.container {
padding: 20px 17px!important;
background-color: white !important;
border-radius: 1em !important;
}
Hi there!
I have a bunch of temperature sensors that show āHotā, āColdā or āOKā based on the room temperature.
I want to diplay these in a history graph with the bar color being red for āHotā, blue for āColdā and green for āOKā. How would I go about doing this?
Thank you kindly!
type: history-graph
entities:
- sun.sun
card_mod:
style: |
ha-card {
--state-sun-above_horizon-color: red;
--state-sun-below_horizon-color: violet;
}
Update: unfortunately, theme vars are not supported for āsensorā domain:
Most probably not solvable (without following problems) via card-mod, but does anyone knows, how to set the variable
ācontrol-select-background
from the thermostat card?
Ofc I can set it in card_mod and I can try to unset the transitions, ā¦ but because of loading order, card-mod ingestion, ā¦ I do not get it to work without transition.
So I thought to set it in the theme, but it does not work. Because it is set to inactive color in the card, I think hard-coded.
So, long story short, any chance to get --control-select-background in another color (without the transition problem), that is the background color of the hvac box.
Or to modify or better copy and change the inbuild thermostat card, ā¦? E.g. Same way as for inbuild integrations? Or ā¦
May be I am missing smth - but see no transitions neither on loading a view nor on switching modes:
type: thermostat
entity: climate.ecobee
features:
- type: climate-hvac-modes
card_mod:
style:
hui-card-features $ hui-climate-hvac-modes-card-feature $: |
ha-control-select {
--control-select-background: red;
}
Havenāt looked at your request in detail.
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;
}
Unfortunately your is already better then mine, via host variable or direct background e.g.
type: thermostat
entity: climate.klimaanlage_schlafzimmer
features:
- type: climate-hvac-modes
hvac_modes:
- cool
- heat
- 'off'
card_mod:
style:
hui-card-features:
$:
hui-climate-hvac-modes-card-feature:
$:
ha-control-select:
$: >
:host {
--control-select-background: red !important;
}
.container::before {
background: blue !important;
}
div::before {
transition: background 5s !important;
}
where you can see (extended transition here to 5s) that there is a transition.
Most probably less or esp. more visible depending on number of card-mods on the page, complexity of the page, browser speed, ā¦ but there is and currently I cannot unset the transition completely here, because card mod has to be loaded and applied and then the transition starts.
But yes, yours is already better than mine. Thx.And perhaps you are right and what I expect to see as still transition in your way is only the load order flickering. Iāll see.
To set the variable of the framework somewhere in theme or code modification is not possible, is it?
yes, using the same on the preset-modes card:
type: tile
card_mod:
style:
hui-card-features $ hui-climate-preset-modes-card-feature $: |
ha-control-select {
--control-select-background: skyblue;
}
.: |
ha-card {
--primary-text-color: var(--primary-color);
}
can also add the --control-select-color: red; there to get:
which is ugly ofc, and only for illustrating purposes
btw, we can also use
background: skyblue;
color: yellow; #color the non selected icons on the buttons
that background is the full color, not the filtered --control-select-background, might be useful.
the control number buttons:
card_mod:
style:
hui-card-features $ hui-target-temperature-card-feature $: |
ha-control-number-buttons {
color: green;
--control-number-buttons-background-color: skyblue;
}
there are more variables to play with, at least this show a direct path to touch them:
But it is not reducing the load order flickering or perhaps transition here as well.
For me the āproblemā is, that I cannot set this variable on top of the page or in theme, because it is hard-coded to
ācontrol-select-background: var(ādisabled-color)
in the card. So I am searching a way to set this variable āsomewhereā, where it is applied directly everywhere. But I think it is not possible because of the line above.
I see, yes, sorry to hear you have a bad UX on that. Not seeing real trouble in my dashboard, though I admit, the mod is not applied directly upon reload, it needs a very short time to kick in.
not on revisiting though, I believe it then is immediate No it is notā¦ especially not after changing dashboards in the left side menu and returning to the view with the slider/buttons, I can see a very clear transition from the theme colors to the modded color.
wonder if a card-mod-theme setting like:
card-mod-glance: |
:host {
transition: none !important;
}
could help somehow, ofc adapted for these specific cards? Not sure I see any difference tbh, setting that to a card-mod-tile ā¦
Strange, pasted my code on a test view with plenty of card-modded cards - still no transition.
Do not think this is possible due to that assignment to ādisabledā color you mentioned.
As said, can be that it is only load-order-later-apply-flickering and no transition with your way.
But try to open it in a browser-mod pupup. There it is more obvious, because not cached and loaded on top of the dom every time again.
Or see it better with
hui-card-features $ hui-climate-hvac-modes-card-feature $: |
ha-control-select {
--control-select-background: none;
--state-climate-off-color: #414141;
--state-climate-cool-color: #414141;
}
So with off and cool color as well. Even later applied and with transition.
Or my other question: Do you have an idea to have these other colors working without transition as well, because the switching off of the transition is too late as well because of loading time and order ā¦
Hi there,
I have few cards with many chips on them. Iād like to change the icon within the chip based on a state of the respective entity. I found out I can change the icon like this:
card_mod: style: hui-buttons-base $: | ha-assist-chip { state-badge { --card-mod-icon: mdi:lightbulb-outline; }
I do now know how to insert a general condition thatāll apply for all chips by referencing the respective entity. I am talking about something like this:
{{ if is_state(āconfig.entityā, āonā),āmdi:lightbulbā,āmdi:lightbulb-outlineā);
If someone could give me a short hint in the proper direction that would be awesome. thx
Best regards
To customize an icon of a particular chip:
type: entities
entities:
- type: buttons
entities:
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
card_mod:
style:
hui-buttons-base $: |
ha-assist-chip:nth-child(3) {
--card-mod-icon: mdi:car;
}
But in general customizing an icon for an entity should be done on a āserver sideā, not in UI.
Assume this is a binary sensor - then itās icon depends on itās device_class.
Another example - a template sensor/binary_sensor: icon may be defined in the template.
For a āstatic customizationā - ācustomizeā can be used.
Ofc in many cases an icon cannot be customized dynamically on the āserver sideā; then yes, use card-mod or similar frontend-based waysā¦
Hi there. Maybe someone can tell me how card_mod can completely hide the action button that I named with āonā. There should be nothing there and no action should be performed when I click there.
type: custom:auto-entities
card:
type: entities
show_header_toggle: false
filter:
include:
- entity_id: scene.*
state: 'on'
options:
action_name: 'on'
secondary_info: last-changed
sort:
method: friendly_name
reverse: false
show_empty: false
Hello @Ildar_Gabdullin,
I know that in general customisation of icons should be done as you describe and this is also how I do it.
I want to change the icon based on state though, which I know how to do for a particular chip. I was wandering if there is an easier way than defining an if-then for each entity. Is there?