Customize the appearance and global styles

Yeeflow team
Yeeflow team
  • Updated

Defining the very basic settings of an application can be quite time-consuming. With the appearance section from app settings page, you will find the configuration of changing app-level global styles, and change the layouts of your app. 

 

Open the appearance settings page

To set the appearance of an application, just click the gear icon from the top-right of your app to enter the app settings page. 

Application_Settings.jpg

 

Then navigate to the Appearance tab. There are four sections of the settings here:

 

The global colors and fonts settings

The Global Fonts and Colors enable you to update your application's fonts and colors from one convenient location. This prevents you from having to repeatedly open designers/controls and change them individually.

Application_settings_Apprearance_global_styles.jpg

 

There are six groups of colors and fonts – Primary, Secondary, Text, Accent, Extra color/font1 and Extra color/font 2. You can change each of the settings to change the definition of colors and fonts.

 

Default Font Family: you can set the default font of this application here. This will change all the default contents' font family. As an example, if we change the default font family to: Cherry Cream Soda. then click the "Save changes" button at the bottom of this page. You will see all the default fonts are changed immediately. 

Application_settings_Apprearance_default_font.jpg

 

If you now see all the text with the default fonts has changed to using this new font family:

Application_settings_Apprearance_new_font.jpg

 

How to use global colors and fonts

The global colors and fonts can be used from the Color pickers and Typography pickers of any controls which are allowed to change colors/fonts. 

For example, on the form/dashboard designer, you can find those settings from the style tab of any controls. You may set the background color and typography of a button or title etc.; You will see the Global icon from those pickers.

Application_settings_Apprearance_global_style_picker.jpg

 

Customize the Header's style

You can change the styles of application's header from the Header settings section:

Application_settings_Apprearance_header__2_.jpg

Please note: If you set the border of header, the border will only be effect on the bottom direction. 

 

Customize the Navigation menu

Set the styles of the navigation menu bar from the Navigation Menu settings section:

Application_settings_Apprearance_navigation.jpg

 

Layout: choose the position where the Navigation menu bar display:

  1. Default: the default value of the layout is set to Horizontal.
  2. Horizontal: Display the navigation menu bar at the top of the application, after the header part.

    Application_settings_menu_top.jpg

     

  3. Vertical: Display the navigation menu bar at the left slider of the application. 

    Application_settings_menu_left.jpg

     

  4. None: Hide the navigation menu bar from the application. 

    Application_settings_menu_none.jpg

     

You can change the navigation menu's text and background color. The menu item's styles for its normal, hover and active state.

 

Appearance of mobile view

When you access the application from your mobile device, the navigation menu bar will be displayed at the bottom. No matter whether you set the layout as horizontal or vertical. 

Application_settings_navigation_mobile.jpg

 

You can scroll left or right to view and select menu items from the bottom. 

 

Learn more about how to customize the icon and color:

Customize the application icon and color

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.