barrymavin
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.
e.g.
/* 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;
};
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.
e.g.
/* 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;
};