Customizing App Framework UI skin

Tweet Like

With App Framework Style Builder you can customize the UI skin for your application. There is a color picker provided for different UI elements such as Background, Text, Header, Header background, Header text, Menu Background, Menu text, Navbar background and Navbar text. Using Style builder interface you can pick and choose the color you want for you speciifc theme and customize the look of your application.

Navigate to Style builder.

Pick the colors usign the color picker.

Once you are done with selecting colors for your theme, press "generate", this redefines the style for all the UI elements and will generate the CSS file called af.ui.css. You can place this file in your application and have the custom look for your app.

Alternatively, you can modify af.ui.css to have custom look for your app.

Another theme builder we have is CSS chooser. With this you can have platform specific theme for your application. So, before building for specific platform you can choose the appropriate theme, generate the CSS and stick it into you application. It provides native look for your application for the chosen platform.

For this, navigate to CSS Chooser. We have support for following platforms:

iOS, iOS7, Android, Blackberry, Windows 8

Choose the platform you want your application to customize for and press "generate". This generates afui.custom.css file that you can use in your application, the custom css take into effect when loaded on device. To disable custom OS specific themes set $.ui.useOSThemes to false before $(document).ready() triggers. 

To learn more about App Framework and links to other related articles, visit Getting Started with App Framework.

Get started with the Intel XDK


Download Now