Difference between revisions of "CSS"

Revision as of 11:42, 22 September 2016

Under Construction

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.

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"]