Background color of QToolBox pages inside a QTabWidget in Windows 7

kzarog

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