20 06 2014
Customizing Themes & Styles
Let us consider an example App Smart Truck. You want to customize Themes and Styles for the application to get an attractive look and feel for the App. The appearance of the application before customization is shown in below
Styles used to change static components of the app UI, it may include components like Menu Pad, Form, Control etc. Styles usually consist of CSS code which defines the appearance of each and every components of the app UI. Using CSS you can define the position and color of the components. For example for our app Smart Truck you can define a style on Style tab of Web Designer. The image below shows where you need to add the CSS code for creating New Style. In the CSS shown below you are adding a Style Standard.cssFirst.1.0.0.Control. You can save the New Style.
If you need to have same Style for all components, but with different color to make the app UI more attractive, you can use Themes. Using Themes you can change the colors of desired components. When we apply a Theme, the theme will be considered as wildcards and the Theme properties will be applied on the selected Style. While customizing Themes the user can add Style variables and the desired color for each of the variable. For smart Truck we created a Theme called Color Theme.
Now you can save the newly created Theme. For applying the Theme and Style select Apps settings, from the Web Designer node select configure Portal Skin; there you can select the saved theme and Style. Now you can save, then the New Theme will be appear for the App. The image shown below contains the New Style and Theme created.