Background color of QToolBox pages inside a QTabWidget in Windows 7

kzarog

Hello all,

I've been having a problem with the background colour of the pages contained in a QToolBox widget, which is in turn inside a QTabWidget in Windows 7.

The style of Windows 7 applies a white colour in such a case, but my pages inside QToolBox are stubbornly gray and the button style is different, no matter what I have tried. The same behaviour can be found in QScrollArea widgets.

I wish to achieve the look of a GroupBox inside the pages of my QToolBox widgets. A visual indication can be seen at http://imgur.com/2jTu6D8.

The image contains also my tries at achieving the desired look. Currently I have used stylesheets that apply background-color:white or background-color:transparent but the results are not really nice. Using QPalette was also not successful.

Any help/hints for a platform-agnostic solution (but not necessarily only that) would be greatly appreciated.

Thank you for your time!

raven-worx

@kzarog said:

The image contains also my tries at achieving the desired look. Currently I have used stylesheets that apply background-color:white or background-color:transparent but the results are not really nice. Using QPalette was also not successful.

you need to specify why they are not successful or not delivering the desired result?! To me it's unclear what you want, since the toolbox has a white background such as the groupbox.

kzarog

@raven-worx Hi and thanks for your reply!

I was not clear enough, sorry about that.

What I want to achieve is to have the colour of the tab (white for Windows 7, as shown inside QGroupBox in the image) in between the toolbox pages (i.e. it not to be gray, as is shown inside QToolBox in the image). This needs to happen without altering the styling of the buttons, which is done when setting the stylesheet to either white or transparent (QToolbox+White, QToolbox+Transparent).

I hope this is more clear, thanks!

raven-worx

ok i hope i understood now what you want.
Please show your stylesheet. Most probably your stylesheet is too generic and thus it also gets applied to the child widgets.

kzarog

@raven-worx Thanks!

Well, I don't have a specific stylesheet, as I wish to be close to the platform defaults.

I just use QtCreator to set the stylesheet for the QToolBox by adding (e.g. for white)

backgound-color:white

Is there a better way to do this?

raven-worx

@kzarog
Then try the following stylesheet:

QToolBox {
background: transparent;
}

so it only gets applied to QToolBox instances, and not to the child widgets.

kzarog

@raven-worx Hi again and thank you for your suggestion.

Unfortunately your solution did not work when trying setting the stylesheet for QToolBox (background or background-color to transparent) or just the QWidget objects inside QToolBox.

I keep getting the same result to the (QToolBox + transparent) portion of my uploaded image.

raven-worx

@kzarog
In your screenshot the buttons also have a transparent background applied.
When you correctly applied my stylesheet this cant happen for sure.
Please show some code, especially where you set the stylesheet.

kzarog

@raven-worx Hi again,

I have made a very simple dialog application to demonstrate the issue. The dialog was done in Designer and contains one QTabWidget that contains one QToolbox, whose first page has a QLineEdit and a QPushButton. The code follows:

#include "dialog.h"
#include "ui_dialog.h"

Dialog::Dialog(QWidget *parent) :
	QDialog(parent),
	ui(new Ui::Dialog)
{
	ui->setupUi(this);

	//	Stylesheet settings I have tried that result in the first dialog image
	//this->setStyleSheet("QToolBox {background:transparent}");
	//this->setStyleSheet("QToolBox {background-color:transparent}");
	//ui->toolBox->setStyleSheet("QToolBox {background: transparent}");
	//ui->toolBox->setStyleSheet("QToolBox {background-color: transparent}");

	//	Stylesheet setting just for the QPushButton that results in the second dialog image
	ui->toolBox->setStyleSheet("QPushButton {background:transparent}");
}

Dialog::~Dialog()
{
	delete ui;
}

The result from each of the commented lines (obviously, each line applied individually each time) gave me the first dialog shown in these two uploaded images.

The uncommented stylesheet application (again, with only that line uncommented) works as intended for QPushButton. Also, using something like

ui->toolBox->setStyleSheet("QWidget#lineEdit {background:transparent}");

correctly applies a transparent background to just the QLineEdit element.

QToolbox is just not conforming! Please let me know if I am doing things the wrong way.

Thanks

raven-worx

@kzarog

This styles makes the grey areas from your screenshot transparent:

ui->toolBox->setStyleSheet(
"QToolBox,"
"QToolBox > *,"
"QToolBox > QScrollArea > #qt_scrollarea_viewport > QWidget {"
"background: transparent;"
 "}"
);

All the other widgets can then be styled as desired.

kzarog

@raven-worx Thank you so much! Your suggestion (partially) worked! This is my output. I think I understand what the stylesheet does but as you can see the tab buttons ("Page 1" and "Page 2") also became transparent. I've tried to add something similar to

QToolBox::tab {background: button;}

to make them take the default normal color but adding something like that resets the whole stylesheet to what I was getting before. Any pointers are greatly appreciated!

In any case, thank you for your great help! :)

raven-worx

@kzarog
ok, then try this:

"QToolBox,"
"QToolBox > QScrollArea,"
"QToolBox > QScrollArea > #qt_scrollarea_viewport,"
"QToolBox > QScrollArea > #qt_scrollarea_viewport > QWidget {"
"background: transparent;"
 "}"

i am not sure if the selector "QToolBox > QScrollArea > #qt_scrollarea_viewport" is really needed. I can't try it right now.

kzarog

@raven-worx Your second suggestion solved the problem and gave the desired result.

You were correct, the selector "QToolBox > QScrollArea > #qt_scrollarea_viewport" was not needed.

Thank you so much for your help!

Franckynos

Hi, I want change icon of tab when one page is selected (arrow at right) and for the other arrow at bottom.
I think it's the same way to do this.

I tried :

QToolBox > QAbstractButton{
	background-image: url(:/icones/deleteRed);
    image: url(:/icones/deleteRed);
}

But nothing happend.

MhmRhm

Do this for the widgets inside the ToolBox:

widget->setBackgroundRole(QPalette::Base);