How to set a custom widget's background color and border width?

Question

I have a custom widget whose parent is yet another custom widget. I am able to set the background color of the parent custom widget using QPalette and it works fine. But I am unable to set the child custom widget's border color using both QPalette and stylesheet.

This is how I set my parent custom widget's background color:

QPalette pal = parentCustomWidget->palette();
QColor color = {226, 208, 208};
pal.setColor (QPalette::Background, color);
parentCustomWidget->setAutoFillBackground (true);
parentCustomWidget->setPalette (pal);
parentCustomWidget->show();

I referred several SO posts/answers for setting background color to custom widget, but I am unable to set it. This is how I set my childCustomWidget's color:

Approach1:

QPalette pal = childCustomWidget->palette();
QColor color = {204, 231, 47};
pal.setColor (QPalette::Background, color);
childCustomWidget->setAutoFillBackground (true);
childCustomWidget->setPalette (pal);

Approach2:

childCustomWidget->setStyleSheet ("*{border-width:" +
    BorderThickness +
    ";border-style:solid;border-color:" +
    hexColorCode + " ;color:white;}");

Note: I have commented out the paintEvent virtual function.

I have gone through this link: How to Change the Background Color of QWidget and have incorporated changes like given but im unable to set color to childCustomWidget.

My custom widgets with the above approaches look like this:

Here orange is the parent's BG color which I am able to set. The grey colored one seems to be the default color for the child widget.

scopchanov scopchanov · Accepted Answer · 2018-09-20T23:19:08

Solution

For Approach2 to work, i.e. for your custom widget to respect the stylesheet, the Qt::WA_StyledBackground attribute should be set to true, as it:

Indicates the widget should be drawn using a styled background.

Example

Here is a minimal example I have prepared for you in order to demonstrate a possible implementation of the suggested solution:

class ParentWidget : public QWidget
{
    Q_OBJECT
public:
    explicit ParentWidget(QWidget *parent = nullptr) : QWidget(parent) {}
};

class ChildWidget : public QWidget
{
    Q_OBJECT
public:
    explicit ChildWidget(QWidget *parent = nullptr) : QWidget(parent) {}
};

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = 0) :
           QMainWindow(parent)
       {
           auto *pWidget = new ParentWidget(this);
           auto *l = new QVBoxLayout(pWidget);
           auto *cWidget = new ChildWidget(pWidget);
           QString BorderThickness("2");
           QString hexColorCode("#FF00FF");

           l->addWidget(cWidget);
           l->setContentsMargins(25, 25, 25, 25);

           QPalette pal(pWidget->palette());
           QColor color(226, 208, 208);
           pal.setColor (QPalette::Background, color);
           pWidget->setAutoFillBackground (true);
           pWidget->setPalette (pal);

           cWidget->setAttribute(Qt::WA_StyledBackground, true);
           cWidget->setStyleSheet("ChildWidget { border: " + BorderThickness + " solid " +
                                  hexColorCode + ";"
                                                 "background-color: rgb(204, 231, 47);"
                                                 "color: white; }");

           setCentralWidget(pWidget);
           resize (400, 400);
       }
};

Result

As it is written, this example produces the following result:

How to set a custom widget's background color and border width?

2 Answers

Solution

Example

Result