Create a new style

How to create a new style.

To create a style, follow these steps:

Select STYLE at the top of the page.
Select ADD NEW.
Enter a name in the field Name.
If needed, you can copy the settings from an existing style. Select the existing style to copy from in the drop-down list in Copy from.
Select Create.
Specify the settings of the style. An example of the applied settings is displayed in the Preview window on the right.

If the HTML page is part of a MARS App, the *.css styling file is added to a subfolder _styles in the MARS App.

General

Here you can define the general style settings.

Color: here you can define the font color.
Background : here you can define the background color.
Font Family: here you can define the font family.
Font Size: here you can define the font size.

Style class

Here you can define the Primary and Secondary style classes. To add custom classes, select

. You can apply the style classes in the Row conditional styling parameter in the Table and Job table components.

Font Color: here you can define the color of the style class.
Background: here you can define the background color of the style class.
Border : here you can define the color of the text frame's border.
Font Style: here you can define the font style of the style class.
Cursor: here you can define the cursor style of the style class.
Border radius: here you can define the corner rounding of the text frame.
On mouse hover:
Font Color: here you can define the color of the style class on mouse hover.
Background: here you can define the background color of the style class on mouse hover.

Note: Component styles

Individual components can be set to override the style class.
Custom page components use the style of the page they are on.

Table: Main

Here you can define the style of the main table.

Background header: here you can define the background color of the table header.
Border header: here you can define the color of the header's border. Options: none, 1px , 2px .
Background odd rows: here you can define the background color of the odd rows.
Background collapsible: here you can define the background color of the collapsible rows.
Show row actions: here you can activate row actions. Options: Always and On row hover.
Background bottom: here you can define the background color of the bottom buttons.
Font color header: here you can define the font color of the header. Options: 5% increments between -25% and +25%.
Font size header: here you can define the font size of the header.
Background even rows: here you can define the background color of the even rows.
Font size rows: here you can define the font size for the rows. Options: 5% increments between -25% and +25%.
Row height: here you can define the height of the rows.
Disabled paging buttons: here you can define to show or to hide the paging buttons.
Font color bottom: here you can define the font color of a table bottom bar.

Button: Main - Button: Second

Here you can define the style of the Main and Second buttons. These buttons are used in the Button component and as a Submit button in the Form component.

Background: here you can define the background color of the button.
Background on hover: here you can define the hover background color of the button.
Font Color: here you can define the font color of the button.
Border Color: here you can define the border color of the button.