View Full Version : Customizable App Theming

2012-11-19, 02:12
In line with our policy of providing the best possible cross platform UX for your Apps, we are currently adding customizable App theming that uses CSS stylesheets. Each App can be themed.

This includes; pages, sections (based on type), sidebars, and UI controls. We intend to provide some standard pre-built themes that you can choose (in the Form Tools Bar at the bottom of the Page Builder -- "Change Theme").

Standard pre-built themes will include Windows 8, iPad, iPhone, Android Phone, Android Tablet and various others.

Changing the theme automatically changes the UI appearance of the App that you are building.

Themes are just .css files that reside in the "themes" directory under the Lianja root install directory. You use CSS selectors to apply styles to UI components.

Each UI class has a unique selector attribute called "lianja_ui_class" e.g. "*[lianja_ui_class='textbox']" would apply a CSS style to all textbox controls. We will provide a blog article that shows you how to use these selectors in due course.


/* all UI controls are now themable like this */
*[lianja_ui_class="textbox"] {
color: white;
border-radius: 5px;
background-color: #e37b16;

/* you can use gradients for styling a page like this */
*[lianja_ui_page="1"] {
background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565);
color: white;
border: 2px solid #e37b16;
margin: 0px;

2012-11-19, 13:43
Will Twitter Bootstrap play a part in the UI stack ?

2012-11-19, 19:06
Beta10 does in fact include bootstrap, jquery and knockout.js in the distro.

The overall architecture of Lianja is designed around a simple principle of visual elements that can be related together in some meaningful way.

As you probably know, these visual elements consist of pages, sections and gadgets.

WebViews are one of the sections that you have at your disposal. You can use bootstrap, query, knockout.js (or any other JavaScript library) in your WebView sections and create what we call "WebViewWidgets".

2012-11-19, 22:04
Great- will probably retain some recent UI designs