CSS
Under Construction
Contents
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:
app:/myapp.css
and the 'lib:/' prefix for a CSS file in the library.
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:
border: 2px solid green; font: bold italic large "Times New Roman";
The properties will be applied to that element and cascaded to elements lower in the hierarchy: Page->Section->Formitem.
To access CSS Style in code using setAttribute() and getAttribute() the attribute name is cssStyle.
Note: as well as the primary CSS Style attribute the following sub-component styles can also be defined (the setAttribute() / getAttribute() attribute names are shown in brackets):
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)
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.
ID Selectors
The ID selector for a named object is #id, 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_section1_field1 { background:red; color:white; }
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: Pages, Sections and Formitems
lianja_ui_page
[lianja_ui_page_footer]
[lianja_ui_page_header]
[lianja_ui_page_panel]
lianja_ui_section
[lianja_ui_section_footer]
lianja_ui_section_formitem
[lianja_ui_section_formitem_data]
[lianja_ui_section_formitem_divider]
[lianja_ui_section_formitem_gadget]
[lianja_ui_section_formitem_label]
[lianja_ui_section_formitem_separator]
[lianja_ui_section_formitem_subtitle]
Type Selectors: UI Framework
lianja_ui_checkbox
lianja_ui_combobox
lianja_ui_commandbutton
lianja_ui_container
lianja_ui_control
lianja_ui_datetextbox
lianja_ui_datetimetextbox
lianja_ui_editbox
lianja_ui_editor
lianja_ui_form
lianja_ui_grid
Sub-control: lianja_ui_grid::item
lianja_ui_header
lianja_ui_label
lianja_ui_listbox
lianja_ui_menu
lianja_ui_menubar
lianja_ui_menuitem
lianja_ui_navbar
lianja_ui_optionbutton
lianja_ui_pageframe
lianja_ui_pagesidebar
lianja_ui_popupmenu
lianja_ui_progressbar
lianja_ui_richeditbox
lianja_ui_spinner
lianja_ui_splitter
lianja_ui_tabpage
lianja_ui_textbox
lianja_ui_toolbar
lianja_ui_toolbox
lianja_ui_tree
Sub-control: lianja_ui_tree::item
Pseudo-State Selectors
Selectors may contain pseudo-states. They are prefixed with a colon (:).
hover
lianja_ui_grid::item:!hover { background:pink; } lianja_ui_grid::item:hover { background:yellow; }
Property Selectors
e.g.
A Form Section Field has a Custom Attribute defined:
Custom attributes: attr1=16
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
UI State Selectors
UI State Selectors are special built-in Property Selectors for Canvas Section editable Advanced Controls.
Select based on whether the Mandatory attribute is true or false:
[lianja_uistate_mandatory="true"]
[lianja_uistate_mandatory="false"]
Select based on whether Validation returned true or false:
[lianja_uistate_valid="true"]
[lianja_uistate_valid="false"]