CSS
Under Construction
Contents
See Also
QT Style Sheets Reference, QT Style Sheets Syntax, W3Schools CSS
Introduction
Defining
- The Attribute in the Attributes App Inspector tab or Attributes Dialog is CSS Style.
- The name for use with setAttribute() and getAttribute() is cssStyle.
- Using Lianja.get(), the property is stylesheet or css.
- For custom coding using the Lianja UI Framework the property is stylesheet or css.
The attribute/property 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
Alternatively, it can be set to a character string. Each property definition is terminated with a semi-colon (;):
border: 2px solid green; font: bold italic large "Times New Roman";
Note: as well as the primary CSS Style attribute the following can also be defined:
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)
Selectors
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.
Note: this corresponds to the Name attribute in the Attributes App Inspector tab or Attributes Dialog.
Each UI element is given a unique object id.
Page is the pageid.
Section is pageid + "_" + sectionid
Formitem is pageid + "_" + sectionid + "_" + formitemid;
e.g.
#page1_section1_field1
Note: a 'formitem' can be a Form Section Field or Gadget or a Canvas Section Advanced Control.
In Custom Sections, the elements use the "name" property that you assign to them.
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.
[user_attr1="1"] { color:red; } [user_attr1="16"] { color:blue; }
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"]