Results 1 to 7 of 7

Thread: Lianja Tip: Styling and theming in a few simple steps

  1. #1
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,734

    Lianja Tip: Styling and theming in a few simple steps

    Building Apps in Lianja is all about "thinking".

    You lay out an App as pages. Pages are then laid out in sections and sections as fields and gadgets.

    When developing an App don't concern yourself about the visual appearance while you are "thinking" through how the App should look. Rather, think about how the data is related together -- just as the simple lianjademo app does which has customers, customers have orders, and orders have order details -- and these are all related together visually.

    Once you have the basic App functionality in place and you can navigate and search through the data with the expected results, the final step is to "skin" or "style" the App to make it look pretty.

    In this example I will show you how to style an App to make it appealing to end users. In this particular example I have purposely made everything large so it is tablet/touch friendly.

    So now let's create an App that looks like this in a few simple steps.

    Name:  Screen Shot App.jpg
Views: 166
Size:  143.7 KB

    Step 1:

    Create a new App and select the southwind database

    Step 2:

    Drag the "Customers" table onto the page

    Step 3:

    Double click the section header and change the section attributes as shown below.

    Name:  Screen Shot attributes.jpg
Views: 168
Size:  133.6 KB

    The CSS file for the section is as follows:

    Name:  Screen Shot CSS.png
Views: 165
Size:  42.8 KB

    So as you see you can skin the whole UI. You should not concern yourself with the visual appearance too much as you develop an App. Its all an iterative process of improvement and refinement and most of the UI can be "beautified" after you have the basic App functionality in place.

    Enjoy.
    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
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,207
    How do we reference the header of a gadget or section in the CSS file?

    Thanks.

    Herb

  3. #3
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,734
    Hi Herb,

    For the section header.

    QLabel[lianja_ui_section_header="1"] { ... }

    For the labels of a form item.

    QLabel[lianja_ui_section_formitem_label="1"] { ... }

    For the data of a form item.

    QLabel[lianja_ui_section_formitem_data="1"] { ... }

    For the actual form item container (containing label and data)

    QLabel[lianja_ui_section_formitem="1"] { ... }
    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

  4. #4
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,207
    Hi Barry,

    I need a hand with this.


    I am trying to have the header all one backcolor.

    QLabel[lianja_ui_section_header="1"] {
    background:lightblue;border-color:blue;
    }

    lianja_ui_section, lianja_ui_section *{
    background: lightblue;
    }
    I cant get Lianja to pick up the Section_header piece,so I think I am doing something wrong.
    Thanks.

    HerbName:  background.jpg
Views: 112
Size:  16.5 KB

  5. #5
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,734
    Hi Herb,

    turn off off the header gradient in the section attributes and just set the background color.
    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

  6. #6
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,207
    Hi Barry,

    I am setting up a stylesheet to use across several applications.
    I understand I can do it one section at a time, but wanted to be able to change my themes on the fly.

    If this is not doable at the moment, I can create an ER. It's not something that is worth sidetracking the Dev effort.

    Herb

  7. #7
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,734
    Hi Herb,

    yes thats a good idea. It should be changing the section header based on your CSS. Submit an ER so it gets on the list.

    have a great holiday!
    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