Applying ID on certain objects

[ys.chee]

In CSS, there is an ID function that allows certain objects to have different properties from the rest. How do you perform this in Lianja's CSS?

Thanks for reading.

[barrymavin]

What type of UI element are you wanting to apply the CSS to?

The CSS selector for a named object is #name

Each UI element is given a unique object name.

Page is the pageid.

Section is pageid + "_" + sectionid

Formitem is pageid + "_" + sectionid + "_" + formitemid;

e.g.

#page1_section1_field1

Custom elements use the "name" property that you assign to them.

A page is a hierarchy of UI elements each of which have the same object names so that a complete App can be themed.

#lianja_ui_page_header { ... }
#lianja_ui_page_panel { ... }
#lianja_ui_page_footer { ... }

#lianja_ui_section { ... }
#lianja_ui_section_panel { ... }

Each UI control has a unique selector corresponding to the type of control e.g.

lianja_ui_commandbutton { ... }

Here is an example that themes command buttons handling hover and click/touch visual appearance.

lianja_ui_commandbutton {text-decoration:none;border:2px solid #e2e2e2;color:#fff;background:#1d1d1d;cursor:pointer;text-align:center;}
lianja_ui_commandbutton:hover {background:#3a3a3a;}
lianja_ui_commandbutton:pressed {background:#219297;}

[ys.chee]

What I mean by ID is like you have several buttons, and while they all have the same format, I would like to single out a button, such as like the "OK" or "Cancel" button to have smaller font compared to the rest.

Is that sort of thing possible?

Thanks for reading.

[barrymavin]

If the command button is a custom button created in a custom section/gadget then assign a name to it as i already explained.

okButton.name = "okbutton"

then theme it using:

#okbutton { ... }

[barrymavin]

Also remember that a custom UI control can have custom properties.

myButton.addProperty("smallfont", "1")

Then you can theme using property selectors.

lianja_ui_commandbutton [smallfont="1"] { ... }