Applying ID on certain objects

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.

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.

Code:

---

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;}

---

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.

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 { ... }

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"] { ... }