I have been trying all day to add the color temperature slider from the more-info card in an entity row.
To be precise I am using a combo of slider-entity-row, more-info-card and then with card-mod I tried to remove everything else than the color temperature slider. But now I don’t think that is the way, and even if it is I can’t figure it out. Maybe I am making this way to complicated, but it would be cool because in the more-info card, the color slider is only visible when the light is on.
Anyone have an idea how I can pick only the color slider and put in a row under the brightness slider?
This is not difficult with the custom slider-entity-row plugin. You do have to configure it in YAML, so I created a decluttering-card template to easily apply the card without having to type the boilerplate each time. However, if you don’t want to use decluttering-card, it should be apparent how to apply this code without.
light_brightness_color_sliders:
card:
type: entities # If you aren't using decluttering-card (DC), your code will begin here.
title: "[[title]]" # Replace with desired title if not using DC
state_color: true
entities:
- type: custom:slider-entity-row
entity: "[[entity]]" # Replace with entity ID if not using DC
name: Brightness
card_mod: # This section gives a grey-white gradient to the brightness slider
style:
"ha-slider$ paper-progress$": |
div#progressContainer {
background-image: linear-gradient(to right, #5C6066 0%, #aaacaf 80%, white 100%);
--paper-progress-active-color: none;
}
- type: custom:slider-entity-row
entity: "[[entity]]" # Replace with same entity ID as above if not using DC
attribute: color_temp
name: Color Temperature
card_mod: # This section gives a warm-cool color gradient to the slider
style:
"ha-slider$ paper-progress$": |
div#progressContainer {
background-image: linear-gradient(to left,rgb(166, 209, 255) 0%, white 50%, rgb(255, 160, 0) 100%);
--paper-progress-active-color: none;
}
If you wanted to use the template, you would just go to “edit dashboard” > hamburger menu (three dots at top right corner) > “raw configuration editor” > paste my code at the very top. Then you could create this card like:
I am trying to have a constant color of the icon but it seems impossible. Any ideas how to change also in the above configuration the color of the icon, in off state and in on state?
As a reminder in on state the color of the icon changes according to the brightness !!!
PS: any help with a link to YouTube for videos on how the CSS is located for the card_mod will be highly appreciated. I was not able to understand how it works from the readme in GitHub.
