[Answers] CSS and theme-1

Printable View

2015-02-11, 14:09
josipradnik

[Answers] CSS and theme-1

you don't need to specify -webkit or -moz anywhere in the CSS.

Add it as a page.cssstyle, e.g.

Code:

################################################## ############## # Page attributes page.id= page.headerbottomborder=true page.headerbottombordercolor=#33b5e5 page.backgroundimage= page.backcolor= page.forecolor= page.css= page.gradient=false page.gradienttype=0 page.gradientfromcolor= page.gradienttocolor= page.margin= page.cssstyle=lianja_ui_textbox[readOnly="true"]{background:lightgray;}

Q:
can we do the following settings all in one place in the app CSS?
a) Set the page and section headers colors in app CSS
b) Set the subtitle colors in app CSS
c) Set the page and section footer colors in app CSS
d) Set the grid headers colors in app CSS
e) Set the disabled fields colors in app CSS
A:
The whole of a Lianja App is arranged as a hierarchy of UI elements with CSS selectors that give you the ability to theme the App based on the App CSS file. In versions prior to v1.3 you need to create a .theme file which sets the app.css=lib:/myapp.css. In v1.3 the App CSS can be specified in the App Settings.
The UI hierarchy is arranged as follows along with the CSS selectors below.
App
-- Page
---- Page header *[lianja_ui_page_header="1"] { ...css... }
------ Page panel *[lianja_ui_page_panel="1"] { ...css... }
-------- Section
---------- Section header *[lianja_ui_section_header="1"] { ...css... }
---------- Section menu *[lianja_ui_section_menu="1"] { ...css... }
---------- Section subtitle *[lianja_ui_section_subtitle="1"] { ...css... }
---------- Section search panel *[lianja_ui_section_search="1"] { ...css... }
---------- Section panel *[lianja_ui_section_panel="1"] { ...css... }
------------ Form section Formitem *[lianja_ui_section_formitem="1"] { ...css... }
-------------- Label *[lianja_ui_section_formitem_label="1"] { ...css... }
-------------- Data *[lianja_ui_section_formitem_data="1"] { ...css... }
---------- Section footer *[lianja_ui_section_footer="1"] { ...css... }
---- Page footer *[lianja_ui_page_footer="1"] { ...css... }
Each Lianja UI class has a unique selector which can be used in CSS. e.g.
lianja_ui_textbox
lianja_ui_checkbox
lianja_ui_grid
etc
e.g.
lianja_ui_textbox { ...css... }
Disabled field colors can be set in the App Settings (there is an attribute for that).
As Lianja is built on top of Qt the Qt CSS is well documented at:
http://qt-project.org/doc/qt-4.8/stylesheet-syntax.html
http://qt-project.org/doc/qt-4.8/sty...reference.html
So in fact there is a lot that you can do to theme your App without having to hand code it.

Q:
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?
A:
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;}

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

Q:
give these buttons a 3D effect
A:
I believe your code is skinning these with CSS already which overrides the native operating system look and feel.
Commenting out the CSS in your code will return to native windows command buttons.
You can also set the gradients in the CSS. I have already posted a link to the Qt stylesheet CSS reference in another post. You need to look for qlineargradient.
Here is an example setting the background color as a gradiented color. You can experiment to achieve the effect that you desire.
ui_commandbutton.css = "background: qlineargradient(spread: pad, x1:0 y1:0, x2:1 y2:1, stop:0 rgba(0, 0, 0, 255), stop:1 rgba(255, 255, 255, 255));"

http://www.lianja.com/community/atta...9&d=1419574764

Q:
I want my .jssp page to have the same look and feel as the JavaScript canvas in the browser.
I was thinking that it might be a good idea to have the default CSS page included when you create an jssp or rsp page.
Either way, I would like to include it in my pages.
Whats the recommended way.
A:
Just include the bootstrap css file from ../library/bootstrap/ in the html that you output in the .jssp page.
The LianjaWebFramework does quite a lot more than bootstrap itself as it merges jquery mobile and bootstrap and conditionally overrides some CSS and applies it to the HTML5 to produce a consistent and modern UX

Q:
I am looking to apply CSS into a page, so I would like a list of objects in which I am able to apply CSS to. Is there a way to bring up a list of available objects in a page to apply CSS to, in terms of legal variables? For example, I want to see what is the equivalent of first-child/nth child.
Also, is there a list of attributes that are legal for each type of object? Recently I noticed that font-(attribute) attributes don't work.
A:
CSS cascades down through the UI hierachy.
You can apply CSS at the App, Page, Section or Formitem level. Only the UI items that match the CSS selectors will be affected.
You can also create themes and apply a theme to the complete UI hierachy by selecting the theme from the Form Tools Bar or assigning it to Lianja.theme.
So, the basis behind CSS is to match UI elements based in CSS selectors.

Lianja desktop apps are built on top of Qt widgets. You can study the various ways CSS can be described at:
http://qt-project.org/doc/qt-4.8/sty...-examples.html
All of the core Lianja UI elements subclass Qt widgets.
The Lianja UI framework uses CSS selectors to be able to theme your Apps.
So, you can apply CSS rules based on UI selectors.
e.g.
lianja_ui_page
lianja_ui_section
lianja_ui_formitem
lianja_ui_formitem_label
lianja_ui_formitem_data
lianja_ui_textbox
etc

if if you define a theme and select it from the Form Tools Bar then these are permanent changes. They are also effective when Web/Mobile Apps are generated.

The theme is a property on the Lianja system object,
Lianja.theme = "nameoftheme"

That's what themes are for.
They are only relevant in desktop apps. Any Web/Mobile is statically generated HTML5/Javascript. In that case the UI presentation rules affect the UI layout.
There is an obvious architectural difference between a desktop app and a three tier Web/Mobile App that has a clear separation between the presention level UI, the business procedures and the database access.

All topics in [Answers] alphabetically: http://www.lianja.com/community/show...ll=1#post12352
This same topic is extended to another thread: http://www.lianja.com/community/show...SS-and-theme-2
2016-10-20, 02:39
josipradnik

you can design you own "themes" and apply them to your Apps. The c:\lianja\themes directory contains some sample themes.

Q:
In a custom VFP Section.
I have some buttons which I style in my stylesheet usingCode:

Code:

lianja_ui_commandbutton{}

I have class named clsBtnBlue.
Whats the correct way to reference that in css file?
A:
In the case of custom controls in custom sections you should use "Property selectors". See below.

Code:

btn = createObject("CommandButton") // you can add custom properties to any object like this btn.btnstyle = "1" // now in your CSS you can apply CSS depending on the value of custom properties btn.css = 'lianja_ui_commandbutton["btnstyle"="1"] { color: red; } lianja_ui_commandbutton["btnstyle"="2"] { color: blue; }'

Note that the property selectors should be lower case.

You can use global CSS styles by specifying the CSS file in the App, Page, Section attributes.
If you are changing the properties and you want the CSS to be reapplied issue a redraw() on the object.

For those who, like myself, need a visual designer to create html pages, and want those pages to responsive (as when they are used in webviews in Lianja), here's a very useful review of visual designers that work with bootstrap (which as Barry has pointed out is used by Lianja itself): http://tutsme-webdesign.info/best-bo...visual-editor/

Short take on the article: Pinegrow Editor, which is available for Win/Mac/Linux, looks like a winner on several counts. It's not free,but is cheap. http://pinegrow.com/
producing webviews that will play nice at different sizes. In my case, I need to present original documents that can be pair up with a .css template that incorporates bootstrap so the documents resize.

I've worked with Dreamweaver and while in theory it can do the same things, the control just isn't there. (Besides: Pinegrow costs less than one month of Creative Cloud.) I was able to produce what I needed (a custom report), but it was way too much work.Having an easy-to-use IDE for css with everything in live design at multiple device views let's me get it right in much less time than I spent with Dreamweaver having to click here and there, and then redo, etc. My conclusion from that experiment was that designing was better off done directly with the CSS -- which I ended up doing in DW, although that also was a pain because of the lack of an overall view of CSS -- something Pinegrow does very well.

Now, unless you have a need for fancy menus or documents in webviews or fancy dashboards, and they have to adjust to device size, there's probably no need to bother with CSS at all. But if you want to make fancy things like Herb does, and you (like I) don't have his visual imagination abilities, a visual design editor incorporating bootstrap or angular or whatever will get you (and me) at least part way there. <s>

What's really great is how we can, with little effort (in Pinegrow it's a matter of specifying the data target for an element) integrate this with the Lianja data framework. And have the webview itself handled by the Lianja framework. It's the best of both worlds.

Q:
I want my .jssp page to have the same look and feel as the JavaScript canvas in the browser.
I was thinking that it might be a good idea to have the default CSS page included when you create an jssp or rsp page.
Either way, I would like to include it in my pages.
A:
Just include the bootstrap css file from ../library/bootstrap/ in the html that you output in the .jssp page.
The LianjaWebFramework does quite a lot more than bootstrap itself as it merges jquery mobile and bootstrap and conditionally overrides some CSS and applies it to the HTML5 to produce a consistent and modern UX.

Q:
Is it possible that I change a command button's CSS under certain condition such as the following. Eg: Upon clicking "Btn1", it called "proc proc1". Can I change "Btn1" background color to blue in proc1?

Code:

page1_container_bottom2.addobject("page1_container _btn1", "commandbutton") page1_container_btn1.fixedheight = 50 page1_container_btn1.text = "Btn1" page1_container_btn1.fontsize = 18 page1_container_btn1.click = proc1 page1_container_btn1.css = "background:red;" proc proc1 //page1_container_btn1.css = "background:blue;" endproc

A:
Create your own button class with a click event that changes the background.

Put this code after the enddefine in the custom section.

Code:

define class mybutton as commandbutton proc click() if this.css = "background:blue;" this.css = "background:red;" else this.css = "background:blue;" endif endproc enddefine

Then when you addobject, use your class and not the default one.
so it will look like this.

Code:

page1_section2.addobject("page1_container_btn1", "mybutton") page1_container_btn1.css="background:red" page1_container_btn1.fixedheight = 50 page1_container_btn1.text = "Btn1" page1_container_btn1.fontsize = 18page1_container_btn1.css = "background:red;"

Here's a quick way to create buttons and add the built-in Icons.
You can also customize the CSS style interactively.
http://www.tutorialrepublic.com/twit...-generator.php

The Free tutorials are here. http://www.tutorialrepublic.com/twit...trap-tutorial/

For those that are looking to save time, have a look at the https://wrapbootstrap.com/
There are a lot of fantastic pre-built themes that you can use to style your app. I personally am using it for Ideas

They are not free, but cost between 10 and 20 USD.
Of course, there are a zillion free plugins too of course.

Here's one site that I really like for freebies.
http://www.jqueryscript.net/

Q:
How would I specify the different parts of the grid in a style sheet?
I can deduce that lianja_ui_grid is the main component
A:
Have a look at lianja_ui_grid::item

Code:

lianja_ui_grid::item { border: 2px solid red; } lianja_ui_grid::item:selected { border: 2px solid blue; } lianja_ui_grid::item:!hover { background:ink; } lianja_ui_grid::item:hover { background:yellow; }

All topics in [Answers] alphabetically: http://www.lianja.com/community/show...p?2717-Answers
This same topic is extended to another thread: http://www.lianja.com/community/show...SS-and-theme-2
2017-11-29, 00:47
josipradnik

Q:
What is the syntax for the "style" clause in the Browse command?
A:
It takes a character string, but I believe it is for syntax compatibility only and is ignored.
If your Browse is in a Custom Section using the 'Custom BROWSE or EDIT command' attributes, it will inherit lianja_ui_grid and lianja_ui_grid::item CSS properties.

Code:

/* page1_cssstyle.css */ lianja_ui_grid { font: bold italic large "Times New Roman"; } lianja_ui_grid::item { border: 2px solid red; } lianja_ui_grid::item:selected { border: 2px solid blue; } lianja_ui_grid::item:!hover { background:pink; } lianja_ui_grid::item:hover { background:yellow; }

Q:
I see your page items can accept css styling, but is it possible to create one css stylesheet and simply link it?

A:
CSS in the Lianja wiki
Yes, the 'CSS Style' attribute can be set to a CSS string or the name of a CSS file. The 'app:/' and 'lib:/' prefixes can be used to reference the current App or the Lianja library respectively.

Q:
I would like to reference the caption of page in a pageframe in my css file.

A:
Use QTabBar::tab
https://www.lianja.com/community/att...7&d=1502283984

Q:
they want want to be able to create a UI using the very latest controls and toys from the PrimeNG library. This is why I raised the question about Angular 2 components in Lianja. It seemed like it should be possible

A:
I use RSP pages to serve json result sets to Kendo and Jquery objects.

This way, I get to leverage the existing data logic that is already in place, and the rest of team can work in the bootstrap themes that the designers have chosen.

Q:
If I use it to style the textbox and specify border in the CSS file, will it format the border of both the caption and the data or will it just format the border of the caption as with the attribute available? I am trying to get both the captions and data to appear with white text over a solid blue background.

A:
You need to use a CSS selector so that it only styles the textbox.
lianja_ui_textbox { ... }
To style an individual Canvas Section textbox:
CSS style: background: blue; color: white; border: blue;
Or to do all sections on a Page, edit the Page 'CSS Style' file:

Code:

lianja_ui_section * { background-color:blue; color:white; } lianja_ui_textbox { background: blue; color: white; border: blue; }

(Or for all sections in the App, put it in the App 'App CSS style' file.)

All topics in [Answers] alphabetically: http://www.lianja.com/community/show...ll=1#post12352
This same topic is extended to another thread: http://www.lianja.com/community/show...SS-and-theme-2
These answers are also systematized on the site "Lianja developer": https://lianjadeveloper.wordpress.co...css-and-theme/