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:

  1. Via the style editor app; (easier and faster option);
  2. 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