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 · Accepted Answer · 2018-10-04T12:43:27.483

3

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:

edited Oct 04 '18 at 12:43

answered Sep 20 '18 at 23:19

scopchanov

7,966
10
40
68

Thanks for the response @scopchanov:When I tried the example :it gives me "undefined reference to vtable" error ..So I commented out Q_OBJECT macro,now it shows only parent widget color and not the child widget's color... – adi Sep 21 '18 at 09:06
@adi, on my Windows machine this compiles just fine. I have just tested it on Ubuntu as well. Did you add the includes? – scopchanov Sep 21 '18 at 10:53
2

@adi You can have this kind of vtable error on Q_OBJECT when qmake/make do not generate the moc file during compilation. This generally happens when using MSVC. In this case re-running `qmake` by hand (`Run qmake` in the context menu in Qt Creator) can solve the issue. – Benjamin T Sep 21 '18 at 12:00
1

@BenjaminT, I also clean the project first. Just in case. – scopchanov Sep 21 '18 at 12:30
1

Thanks for the answer @scopchanov..I reinstalled qt and tried ur example..it works!! Could u tell me if there is a way to set border color of the widget using QPalette itself instead of stylesheets? – adi Sep 22 '18 at 11:06
@adi, unfortunately there isn't. Though you can paint the border in a paint event using a color from the palette. – scopchanov Sep 23 '18 at 00:48
@scopchanov ...could u brief me how can I do that in paintEvent? – adi Sep 23 '18 at 07:40
@adi, take a look at [this](https://code.woboq.org/qt5/qtbase/src/widgets/styles/qdrawutil.cpp.html#_Z14qDrawPlainRectP8QPainteriiiiRK6QColoriPK6QBrush). – scopchanov Sep 23 '18 at 18:35
Hi scopchanov,when I try to increase my border thickness,Im unable to see the contents of the widget.I have posted a new question,could you have a look at it pls https://stackoverflow.com/questions/52697845/qt-border-color-of-qwidget-hiding-the-contents]!! – adi Oct 08 '18 at 08:11

FrozenM · Answer 2 · 2018-09-20T15:48:21.203

Qt docs about palette: Warning: Do not use this function in conjunction with Qt Style Sheets. When using style sheets, the palette of a widget can be customized using the "color", "background-color", "selection-color", "selection-background-color" and "alternate-background-color".

http://doc.qt.io/qt-5/qwidget.html#palette-prop

Qt docs about autoFillBackground: Warning: Use this property with caution in conjunction with Qt Style Sheets. When a widget has a style sheet with a valid background or a border-image, this property is automatically disabled.

http://doc.qt.io/qt-5/qwidget.html#autoFillBackground-prop

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

2 Answers2

Solution

Example

Result

Linked