Results 1 to 2 of 2

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

  1. #1
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    6,461
    Blog Entries
    14

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

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

    The UI theme is specified in CSS.

    Name:  Screen Shot 2021-10-20 at 11.18.25 AM.jpg
Views: 106
Size:  108.1 KB


    Here is a sample theme file:

    Code:
    /* 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.

    Name:  Screen Shot 2021-10-20 at 11.13.04 AM.jpg
Views: 112
Size:  81.5 KB

    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.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  2. #2
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    6,461
    Blog Entries
    14
    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

    Name:  Screen Shot 2021-10-25 at 1.51.43 PM.jpg
Views: 30
Size:  104.0 KB
    Last edited by barrymavin; 2021-10-25 at 03:12.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Journey into the Cloud
Join us