This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Customize spinner
#1
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
Reply
#2
Try this as a start
https://forum.logicmachine.net/showthrea...4#pid15624
------------------------------
Ctrl+F5
Reply
#3
(08.07.2020, 13:31)Daniel. Wrote: Try this as a start
https://forum.logicmachine.net/showthrea...4#pid15624
Thanks
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
Reply
#4
Do you use show control mode or pop-up element?
Reply
#5
(08.07.2020, 14:59)admin Wrote: Do you use show control mode or pop-up element?
No I Don't
Reply
#6
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;
}
You can add multiple classes to an element if you want to change colors or other properties. For pop-up element display classes are prefixed with pcontrol- so s-vertical becomes pcontrol-s-vertical:
       
Reply


Forum Jump: