CSS

Under Construction

See Also

QT Style Sheets Reference

QT Style Sheets Syntax

W3Schools CSS

Introduction

Lianja Apps can be styled using CSS to your preferred theme or themes.

Defining

Use the CSS Style Attribute in the App Inspector Attributes tab or Attributes Dialog to specify the CSS properties.

CSS Style can be set to the name of a CSS file.

Use the 'app:/' prefix for a CSS file in the App:

CSS Style: app:/myapp.css

and the 'lib:/' prefix for a CSS file in the library.

CSS Style: lib:/myapp.css

The CSS file can contain CSS property definitions for a single UI element, multiple elements or for the whole App or multiple Apps. In the App Settings, the App CSS Style file will be created in the library by default, allowing the same CSS file to be used by multiple Apps.

Alternatively, CSS Style can be set to a character string. Each property definition is terminated with a semi-colon (;), for example:

CSS Style: border: 2px solid green; font: bold italic large "Times New Roman";

To access CSS Style in code using setAttribute() and getAttribute() the attribute name is cssStyle.

Lianja.get("page1.section1.field1").setAttribute('cssStyle','border: 2px solid green;
 font: bold italic large "Times New Roman";')

? Lianja.get("page1.section1.field1").getAttribute('cssStyle')

As well as the primary CSS Style attribute the following subcontrol styles can also be defined (the setAttribute() / getAttribute() attribute names are shown in brackets where available):

App:

• Page defaults:
  • Navigation bar CSS
  • Page menu CSS
• Section defaults:
  • Header CSS
  • Section CSS

Page:

• Navigation Panel: CSS Style (leftSidebarTreeStylesheet)

Section:

• Header: Header CSS Style (headerCssStyle)
• Subtitle: CSS Style (subtitleCssStyle)
• Footer: Footer button CSS (footerButtonCss)

Checklistview Gadget:

• Data: CSS Style (gadgetCssStyle)

Grid Gadget:

• Data: CSS Style (gadgetCssStyle)

Treeview Gadget:

• Data: CSS Style (gadgetCssStyle)

Listview Gadget:

• Data: CSS Style (gadgetCssStyle)

Custom Sections and Gadgets In Custom Sections and Custom Gadgets using the Lianja UI Framework, the equivalent property is stylesheet (css is also supported).

Selectors

In CSS files, selectors define the individual object or type of object to be styled.

Universal Selector

The asterisk (*) selects all objects.

It can be used on its own:

* {
	font:italic bold 12px/30px Georgia, serif;
}

or following an ID or Type selector to specify that properties should be cascaded to all objects lower in the hierarchy:

lianja_ui_page * {
	font: italic bold 12px/30px Georgia, serif;	
	background:black;
	color:white;
}

or preceding a Property selector to specify that it should apply to all objects with that property value:

* [user_attr1="16"] {
	border: 20px solid red; 
}

Note that this is the default behavior, so the * is not required.

ID Selectors

The ID selector #id selects by object name. For example:

#page1_section1_field1

In an App, each UI element is given a unique object id.

Page: pageid (Page 'name' attribute).

Section: pageid + "_" + sectionid (Section 'name' attribute).

Formitem: pageid + "_" + sectionid + "_" + formitemid (Form Section Field/Gadget or Canvas Section Advanced Control 'name' attribute).

#page1 * {
	background:black;
	color:green;
}
#page1_section1 * {
	background:blue;
	color:red;
}
#page1_section1_field1 * {
	background:red;
	color:yellow;
}

Custom Sections and Gadgets In Custom Sections and Custom Gadgets using the Lianja UI Framework, the elements use the name property that you assign to them.

#nShipperID {
	background:blue;
	color:yellow;
}

Type Selectors

Type selectors select by object type.

Pages, Sections and Formitems

The following selectors can be used for Lianja Pages, Sections and Formitems:

Page:

Selector	UI Element
lianja_ui_page	Lianja Page
[lianja_ui_page_footer]	Lianja Page footer
[lianja_ui_page_header]	Lianja Page header
[lianja_ui_page_panel]	Lianja Page main panel
[lianja_ui_page_sidebar]	Lianja Page left and right sidebars

Section:

Selector	UI Element
lianja_ui_section	Lianja Section
[lianja_ui_section_footer]	Lianja Section footer

Formitem:

Selector	UI Element
lianja_ui_section_formitem	Lianja Formitem (Fields, Gadgets, Advanced Controls)
[lianja_ui_section_formitem_data]	Lianja Formitem data
[lianja_ui_section_formitem_label]	Lianja Formitem label (caption)
[lianja_ui_section_formitem_separator]	Lianja 'Horizontal Separator' Formitem

UI Framework

The following selectors can be used for Advanced Canvas Controls and Lianja UI Framework classes in Custom Sections and Custom Gadgets:

Selector	Canvas Control	Class	Subcontrols
lianja_ui_checkbox	CheckBox	Checkbox
lianja_ui_combobox	ComboBox	Combobox	lianja_ui_combobox::down-arrow
lianja_ui_commandbutton	CommandButton	Commandbutton
lianja_ui_container		Container
lianja_ui_control		Control
lianja_ui_datetextbox	Date TextBox	Datetextbox	lianja_ui_datetextbox::down-arrow
lianja_ui_datetimetextbox	DateTime TextBox	Datetimetextbox	lianja_ui_datetimetextbox::down-arrow
lianja_ui_editbox	Editbox	Editbox
lianja_ui_editor		Editor
lianja_ui_form		Form
lianja_ui_grid		Grid	lianja_ui_grid::item
lianja_ui_label	All (see note)	Label
lianja_ui_listbox	ListBox	Listbox
lianja_ui_menu		Menu
lianja_ui_menubar		MenuBar
lianja_ui_menuitem		MenuItem
lianja_ui_optionbutton	OptionButton	Optionbutton
lianja_ui_pageframe *		Pageframe	lianja_ui_pageframe * applies to the Pageframe and its Pages. See also QTabBar and QTabBar::tab.
lianja_ui_popupmenu		Popupmenu
lianja_ui_progressbar	Progress Bar	Progressbar
lianja_ui_richeditbox	Rich Text Editor	Richeditbox
lianja_ui_spinner	Spinner	Spinner	lianja_ui_spinner::down-arrow | lianja_ui_spinner::down-button lianja_ui_spinner::up-arrow | lianja_ui_spinner::up-button
lianja_ui_splitter		Splitter
lianja_ui_tabpage		Page
lianja_ui_textbox	TextBox Numeric TextBox	Textbox
lianja_ui_toolbar		Toolbar
lianja_ui_toolbox		Toolbox
lianja_ui_tree	TreeGrid	Tree	lianja_ui_tree::branch lianja_ui_tree::item

Note: lianja_ui_label selects:

• All Advanced Canvas Controls
• Form Section Fields and Gadgets
• Page Headers and Sidebars
• Custom Section panel

Others

Selector	Applies to
QHeaderView::section QHeaderView::section:first QHeaderView::section:middle QHeaderView::section:last	BROWSE, Grid Object and Grid Section column headers
QTableView::item	BROWSE, Grid Object and Grid Section cells
QTableCornerButton::section	Grid Object top left corner button
QTabBar	Pageframe or TabView Section tab bar
QTabBar::tab	Tab in a Pageframe or TabView Section tab bar
QSplitter::handle	Splitter handle used to position the split

Property Selectors

Selectors may be based on the value of a 'custom attribute' or user-added property.

For example, a Form Section Field has a custom attribute defined:

Custom attributes: attr1=16

'Custom attributes' can be found at the bottom of the Data section in the Attributes dialog or App Inspector Attributes tab.

The CSS file has the following entry which will be applied to the Field:

[user_attr1="16"] {
	color:blue; 
}

Note that the custom attribute is 'attr1' and that it is referred to in the CSS selector as 'user_attr1'. Also, that the value should be in quotes - here "16".

Custom attributes should also have the 'user_' prefix specified when accessed using Lianja.get(), i.e.

Lianja.get("page1.section1.field1").user_attr1

The same Property Selector above will also be applied to a Checkbox Gadget where the property and its value have been set using the addProperty() method.

oCheck = Lianja.get("page1.section1.field10")
oCheck.addproperty("user_attr1","16")

Note that here the property is 'user_attr1', matching the name in the CSS selector.

UI State Selectors UI State Selectors are special built-in Property Selectors for editable Formitems.

Select based on whether the 'Mandatory input' attribute (mandatory) is true or false:

[lianja_uistate_mandatory="true"]

[lianja_uistate_mandatory="false"]

For example:

[lianja_uistate_mandatory="true"]{
	border: 2px solid blue;
}

[lianja_uistate_mandatory="false"]{
	border: 2px solid yellow;
}

Note: the [lianja_uistate_mandatory="true"] properties apply when the Formitem is in edit mode.

Select based on whether 'Validation' (validation) returned true or false:

[lianja_uistate_valid="true"]

[lianja_uistate_valid="false"]

For example:

[lianja_uistate_valid="true"]{
	background:green;
}

[lianja_uistate_valid="false"]{
	background:red;
}

Pseudo-State Selectors

Selectors may contain pseudo-states. They are prefixed with a colon (:).

checked

lianja_ui_checkbox:checked {
	border:3px solid blue;
}

closed

lianja_ui_tree::item:closed {
     border: 2px solid red;
}

first

lianja_ui_tree::item:first{
     border-left: 3px solid orange;
}

hover

lianja_ui_grid::item:!hover { 
	background:pink;
}
lianja_ui_grid::item:hover { 
	background:yellow;
}

and combined with pressed:

lianja_ui_commandbutton:!hover { 
	background:red;
}
lianja_ui_commandbutton:hover:!pressed { 
	background:orange;
}
lianja_ui_commandbutton:hover:pressed { 
	background:green;
}

last

lianja_ui_tree::item:last {
     border-left: 3px solid green;
}

open

lianja_ui_tree::item:open {
     border: 2px solid green;
}

pressed

lianja_ui_commandbutton:!pressed { 
	background:orange;
}

lianja_ui_commandbutton:pressed { 
	background:green;
}

selected

lianja_ui_tree::item:selected {
     border-left: 3px solid blue;
}

selected can also be combined with position pseudo-state selectors:

lianja_ui_tree::item:first:selected {
     border-left: 3px solid red;
}
lianja_ui_tree::item:last:selected {
     border-left: 3px solid yellow;
}

unchecked

lianja_ui_checkbox:unchecked {
	border:3px solid yellow;
}