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.

Attachment 370

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.

Attachment 371

The CSS file for the section is as follows:

Attachment 372

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.

How do we reference the header of a gadget or section in the CSS file?

Thanks.

Herb

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"] { ... }

Hi Barry,

I need a hand with this.


I am trying to have the header all one backcolor.

Quote:

---

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.

HerbAttachment 494

Hi Herb,

turn off off the header gradient in the section attributes and just set the background color.

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

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!