Results 1 to 5 of 5

Thread: Applying ID on certain objects

  1. #1
    Junior Member
    Join Date
    Aug 2014
    Posts
    4

    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.

  2. #2
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,770
    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;}
    Last edited by barrymavin; 2014-12-29 at 23:19.
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  3. #3
    Junior Member
    Join Date
    Aug 2014
    Posts
    4
    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.

  4. #4
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,770
    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 { ... }
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

  5. #5
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,770
    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"] { ... }
    Principal developer of Lianja, Recital and other products

    Follow me on:

    Twitter: http://twitter.com/lianjaInc
    Facebook: http://www.facebook.com/LianjaInc
    LinkedIn: http://www.linkedin.com/in/barrymavin

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Journey into the Cloud
Join us