Style

Genio provides a variety of variables to allow the user to edit the interface of the application to their liking.

Overview

These variables were created to facilitate the edition of the application's layout without the need of manual code. There are two types of variables Layout & Theme:

Layout variables - Can be specific to a certain layout template or not. Their main use is to change the actual layout of the application like disable/enable specific elements;
Theme variables - Most of them aren't specific to a layout template besides a few. Their to changed the theme of the application ex: App colors, font size, rounded corners etc..

How to Edit

Currently there is two ways to edit variables and their values:

Via the style editor app; (easier and faster option);
Manually change the values via the Genio Interface.

To edit the variables and their respective value in Genio open the Style menu inside the Definitions. Select the desired application and either click the style button to open the style editor app or click change to open the properties of your application go under the Layout/Themes variables tab right click and select insert, a new pop up will appear, click edit variable and the list of all variables and their values will be displayed.

Layout Variables

Name	Layout	Description	Values	Default	Platform	Available Since Genio
BrandIconEnable	Horizontal	Enable/Disable application brand icon	`true` , `false`	`false`	mvc, vue	272.08
BreadcrumbsContent	All	Define what type of information that breadcrumbs will display	`simplified` , `detailed`, `hidden`	`detailed`	mvc, vue	308.28
BookmarkEnable	All	Enable/Disable bookmarks	`true` , `false`	`true`	mvc, vue	298.10
ContainerWidth	Horizontal	Changes the width of the application’s main container	`whole_page` , `reduced`	`whole_page`	mvc, vue	317.35
DbEditActionPlacement	All	Define on which side the List actions is placed	`left` , `right`	`left`	mvc, vue	272.08
DbEditPagerPlacement	All	Define on which side the List Pager control is placed	`left` , `right`	`left`	mvc, vue	272.08
DbEditMultipleActionPlacement	All	Define on which side the List multiple actions is placed	`left` , `right`	`left`	mvc, vue	272.08
DefaultSidebarState	All	Defines the default state of the right sidebar	`opened` , `closed`	`opened`	mvc	315.14
FooterEnable	All	Enable/Disable application footer	`true` , `false`	`true`	mvc, vue	272.08
HeaderEnable	Horizontal	Enable/Disable application header	`true` , `false`	`true`	mvc, vue	272.08
HeaderPlacement	Vertical	Define where the application Header is placed (different interface associated with each option)	`in_contentPanel` , `in_menuPanel`	`in_menuPanel`	mvc, vue	272.08
HelpStyle	All	Choose the type of helps used in form fields	`tooltip` , `popover`	`tooltip`	mvc, vue	298.53
LanguagePlacement	All	Choose the positioning of the button to change the language	`in_header` , `in_footer`	`in_header`	vue	311.69
LoginBrandEnable	Horizontal	Enable/Disable application login brand	`true` , `false`	`true`	mvc, vue	272.08
LoginStyle	All	Define the login page style	`single_page` , `embeded_page`	`single_page`	mvc, vue	283.23
LogoEnable	Horizontal	Enable/Disable application logo	`true` , `false`	`true`	mvc, vue	272.08
LogonPlacement	Horizontal	Define where the logon page is placed	`in_header` , `in_navmenu`	`in_header`	mvc, vue	283.23
MenuBackgroundColor	Vertical	Define the background color of the menu	`dark` , `light`	`dark`	mvc, vue	306.86
MenuBrand	Vertical	Define how the brand gets displayed	`Image` , `text`	`text`	mvc, vue	306.86
MenuSearchEnable	All	Enable/Disable Menu Search	`true` , `false`	`true`	mvc, vue	298.10
MenuAlign	Horizontal	Choose the menu align inside the nagivation bar	`left` , `right`	`left`	mvc, vue	292.21
MenuStyle	Horizontal	Define the menu style	`simple_navbar` , `double_navbar (Vue only)`, `ribbon`	`simple_navbar`	mvc, vue	328.41
RowActionDisplay	All	Define the of the table actions	`inline` , `dropdown`	`dropdown`	mvc, vue	317.36
ModulesStyle	Vertical	Define the style of application modules	`list` , `dropdown`, `collapsible`	`list`	mvc, vue	272.08
ShowPasswordToggle	All	Enable/Disable password toggle	`true` , `false`	`true`	mvc	312.10
UserRegisterStyle	All	Define the register button style	`button` , `hyperlink`	`button`	mvc, vue	307.44

Theme Variables

Name	Description	Values	Default	Platform	Available Since Genio
$action-focus-color	Define the outline color for focused button elements	`no values`	`rgba(238, 96, 2, 0.5)`	mvc, vue	294.22
$action-focus-style	Define the outline style for focused elements	`dotted`, `dashed`, `solid`, `double`, `initial`, `inherit`	`dotted`	mvc, vue	294.22
$action-focus-width	Define the outline width for focused elements	`no values`	`2px`	mvc, vue	294.22
$black	Define the black color	`no values`	`#000000`	mvc, vue	319.55
$body-bg	Define the body background color	`no values`	`$white`	mvc, vue	328.18
$body-color	Define the text color for the body	`no values`	`$dark`	mvc, vue	328.18
$btn-align-right	Defines if the action buttons should be aligned left or right	`true`, `false`	`false`	mvc, vue	298.11
$button-focus-color	Define the outline color for focused button elements	`no values`	`rgba(238, 96, 2, 0.5)`	mvc, vue	294.22
$buttons-all-primary	Define whether secondary buttons use primary or secondary button styles	`true`, `false`	`false`	mvc, vue	294.22
$compactheader	Enable/Disable compact header (only for HorzMenu_WithHeader)	`true`, `false`	`false`	mvc, vue	306.77
$compactstyle	When enabled, the entire system is in a compact style	`true`, `false`	`true`	mvc, vue	283.90
$custom-tab-navigation	Sets the styles of the tab navigator to match the navbar of the page	`true`, false	false`	vue	319.86
$danger	Define the danger color	`no values`	`#b71c1c`	mvc, vue	319.55
$dark	Define the dark color	`no values`	`#1e2436`	mvc, vue	319.55
$enable-rounded	Define rounded corner for entire application	`true`, `false`	`true`	mvc, vue	284.15
$enable-switch-single-label	Defines whether the logical enumerator appears only with a dynamic label or with two statistics	`true`, `false`	`false`	mvc, vue	298.44
$enable-table-wrap	Define if tables have column wrap (only for menu lists)	`true`, `false`	`true`	mvc, vue	298.11
$font-family-sans-serif	Define the application font family	`no values`	`"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`	mvc, vue	283.59
$font-size-base	Define the application font size	`no values`	`0.9rem`	mvc, vue	283.59
$gray	Define the gray color	`no values`	`#9fb1bd`	mvc, vue	319.55
$gray-light	Define the lighter version of the gray color	`no values`	`#dce3e8`	mvc, vue	319.55
$gray-dark	Define the darker version of the gray color	`no values`	`#3e5463`	mvc, vue	319.55
$group-border-top	Define the type of border the groups have on the top	`none`, `primary`, `secondary`	`none`	vue	324.16
$group-border-bottom	Define the type of border the groups have on the bottom	`none`, `gray`	`none`	vue	324.16
$highlight	Define the highlight color for the application	`no values`	`#DF640A`	mvc, vue	330.82
$hover-item,	Define the base hover color for all elements.	`no values`	`rgba(($primary-light), 0.3)`	vue	332.18
$info	Define the info color	`no values`	`#17a2b8`	mvc,vue	319.55
$input-focus-color	Define the outline color for focused input elements	`no values`	`rgba(0, 169, 206, 0.35)`	mvc, vue	294.22
$input-btn-padding-y	Define the vertical padding for buttons and input fields	`no values`	`0.26rem`	vue	319.83
$input-btn-padding-x	Define the horizontal padding for buttons and input fields	`no values`	`0.25rem`	vue	319.83
$light	Define the light color	`no values`	`#EAEBEC`	mvc, vue	319.55
$menu-behaviour	Define the collapse behaviour for the menu (only for FlatIntranet)	`full_collapse`, `partial_collapse`	`partial_collapse`	mvc, vue	307.30
$menu-multi-level	Define if the menu tree will have a "tab" to separate levels (only for FlatIntranet layout)	`true`, `false`	`false`	mvc, vue	298.11
$menu-sidebar-width	Define the width of the menus sidebar (when it's open)	`no values`	`16rem`	vue	319.09
$navbar-font-size	Define the font size for the navbar links (0.8rem - small, 0.9rem - medium, 1rem - large)	`0.8rem`. `0.9rem`, `1rem`	`1rem`	vue	319.55
$navbar-font-weight	Define the font weight for the navbar links (400 - normal, 500 - medium, 900 - bold)	`400`. `500`, `900`	`400`	vue	319.55
$primary	Define the primary color for the application	`no values`	`#009AA5`	mvc, vue	283.23
$primary-light	Define the lighter version of the primary color	`no values`	`#ccebed`	mvc, vue	319.55
$primary-dark	Define the darker version of the primary color	`no values`	`#19646b`	vue	319.55
$red	Define the red color	`no values`	`#b71c1c`	mvc, vue	319.55
$secondary	Define the secondary color for the application	`no values`	`#283149`	mvc, vue	283.23
$secondary-light	Define the lighter version of the secondary color	`no values`	`#3d495c`	vue	319.55
$secondary-dark	Define the darker version of the secondary color	`no values`	`#040911`	vue	319.55
$save-icon	Define the icon used for save button	`floppy_disk`, `disk_save`	`floppy_disk`	mvc	307.30
$success	Define the success color	`no values`	`#28a745`	mvc, vue	319.55
$table-head-inverse	changes the color of the table headers from $primary to white	`true`, `false`	`false`	mvc, vue	285.23
$table-striped	Define table striped style for entire application	`true`, `false`	`false`	mvc, vue	284.09
$warning	Define the warning color	`no values`	`#ffa900`	mvc, vue	319.55
$white	Define the white color	`no values`	`#FFFFFF`	mvc, vue	319.55
$wizard-steps	Sets the style of the wizard steps	`rectangle`, `circle`, `arrow`	`circle`	mvc, vue	296.97
$wizard-content	Sets the style of the wizard content	`standard`, `compact`	`standard`	mvc, vue	296.97