Results 1 to 2 of 2

Thread: App CSS

  1. #1
    Senior Member
    Join Date
    Jan 2014
    Posts
    348

    App CSS

    Hi Barry

    With the new App CSS in RC9, can we do the following settings all in one place in the app CSS?

    a) Set the page and section headers colors in app CSS

    b) Set the subtitle colors in app CSS

    c) Set the page and section footer colors in app CSS

    d) Set the grid headers colors in app CSS

    e) Set the disabled fields colors in app CSS

    Your advice is much appreciated

    Thanks & Best Regards

  2. #2
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,685
    Hi Tek Hong,

    The whole of a Lianja App is arranged as a hierarchy of UI elements with CSS selectors that give you the ability to theme the App based on the App CSS file. In versions prior to v1.3 you need to create a .theme file which sets the app.css=lib:/myapp.css. In v1.3 the App CSS can be specified in the App Settings.

    The UI hierarchy is arranged as follows along with the CSS selectors below.

    App
    -- Page
    ---- Page header *[lianja_ui_page_header="1"] { ...css... }
    ------ Page panel *[lianja_ui_page_panel="1"] { ...css... }
    -------- Section
    ---------- Section header *[lianja_ui_section_header="1"] { ...css... }
    ---------- Section menu *[lianja_ui_section_menu="1"] { ...css... }
    ---------- Section subtitle *[lianja_ui_section_subtitle="1"] { ...css... }
    ---------- Section search panel *[lianja_ui_section_search="1"] { ...css... }
    ---------- Section panel *[lianja_ui_section_panel="1"] { ...css... }
    ------------ Form section Formitem *[lianja_ui_section_formitem="1"] { ...css... }
    -------------- Label *[lianja_ui_section_formitem_label="1"] { ...css... }
    -------------- Data *[lianja_ui_section_formitem_data="1"] { ...css... }
    ---------- Section footer *[lianja_ui_section_footer="1"] { ...css... }
    ---- Page footer *[lianja_ui_page_footer="1"] { ...css... }

    Each Lianja UI class has a unique selector which can be used in CSS. e.g.

    lianja_ui_textbox
    lianja_ui_checkbox
    lianja_ui_grid
    etc

    e.g.

    lianja_ui_textbox { ...css... }

    Disabled field colors can be set in the App Settings (there is an attribute for that).

    As Lianja is built on top of Qt the Qt CSS is well documented at:
    http://qt-project.org/doc/qt-4.8/stylesheet-syntax.html
    http://qt-project.org/doc/qt-4.8/sty...reference.html

    So in fact there is a lot that you can do to theme your App without having to hand code it.
    Last edited by barrymavin; 2015-01-02 at 01:04.
    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