That can be all done by css. For moving the elements around, just set margin-top/bottom/left/right: ?px, for disabling anything use display: none, or opacity: 0 when you just want to hide text and not whole box
Sure, but whatās the name/id on those fields? Iāve looked in earlier posts, but canāt find a reference only som examples fornsome of the controls.
And setting margins wont allow the sliders to go in under the bulb. The margin is still the element, Iāll just move the bulb up.
Wait to customize the css, I have to fix some things in lightrgb and you could just waste time 
The widget template is pretty much always the same. See the first few posts, there are not just examples of css, but the structure of the div elements. There you find it. Its quite simple
@diapolon ut would be helpful if the widget type would have the div names used for the given widget listed. Is it possible?
v 0.240427.1
- Fixed LightRGB rendering
Yes, i can add it soon
1 Like
Use .fl for access to left zone and .fr for right.
Iāll investigate that.
Checking in the new update - the color scale on the color slider does not seem correct - it starts in red and ends in purple, but if I drag it to the right the color of the LEDs are red. while sliding along the color doesnāt seem to match.
I currently have no CSS on the LightRGB and thereās now a bigger space between the two sliders than there was before - canāt see exactly whatās wrong, but something definetly changed.
It seem flipped
In nspanel or smartphone? What dimensions?
The one on the top has CSS
.content { border: solid red; background-color: #000000; }
.content .state { background-color: #C0C0C0 }
.content .fl { padding-bottom: 50%; background-color: #A0A0A0 }
The bottom one has no CSS at all. Theyāre both 9x4 in size, though I want them in 4.5x4 eventually
ok, i havenāt tested in ns panel. i fix soon.
For range color, need to add red to end of gradient
I tried changing the sliders thumb - but the example I found online didnāt seem to work,
.content .range.v::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 35px;
background: #000000;
cursor: pointer;
}
Where did I go wrong here? (I donāt expect that to look good - just to test to change it)
try this.
.content .range .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 35px;
background: #000000;
cursor: pointer;
}
and this for background
.content .range .slider.hue { background-image: linear-gradient(to right, #ff0000, #fe7023, #ffc836, #d4ff42, #1efe43, #12d3fc, #004ef9, #e80ff9, #ff0000) }
That works, gives a bit smaller slider which makes it easier to see which color is currently active.
Are the sliders given .hue, .temperature and .power?
.hue, .temp, .sat, .dim
I release a fix soon
With red at the end is more precise but.
But to do it well I have to see exactly the intervals where to place the colors
That looks really nice.
If I understood it correctly it should be possible to calculate the gradient and 0 and 1 should be red.
background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)
might work.
Maybe the middle of the slider chould be the color selected in the slider? Though that would require some JS I think.
v 0.240427.2
Update released for ns panel with new layout for lightrgb
