Customize spinner

[ncgnick]

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

[Daniel]

Try this as a start
https://forum.logicmachine.net/showthrea...4#pid15624

[ncgnick]

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

[admin]

Do you use show control mode or pop-up element?

[ncgnick]

Do you use show control mode or pop-up element?

No I Don't

[admin]

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: