Wassim Gr
Wassim Gr

Reputation: 588

Change QGroupBox's content background

I want to change the background of a QGroupBox, however I would like to only change the inside background (the darker shade of gray below each QGroupBox's title) as shown here: enter image description here What I currently have is

QGroupBox {
    background-color: red;
    border: 3px dashed black;
}

which changes the background of the entire QGroupBox like this: enter image description here

Is there a way in Qt to only change the "interior box" background rather than the whole container? Thank you in advance.

Upvotes: 2

Views: 12062

Answers (3)

bkausbk
bkausbk

Reputation: 2790

I guess there are 2 QGroupBox'es involved here, since that is not really clear from your post. Or is there a group box and some other inner container widget?

In either case you should be able to use stylesheets like following:

QGroupBox {
    background-color: red;
    margin-top:1em;
}
QGroupBox QGroupBox {
    background-color: green;
}
QGroupBox::title {
    subcontrol-origin: padding;
    subcontrol-position: left top;
    background: transparent;
    margin-top: -2.5em;
}

This will give you following result:

Example

You can of course replace the inner group box by an arbitrary widget.

Upvotes: 4

MateoConLechuga
MateoConLechuga

Reputation: 572

You need to tell Qt a little more about the kind of style you want, specifically the margins. Playing around a little with this code should give you the desired results:

QGroupBox {
    background-color: red;
    border: 3px dashed black;
    margin-top: 1ex; /* leave space at the top for the title */
}

QGroupBox::title {
    subcontrol-origin: margin;
    padding: 0 3px;
}

Take a look at the Stylesheet examples

Upvotes: 1

Pavan Chandaka
Pavan Chandaka

Reputation: 12811

You can do it using "setStyleSheet" function of widgets.

Get the inner group box object. And set the background color using "setStyleSheet" function.

Pseudo Code:

QGroupBox *innerGBox = new QGroupBox();

innerGBox->setStyleSheet("background-color: red");

To know more about setting styles programmatic , refer below link.

http://doc.qt.io/qt-4.8/stylesheet-examples.html

Upvotes: 1

Related Questions