Wisej.NET Theme Builder
HomeSupportDocumentation
Search
⌃K
Links

Styles

Styles are all predefined in Wisej and roughly correspond to CSS3 styles. Wisej creates a dynamic CSS class and applies it to the widgets that use the appearance key and match the state that contains the style. It's very similar to using CSS classes with HTML elements.
Some styles can be overridden by properties: i.e. The backgroundColor style is overridden by the backgroundColor property. The main differences between styles and properties are:
  • An application cannot change a style value, only a theme can.
  • Styles go into CSS classes named using the appearance key + state that contains the style, while properties are rendered on the widget's DOM element.
  • Styles are limited to the Decorators supported by the Wisej JavaScript implementation. Decorators are JavaScript classes in charge of converting the styles set in the theme to CSS values.
  • Properties are unlimited. The JavaScript that defines a widget can add any number of themeable properties.

Supported Styles

This is the full list of all the supported styles:
  • gradientStart
    Property group: [startColor, startColorPosition]
Property groups are composite properties that can set the values of other properties using a shorthand array. See Property Group for more information.
  • gradientEnd
    Property group: [ endColor, endColorPosition ]
  • startColor
    Start color of the background gradient.
  • startColorPosition
    Position in percent or pixels where to start the color. It's a number, do not use "%" or "px". Default: 0.
  • endColor
    End color of the background gradient.
  • endColorPosition
    Position in percent or pixels where to start the color. It's a number, do not use "%" or "px". Default: 100.
  • orientation
    The orientation of the gradient. Allowed values: "horizontal", "vertical"
  • colorPositionUnit
    Defines if the given gradient color position values are in % or px.
  • backgroundColor
    Color of the background.
  • backgroundImage
    The URL or theme name of the background image
  • backgroundRepeat
    How the background image should be repeated. Allowed values: "repeat", "repeat-x", "repeat-y", "no-repeat", "scale".
  • backgroundSize
    The background size. Allowed values: "auto", CSS size, i.e. "60px 120px", "cover", "contain". See CSS3 background-size.
  • fillColor
    The fill color for background SVG images.
  • backgroundPosition
    Property group: [ backgroundPositionX, backgroundPositionY ]
  • backgroundPositionX
    Either a string or a number, which defines the horizontal position of the background image. Allowed values: Integer, "center", "left", "right".
  • backgroundPositionY
    Either a string or a number, which defines the vertical position of the background image. Allowed values: Integer, "center", "top", "bottom".
  • borderImage
    Specify an image as the border around an element. This style allows you to specify an image to be used instead of the normal border around an element. See CSS3 border-image.
  • slice
    Property group: [ sliceTop, sliceRight, sliceBottom, sliceLeft ]
  • sliceTop
    The top slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.
  • sliceRight
    The right slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.
  • sliceBottom
    The bottom slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.
  • sliceLeft
    The left slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.
  • repeat
    Property group: [ repeatX, repeatY ]
  • repeatX
    Specifies how the images for the sides and the middle part of the border image are scaled and tiled horizontally. Allowed values: "stretch", "repeat", "round".
  • repeatY
    Specifies how the images for the sides and the middle part of the border image are scaled and tiled vertically. Allowed values: "stretch", "repeat", "round".
  • fill
    Specifies whether to use the central part of the border image to fill the element. Allowed values: true, false. Default: true.
  • borderImageMode
    Configures the border image mode. Allowed values: "horizontal" (left and right borders), "vertical" (top and bottom borders), "grid" (all edges).
  • radius
    Property group: [ radiusTopLeft, radiusTopRight, radiusBottomRight, radiusBottomLeft ]
  • radiusTopLeft
    Top left corner radius in pixels.
  • radiusTopRight
    Top right corner radius in pixels.
  • radiusBottomRight
    Bottom right corner radius in pixels.
  • radiusBottomLeft
    Bottom left corner radius in pixels.
  • shadowColor
    The color of the shadow.
  • shadowSpreadRadius
    The spread radius of the shadow in pixels.
  • shadowBlurRadius
    The blur radius of the shadow in pixels.
  • shadowLength
    Property group: [ shadowVerticalLength, shadowHorizontalLength ]
  • shadowVerticalLength
    Vertical length of the shadow in pixels.
  • shadowHorizontalLength
    Horizontal length of the shadow in pixels.
  • inset
    Specifies whether the shadows are drawn inside the border. Allowed value: true, false. Default: false.
  • left
    Property group: [ widthLeft, styleLeft, colorLeft ]
  • right
    Property group: [ widthRight, styleRight, colorRight ]
  • top
    Property group: [ widthTop, styleTop, colorTop ]
  • bottom
    Property group: [ widthBottom, styleBottom, colorBottom ]
  • width
    Property group: [widthTop, widthRight, widthBottom, widthLeft ]
  • widthTop
    Top width of border in pixels.
  • widthRight
    Right width of border in pixels.
  • widthBottom
    Bottom width of border in pixels.
  • widthLeft
    Left width of border in pixels.
  • style
    Property group: [ styleTop, styleRight, styleBottom, styleLeft ]
  • styleTop
    Top style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
  • styleRight
    Right style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
  • styleBottom
    Bottom style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
  • styleLeft
    Left style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
  • color
    Property group: [ colorTop, colorRight, colorBottom, colorLeft ]
  • colorTop
    Top color of the border.
  • colorRight
    Right color of the border.
  • colorBottom
    Bottom color of the border.
  • colorLeft
    Left color of the border.
  • innerWidth
    Property group: [ innerWidthTop, innerWidthRight, innerWidthBottom, innerWidthLeft ]
  • innerWidthTop
    Top inner border width in pixels.
  • innerWidthRight
    Right inner border width in pixels.
  • innerWidthBottom
    Bottom inner border width in pixels.
  • innerWidthLeft
    Left inner border width in pixels.
  • innerColor
    Property group: [ innerColorTop, innerColorRight, innerColorBottom, innerColorLeft ]
  • innerColorTop
    Top inner border color.
  • innerColorRight
    Right inner border color.
  • innerColorBottom
    Bottom inner border color.
  • innerColorLeft
    Left inner border color.
  • innerOpacity
    The opacity of the inner border as a decimal value. Default: 1.
  • innerStyle
    Property group: [ innerStyleTop, innerStyleRight, innerStyleBottom, innerStyleLeft ]
  • innerStyleTop
    Top style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
  • innerStyleRight
    Right style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
  • innerStyleBottom
    Bottom style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
  • innerStyleLeft
    Left style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
  • clip
    Specify the painting area of the background. Allowed values: "border-box", "padding-box", "content-box", "initial", "inherit".
  • transform
    CSS3 transform string. See CSS3 transform.
  • transition
    CSS3 transition string. See CSS3 transition.
    This style allows a theme to define simple animations.
  • css
    Custom CSS3 rules.
    The css style can define complex CSS3 rules and pseudo element. There is no limit to what can be defined in the css style. This is the animation and pseudo element used in the Material-3 theme when an editable widget gains the focus:
"css": "{\":after\":{\"content\":\"''\",\"display\":\"block\",\"position\":\"absolute\",\"left\":\"0px\",\"bottom\":\"0px\",\"width\":\"100%\",\"height\":\"2px\",\"background-color\":\"focusFrame\",\"transform\":\"scaleX(1)\",\"transition\":\"all 0.3s\"}}
When setting CSS properties directly, Wisej supports both the HTML notation (i.e. "background-color") and the DOM notation (i.e. "backgroundColor").

Property Group

Property groups are composite properties that can set the values of other properties using a shorthand array. The code below shows a property group used to set related properties. In a theme definition file you can set a property group or a single property or both; they are applied in the order they are declared.
gradientStart and radius property groups
"styles":
{
"gradientStart": ["activeButton", "25"],
"radius": [3, 3, 3, 3]
}
The definition above is equivalent to:
gradientStart and radius properties
"styles":
{
"startColor": ["activeButton", "25"],
"startColorPosition": ["activeButton", "25"],
"radiusTopLeft": 3,
"radiusTopRight": 3,
"radiusBottomRight": 3,
"radiusBottomLeft": 3
}
Property groups that contain CSS values for the four sides or four corners of an element follow the TRBL pattern (top, right, bottom, left).
Theme Elements - Previous
States
Next - Theme Elements
Properties
Last modified 11mo ago