Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: CSS styling tip

  1. #1
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,771

    CSS styling tip

    In Lianja it is possible to style UI elements with CSS that have specific attributes.

    Code:
    *[com_mycompany_mandatory="true"] { border:1px solid red; }
    You can use the AddProperty() method (which is a core method on each Lianja UI class) to add a property/attribute. These are case sensitive and I recommend that you use a standard naming convention so as not to interfere with internal properties and those of other third party components.

    These can be used very effectively in the Lianja UI state machine.

    Almost all UI controls that are composite (made up of other controls such as scrollbars etc) can have each of their UI elements skinned.

    More on this later.
    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

  2. #2
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,214
    Hi Barry,

    In a custom gadget:

    I have the option of putting my CSS on the object directly, like so;

    Button1.stylesheet = "background: white; border: 4px solid #2672EC"
    And I also have the option to specify a .CSS stylesheet for the entire gadget.

    How do I reference the individual items in my CSS stylesheet.

    Somehow, I am thinking something like the below should work.

    #button1{
    "background: white; border: 4px solid #2672EC"
    }
    Whats the correct way to do this?

    Thanks.

    Herb

  3. #3
    Lianja MVP
    Join Date
    Feb 2012
    Location
    Berea, KY, USA
    Posts
    1,948
    Quote Originally Posted by hmischel@diligentsystems.com View Post
    Hi Barry,

    In a custom gadget:

    I have the option of putting my CSS on the object directly, like so;



    And I also have the option to specify a .CSS stylesheet for the entire gadget.

    How do I reference the individual items in my CSS stylesheet.

    Somehow, I am thinking something like the below should work.



    Whats the correct way to do this?

    Thanks.

    Herb
    If I understand Barry correctly, using his example you would include the line he has in the CSS stylesheet either for the app, page, or section.

    You would then, for any object you wanted (and wouldn't it be nice to subclass them so that all textboxes, e.g., had this attribute set by default to .F.) with the com_mycompany_mandatory property. Setting it to .T. would cause it to have the properties set in the CSS Selector (the second part of the code).

    By doing it this way, you can the dynamic aspect for nothing: you aren't having to change the setting.

    The great thing is that this could all be put in a builder. Let's say you have a textfield called "myskinner". I tested in a form section, but should work everywhere.

    Code:
    lo = lianja.get("myskinner")
    lo.addproperty("com_mycompany_mandatory",.T.)
    ? lo.com_mycompany_mandatory
    Put Barry's code in the CSS file hierarchy, and viola!

    hth,

    Hank

    PS: you might already know all of this, being way ahead of me in the UI game. It took me 10 times around the barn for it to sink in, frankly, so I apologize if this just repeated everything you already knew.

  4. #4
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,771
    As it turns out each control is given a unique object name when the app is loaded. This name is constructed as:

    pagename_sectionname_formitemname

    So you can just use these names as you would in web apps by prefixing them with a # e.g. #page1_section1_field1

    All UI classes that are used in Lianja are prefixed with lianja_ui_ and postfixed with the framework classname e.g. lianja_ui_textbox

    So you can reference these in CSS by prefixing them with a dot e.g. .lianja_ui_textbox

    As hank mentioned special selectors can also be used.
    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
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,214
    Now we are cooking with gas!

    Hank,

    and wouldn't it be nice to subclass them so that all textboxes, e.g., had this attribute set by default to .F.)
    One of the reason I love the custom gadgets is the degree of control. I just include the property in the class definition with a defaults set to .F.

    Does the commandbutton expose a mouseover/hover property? I am trying to figure out how to change the property when the mouse moves over the button in custom section.

    Something like we see in the customcanvas CSS.

    QPushButton:hover:!pressed {
    background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #88d, stop: 0.1 #99e, stop: 0.49 #77c, stop: 0.5 #66b, stop: 1 #77c);
    color: white;
    font-weight:bold;
    padding-left: 0px;
    border-radius: 5px;
    font-size:10px;
    }

  6. #6
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,214
    I think this may have already been answered, but I can't recall.

    If I wanted to specify alternating background colors on a listbox, how would I do that?

    Thanks.

    Herb

  7. #7
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,771
    Hi Herb,

    Try this in your CSS "stylesheet".

    Code:
    lianja_ui_listbox {
         alternate-background-color: yellow;
     }
    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

  8. #8
    Senior Member
    Join Date
    Feb 2012
    Posts
    1,214
    Hi Barry,

    No luck using alternate-background-color.

    Thanks.

    Herb

  9. #9
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,771
    Hi Herb,

    Yes I just tried it. Seems backcolor-color works but not alternate-background-color.
    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

  10. #10
    Lianja Development Team barrymavin's Avatar
    Join Date
    Feb 2012
    Location
    UK, USA, Thailand
    Posts
    5,771
    Seems I had it disabled. I have enabled it now so that CSS attribute should now work.
    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

Page 1 of 2 12 LastLast

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