QSS Styling a QToolBox's Page.

ivan.todorovich

Hi,

I found out that targeting the page widgets can be a little tricky.
One would simply think that it would be easy as

@QToolBox > QWidget { }@

but no. The solution is this:

@
QToolBox > QScrollArea > QWidget > QWidget { }
@

QToolBox creates a QScrollArea for every page as a container, and QScrollArea has a viewport where it puts its widget. So your page isn't a direct children neither from QToolBox nor QScrollArea.

I hope this helps some of you..
Cya!

goetz

Good point. Would you mind creating a wiki page for it (in the "How To":http://developer.qt.nokia.com/wiki/Category:HowTo section)

ivan.todorovich

Ok.. i've created the wiki page. http://developer.qt.nokia.com/wiki/Style_a_QToolBoxs_Page_with_QSS

dangelog

Why are you using the child selector and not the descendant selector + an id/property selector (to avoid blindly matching every QToolBox subwidget)?

I.e.
@
QToolBox QWidget#myId { ... }
@

or

@
QToolBox QWidget[myProperty="true"] {...}
@

ivan.todorovich

i am not matching every QToolBox subwidget, just the page widgets..
because i may not necessary know the ids or the widgets nor want to select by a specific property.

@QToolBox > QScrollArea > QWidget > QWidget@
is very different to
@QToolBox QScrollArea QWidget QWidget@
That last one would match every QToolBox sub-widget.

I think you are mistaken--

dangelog

That's why I said
[quote]
an id/property selector (to avoid blindly matching every QToolBox subwidget)?
[/quote]

I.e.

@
QWidget *w = new QWidget;
w->setObjectName("MyWidget");
toolbox->addItem(w, "foo");
@

styled with

@
QToolBox QWidget#MyWidget { ... }
@

ivan.todorovich

What if you created the pages with QtDesigner?
And you want to target every QToolBox page. IE: Give they a white background-color.

dangelog

[quote]What if you created the pages with QtDesigner?
And you want to target every QToolBox page. IE: Give they a white background-color.[/quote]

You simply change each page's object name, or set a dynamic property on them with a value of yours. What I am pointing out is NOT that your solution doesn't work, but that requires how QToolBox is internally implemented. My solution instead "just works".

Check it out: http://qt.pastebin.com/4X2ZfHWz

Tedisito

Hey,
I tried the solution of peppe, it works but only in the Qt designer, then when you run the application the background color of the Qtoolbox page does not appear like in Qt Designer but with the grey color.
While in contrast, the solution of ivan works in both cases.

I am trying to make the page transparent but it seems that it does not work. Do you know why? And how to make the QToolBox page transparent?

Thank you

dangelog

@
#include <QtGui>

int main(int argc, char **argv)
{
QApplication app(argc, argv);

QToolBox toolBox;

for (int i = 0; i < 5; ++i) {
    toolBox.addItem(new QWidget, QString("Tab #%1").arg(i));
}

toolBox.widget(0)->setProperty("myProperty", true);
toolBox.widget(1)->setProperty("myProperty", true);

toolBox.show();

app.setStyleSheet("QToolBox QWidget[myProperty=\"true\"] { background-color: white; }");

return app.exec();

}
@

This is still working for me (notice that object names / dynamic properties must be set before the stylesheet, due to how Qt style sheets work). What do you mean with "make the page transparent"? Like, a "hole" inside the QToolBox?

Tedisito

Thanks for the notice, that was why it didn't work.
By make the page transparent, I mean have a hole inside the QToolBox. And actually not a "hole" like 100% transparent but I would to set the transparency.

For example, if you set the stylesheet with:
@QToolBox QWidget[myProperty="true"] { background-color: rgba(0, 255, 0,20); }@

You'll see some green and the transparency are here too BUT still with the gray in background. Like if there is another widget to set!