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
The Global Fonts and Colors functionality now allows for modifications not only from the appearance settings page but also directly within individual controls. This dual-access approach streamlines the process of updating your application's fonts and colors, offering the convenience of making changes in one central location or on-the-fly as needed. This flexibility provides a significant advantage, eliminating the need to navigate through multiple designers or controls individually for adjustments, thereby saving time and ensuring consistency across your application.
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 two locations. One is Appearance Setting, another one is located at designer, when you click any setting related to color, you could find a plus at top right corner which allow you easily add the color to extra for later use.
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.
If you now see all the text with the default fonts has changed to using this new font family:
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.
Customize the Header's style
You can change the styles of application's header from the Header settings section:
Title Visibility: Show or hide the title of this application from the top-left of the header.
Text Color: Set the color of the text and icons show on the application's header.
Background Color: Set the background color of the application's header.
Border Type: set the border of this application's header.
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:
Layout: choose the position where the Navigation menu bar display:
Default: the default value of the layout is set to Horizontal.
Horizontal: Display the navigation menu bar at the top of the application, after the header part.
Vertical: Display the navigation menu bar at the left slider of the application.
On header: Display the navigation menu bar on the header of this application. It will show behind the application title.
None: Hide the navigation menu bar from the application.
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.
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: