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));"
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
Reply With Quote
Bookmarks