# \[Pro\]\[Dashboard\] SmartDash - a dashboard for Homey \[CLOSED\] **URL:** \ **Category:** Apps\ **Tags:** flow, dashboard, ios, homey-pro, android\ **Created:** [June 27, 2023, 8:41pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385 "2023-06-27T20:41:13Z")\ **Posts on this page:** 20\ **Page:** 52
**Author:** ![sandro711](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sandro711/32/74638_2.png) [@sandro711](https://community.homey.app/u/sandro711)\ **Post date:** [April 27, 2024, 12:24pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1027 "2024-04-27T12:24:36Z")
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 ---
**Author:** ![elestedt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/elestedt/32/106092_2.png) [@elestedt](https://community.homey.app/u/elestedt)\ **Post date:** [April 27, 2024, 12:36pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1028 "2024-04-27T12:36:20Z")
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. ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 12:41pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1029 "2024-04-27T12:41:52Z")
Wait to customize the css, I have to fix some things in lightrgb and you could just waste time 😅 ---
**Author:** ![sandro711](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/sandro711/32/74638_2.png) [@sandro711](https://community.homey.app/u/sandro711)\ **Post date:** [April 27, 2024, 1:58pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1030 "2024-04-27T13:58:00Z")
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? ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 2:15pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1031 "2024-04-27T14:15:25Z")
**v 0.240427.1** > - > - Fixed LightRGB rendering ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 2:20pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1032 "2024-04-27T14:20:22Z")
> [@sandro711](#): > > ut would be helpful if the widget type would have the div names used for the given widget listed. Is it possible? Yes, i can add it soon ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 4:05pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1033 "2024-04-27T16:05:33Z")
> [@elestedt](#): > > 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. Use .fl for access to left zone and .fr for right. ---
**Author:** ![elestedt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/elestedt/32/106092_2.png) [@elestedt](https://community.homey.app/u/elestedt)\ **Post date:** [April 27, 2024, 4:39pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1034 "2024-04-27T16:39:05Z")
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. ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 4:48pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1035 "2024-04-27T16:48:07Z")
> [@elestedt](#): > > but if I drag it to the right the color of the LEDs are red It seem flipped ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 4:49pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1036 "2024-04-27T16:49:12Z")
> [@elestedt](#): > > I currently have no CSS on the LightRGB and there’s now a bigger space between the two sliders than there was before In nspanel or smartphone? What dimensions? ---
**Author:** ![elestedt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/elestedt/32/106092_2.png) [@elestedt](https://community.homey.app/u/elestedt)\ **Post date:** [April 27, 2024, 4:50pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1037 "2024-04-27T16:50:41Z")
![screenshot](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/9/7927eeea9ff7a4ca77d9917e93c5a8f45de87703.png) The one on the top has CSS ```auto .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 ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 4:55pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1038 "2024-04-27T16:55:11Z")
ok, i haven’t tested in ns panel. i fix soon. For range color, need to add red to end of gradient ---
**Author:** ![elestedt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/elestedt/32/106092_2.png) [@elestedt](https://community.homey.app/u/elestedt)\ **Post date:** [April 27, 2024, 4:59pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1039 "2024-04-27T16:59:48Z")
I tried changing the sliders thumb - but the example I found online didn’t seem to work, ```auto .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) ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 5:02pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1040 "2024-04-27T17:02:44Z")
try this. ```auto .content .range .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 35px; background: #000000; cursor: pointer; } ``` and this for background ```auto .content .range .slider.hue { background-image: linear-gradient(to right, #ff0000, #fe7023, #ffc836, #d4ff42, #1efe43, #12d3fc, #004ef9, #e80ff9, #ff0000) } ``` ---
**Author:** ![elestedt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/elestedt/32/106092_2.png) [@elestedt](https://community.homey.app/u/elestedt)\ **Post date:** [April 27, 2024, 5:05pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1041 "2024-04-27T17:05:17Z")
> [@diapolon](#): > > ```auto > .content .range .slider::-webkit-slider-thumb { > -webkit-appearance: none; > appearance: none; > width: 10px; > height: 35px; > background: #000000; > cursor: pointer; > } > > ``` 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`? ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 5:11pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1042 "2024-04-27T17:11:49Z")
.hue, .temp, .sat, .dim I release a fix soon ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 5:45pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1043 "2024-04-27T17:45:40Z")
![Screenshot 2024-04-27 alle 19.44.55](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/a/3/a3cb290f8f4f28dd9c8f0153dc061200bd93d9eb.png) Maybe LightRGB s better in that way ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 5:56pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1044 "2024-04-27T17:56:45Z")
> [@diapolon](#): > > For range color, need to add red to end of gradient 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 ---
**Author:** ![elestedt](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/elestedt/32/106092_2.png) [@elestedt](https://community.homey.app/u/elestedt)\ **Post date:** [April 27, 2024, 6:25pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1045 "2024-04-27T18:25:36Z")
> [@diapolon](#): > > Maybe LightRGB s better in that way That looks really nice. > [@diapolon](#): > > 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 If I understood it correctly it should be possible to calculate the gradient and 0 and 1 should be red. ```auto 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. ---
**Author:** ![diapolon](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/diapolon/32/82612_2.png) [@diapolon](https://community.homey.app/u/diapolon)\ **Post date:** [April 27, 2024, 6:30pm UTC](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385/1046 "2024-04-27T18:30:33Z")
**v 0.240427.2** > Update released for ns panel with new layout for lightrgb [Previous page](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385.md?page=51) [Next page](https://community.homey.app/t/pro-dashboard-smartdash-a-dashboard-for-homey-closed/83385.md?page=53)