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')
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;
}
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;
}
https://www.lianja.com/doc/index.php/CSS
Lianja developer 