Skip to main content
Version: ver. 1.5.0

Styles

You can create a custom style to every widget. Using styles, you can define how a widget and its elements look like and which effects are in use.

  • Using Global Colors - In any style parameter where a color input section is available, you can specify a custom or global color. Global colors can be selected from the dropdown menu below the color picker.

Arc​

Arc Style can be used in those widgets which have the Arc component.

  • Line color - The color of the line
  • Arc width - The width of the arc
  • Arc rounded - The ends of the arc line are rounded
  • Arc image - The background image for the arc line

Background​

Background Style is the background of the widgets. You can create gradients or make the corners of the background rounded.

  • Color and alpha - Set the background color and alpha of the object.
  • Gradient color - Set the gradient color of the background.
  • Bg main stop - Set the point from which the background color should start for gradients.
  • Bg gradinet stop - Set the point from which the background's gradient color should start
  • Bg radius - The radius you use to make the background corners rounded
  • Gradient direction - The direction of the gradient. It can be horizontal or vertical.
  • Clip corner - Enable to clip the overflowed content on the rounded corner.

Background Image​

You can set an image as a background image.

  • Bg image - The image you use as a background image
  • Bg image opa - The opacity of the background image
  • Recolor - With Recolor function, you can use a color on the background image. Set the color depth by changing the alpha parameter.
  • Bg image tiled - If enabled, background image will be tiled

Blend​

By using Blend Style, you can mix the pixel colors of the current widget part with the colors of the object followed by.

  • Blend mode - Choose from four options.
    • Normal - Default state
    • Additive - Adding up pixels
    • Subtractive - Subtract pixels
    • Multiply - Multiply pixels
  • Blend opacity - Here you can set the opacity of the widget part

Border​

Using Border, you can draw a border around the selected object onto the inner lines.

  • Border color - The color of the border
  • Border width - The width of the border
  • Border side - The direction of the border

Line​

Line Style can be used in those widgets which have the Line component.

  • Color - The color of the line
  • Width - The width of the line
  • Line rounded - The ends of the line will be rounded

Outline​

Outline style is similar to Border style but here you draw the border around the selected widget part.

  • Outline color - The color of the outline
  • Outline width - The width of the outline
  • Outline pad - Distance from the side of the widget in pixels

Paddings​

Paddings style put a padding onto the widget part. It means parts under it in the hierarchy will shift by the distance defined in the padding with pixel values.

  • Pad - The extent of the padding

Shadow​

Using a Shadow Style, you can draw a shadow or a glow to the selected widget part.

  • Shadow color - The color of the shadow
  • Shadow width - The width of the shadow
  • Shadow spread - The depth of the shadow
  • Shadow OX - Shift the shadow on the X axis
  • Shadow OY - Shift the shadow on the Y axis

Text​

Text Style defines the parameters of the text that can be found on the widget.

  • Text color - The color of the text
  • Letter spacing - The space between the letters
  • Line spacing - The space between the lines
  • Text align - The direction of text alignment
  • Text decor - You can overline or underline the text
    • None - Normal text
    • Understand - Underlined text
    • Strikethrough - Overlined text
  • Text font - The font of the text

Transform​

The transform style allows you to rotate, resize, and set minimum and maximum sizes for any widget via the style.

  • Min and max width - Here you can set the minimum and maximum width for the widget.
  • Min and max height - Here you can set the minimum and maximum height for the widget.
  • Transform rotation - You can rotate the widget in 0.1 degree increments.
  • Transform scale - You can scale the widget, where 100% corresponds to a value of 256.
  • Pivot x and y - With these values, you can determine the center point of rotation.