You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

New Feature

This is a new feature in Joget DX 8.

Introduction

The Styles tab in the property editor is a new feature in DX8 that enables refined control of how an element (whether form element, list column or UI page component) would be viewed on either Desktop, Tablet or Mobile. The styles editor allows one to modify an element's CSS styling without the need to write CSS code (unless one uses the custom styling, more on this below)

Form Builder

The style tab in the Form Builder,  allows one to control how a page component is viewed by modifying an element's default style and the component's style component when it is hovered over by a cursor. There is also the option to specify which CSS classes should the element get its style from and the option to modify the position of the element's label.

List Builder

In the List Builder, the styles tab allows the user to control the styling of the list in 2 ways, modifying the list's body styling and its header styling. 

UI Builder

Similarly to the Form Builder, The styles tab in the UI builder allows one to control how a page component is viewed by modifying the element's default style and the component's style when it is hovered over by a cursor.  

Styling Modes

There are 8 possible styling options available across the Form, List and UI builders. These can be accessed under the styling configurations in the property editor (See figure 4).

Tip

You can utilise the styles editor to change how an element is styled for multiple device types from the same configuration screen. The image below shows how a text field form element is styled for Desktop and Mobile devices through the same property editor menu.

Text

NameDescription
Font SizeEnter the text font size in em, px, percentage, rem or auto size.
Font ColorEnter the text's font color as a hex code or use the color picker to select the desired color.
Font Family

Select the text's font type. Available options are:

  • Default
  • Arial
  • Lucida Grande
  • Palatino Linotype
  • Times New Roman
  • Georgia, serif
  • Tahoma
  • Comic Sans
  • Verdana
  • Impact
  • Arial Black
  • Trebuchet
  • Courier New
  • Brush Script
Font Weight

Select the text's font weight. Available options are : 

  • Default
  • Thin
  • Extra-Light
  • Light
  • Normal
  • Medium
  • Semi-Bold
  • Bold
  • Extra-Bold
  • Ultra-Bold
Line HeightEnter the text's line spacing height in em, px, percentage, rem or auto size.
Text Align

Choose the text's alignment. Available options are:

  • Default
  • Position Left 
  • Position Centre
  • Position Right
  • Justify
Letter SpacingEnter the spacing width between letters in em, px, percentage, rem or auto size.
Text Decoration ColorEnter the text's decoration color as a hex code or use the color picker to select the desired color
Text Decoration

Select the text's decoration. Available options are:

  • Default
  • None
  • Underline
  • Overline
  • Line Through
  • Underline & Overline
Text Decoration Style

Select the text's decoration style. Available options are:

  • Default
  • Solid
  • Wavy
  • Dotted
  • Dashed
  • Double

Background

NameDescription
Background Image
Image Preview
Background Color
Background Repeat
Background Size
Background Position X
Background Position Y

Margin

NameDescription
Margin Top
Margin Left
Margin Right
Margin Bottom

Padding

NameDescription
Padding Top
Padding Left
Padding Right
Padding Bottom

Border

NameDescription
Border Style
Border Color
Border Top Width
Border Left Width
Border Right Width
Border Bottom Width
Border Radius

Display

NameDescription
Display
Position
Position Top
Position Left
Position Right
Position Bottom
Float

Size

NameDescription
Width
Height
Min Width
Min Height
Max Width
Max Height

Custom

The Custom Styling option allows you to write custom CSS code that will determine the element's styling.



  • No labels