UI themes for Web, Tablet and Phone Apps in Lianja 6.3

[barrymavin]

Lianja 6.3 introduces UI theming for Web, Tablet and Phone Apps.

The UI theme is specified in CSS.




Here is a sample theme file:

/* Lianja custom theme for Web Apps */


/* page */
.lianja_ui_page
{
	background:beige !important;
}


.lianja_ui_page_header
{
	background:gray !important;
	color:white !important;
}


.lianja_ui_page_navigationpanel
{
	background:transparent !important;
}


.lianja_ui_page_navigationpanel_header
{
	background:darkgray !important;
	color:white !important;
	height:24px;
	text-align:center;
}


.lianja_ui_page_navigationpanel_divider
{
	background:lightgray !important;
	color:black !important;
}


.lianja_ui_page_navigationpanel_item
{
	background:white !important;
	color:black !important;
}


/* section */
.lianja_ui_section
{
	background:beige !important;
}


.lianja_ui_section_header 
{
	background:darkgray !important;
	color:white !important;
	border-bottom:1px solid black;
}


.lianja_ui_section_header a
{
	background:darkgray !important;
	color:white !important;
}


.lianja_ui_section_searchpanel
{
	background:lightgreen;
	color:white;
}


.lianja_ui_section_menu
{
	background:green !important;
	color:yellow !important;
}


.lianja_ui_section_footer
{
	background:pink;
	color:white;
}


/* form */
.lianja_ui_section_form
{
}


.lianja_ui_section_formitem
{
	border-bottom:1px solid wheat !important;
}


.lianja_ui_section_formitem_label
{
	background:beige !important;
	color:black !important;
}


.lianja_ui_section_formitem_data
{
	background:beige !important;
	color:black !important;
}


/* grid */
.lianja_ui_section_grid
{
	font-size:larger;
}


.lianja_ui_section_grid_heading
{
	height:30px !important;
}


.lianja_ui_section_grid_menubar
{
	background:lightgray;
	color:white;
	border-bottom:1px solid gray;
}


.lianja_ui_section_grid_container
{
	top:60px !important;
}


.lianja_ui_section_grid_row
{
	height:30px;
}


.lianja_ui_section_grid_cell
{
}


.lianja_ui_section_grid_summary
{
}


.lianja_ui_section_grid_actionbar
{
	background:white !important;
}

And the resultant Web App.



Changing the theme changes the UI appearance without needing any code changes. So if you want to increase fonts or change the color scheme just specify a CSS theme.

[barrymavin]

UI theming in 6.3 in all its glory.

Build your App visually with NoCode. Customize its appearance using LowCode (CSS).

https://drive.google.com/file/d/1FAwaQuSoRgqQ9aNju8tkJFQCtZJxXy3_/view