Develop World Class Enterprise Scale Business Applications on Cloud

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


imagesmart

Styles

                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.


style

Themes

                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.


theme2

 

                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.


th

facebooktwittergoogle_plusredditpinterestlinkedinmail

, ,

Leave a Reply

Your email address will not be published. Required fields are marked *