CSS styling tip

[barrymavin]

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



*[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.

[hmischel@diligentsystems.com]

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

[HankFay]

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.


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.

[barrymavin]

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.

[hmischel@diligentsystems.com]

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

[hmischel@diligentsystems.com]

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

[barrymavin]

Hi Herb,

Try this in your CSS "stylesheet".



lianja_ui_listbox {
alternate-background-color: yellow;
}

[hmischel@diligentsystems.com]

Hi Barry,

No luck using alternate-background-color.

Thanks.

Herb

[barrymavin]

Hi Herb,

Yes I just tried it. Seems backcolor-color works but not alternate-background-color.

[barrymavin]

Seems I had it disabled. I have enabled it now so that CSS attribute should now work.

[hmischel@diligentsystems.com]

Fantastic.

I have a client that has a suite of tools that need to all have the same look and feel.

This may seem picayune, but how would I change the scroll bar layout? I do believe there is a CSS property for that.

Thanks.

Herb

[barrymavin]

Seeing as the Lianja Desktop Client is build on top of the Qt GUI framework you have access to all the Qt CSS styling... So just set this CSS on your listbox.

The reason behind the preferred use of lianja_ui_controlname is so that the CSS can be applied to Lianja Web and Lianja Mobile Clients.

For your desktop listbox...



QScrollBar:vertical {
border: 2px solid grey;
background: #32CC99;
width: 15px;
margin: 22px 0 22px 0;
}
QScrollBar::handle:vertical {
background: white;
min-height: 20px;
}
QScrollBar::add-line:vertical {
border: 2px solid grey;
background: #32CC99;
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}


QScrollBar::sub-line:vertical {
border: 2px solid grey;
background: #32CC99;
height: 20px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
border: 2px solid grey;
width: 3px;
height: 3px;
background: white;
}


QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}

[hmischel@diligentsystems.com]

That is fantastic.

Thank you very much.

[hmischel@diligentsystems.com]

I am able to mix the QT styling with the Lianja styling.

This scrollbar is very close to what I am looking for.

If anyone wants the CSS for this, let me know.

Herb477

[HankFay]

Hello, Lianja would like it. :)

[hmischel@diligentsystems.com]

I find myself coming back to this post often :)