+- LogicMachine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: OLD visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Customize spinner (/showthread.php?tid=2714)
Customize spinner - ncgnick - 08.07.2020
Hello,
Is there any way to customize spinners differently?
I need different colors and scaling in different pages
Also, in some pages I need vertical spinner and in some horizontal
Thanks
RE: Customize spinner - Daniel - 08.07.2020
Try this as a start
https://forum.logicmachine.net/showthread.php?tid=2465&pid=15624#pid15624
RE: Customize spinner - ncgnick - 08.07.2020
(08.07.2020, 13:31)Daniel. Wrote: Try this as a startThanks
https://forum.logicmachine.net/showthread.php?tid=2465&pid=15624#pid15624
I have done this and much more than this I have changed background color,buttons, boarders etc..
But! How can I have it vertically /not Horizontally and most important, how can I apply different changes to different instances of the spinner? As have already mentioned, I need a red horizontal spinner with green buttons in one location and on another location a vertical yellow spinner with blue buttons and red text
RE: Customize spinner - admin - 08.07.2020
Do you use show control mode or pop-up element?
RE: Customize spinner - ncgnick - 08.07.2020
(08.07.2020, 14:59)admin Wrote: Do you use show control mode or pop-up element?No I Don't
RE: Customize spinner - admin - 09.07.2020
Use this CSS for vertical spinner for both show control and pop-up element (icon display). You need to set additional classes to s-vertical, icon display will only work correctly with 2020 RC2 firmware.
Code:
.pcontrol-s-vertical .popover-content,
.usermode .s-vertical .popover-content {
display: flex;
flex-direction: column-reverse;
}
.pcontrol-s-vertical .spinner-up,
.usermode .s-vertical .spinner-up {
border-radius: 4px 4px 0 0 !important;
}
.pcontrol-s-vertical .spinner-down,
.usermode .s-vertical .spinner-down {
border-radius: 0 0 4px 4px !important;
}
.pcontrol-s-vertical .spinner-up,
.usermode .s-vertical .spinner-up,
.pcontrol-s-vertical .spinner-down,
.usermode .s-vertical .spinner-down {
width: 54px !important;
margin: 0 !important;
}
.pcontrol-s-vertical .spinner-value,
.usermode .s-vertical .spinner-value {
width: 52px;
border-top-width: 0;
border-bottom-width: 0;
}