customizing QGroupbox title

[FelixB]

Hi,

I want to customize the title of a QGroupBox by using a stylesheet. See the desired result in the attached image (qgroupbox_desired.png). A almost have the layout, but the title background is too small (qgroupbox_wrong_title.png). how can I extend the title over the whole width?

my stylesheet:

QGroupBox
{
    background-color:transparent;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 1px solid #acacac;
    border-top: none;
    margin-top: 5px;
}
 
QGroupBox::title
{
    subcontrol-origin: margin;	
    background:url(:/assets/subWindowBackground);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #0b477b;
    border-bottom: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
        stop: 0 #005192, stop: 1 #002f60);
    padding: 2 2px;
    color: white;   
}

QGroupBox
{
    background-color:transparent;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 1px solid #acacac;
    border-top: none;
    margin-top: 5px;
}

QGroupBox::title
{
    subcontrol-origin: margin;	
    background:url(:/assets/subWindowBackground);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #0b477b;
    border-bottom: none;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
        stop: 0 #005192, stop: 1 #002f60);
    padding: 2 2px;
    color: white;   
}

To copy to clipboard, switch view to plain text mode 

thanks in advance!
Felix

[Santosh Reddy]

As style sheets work on the area of widget, it may not be directly possible to do so. To do so, title sub-contol has to increase it's width (or at least it's bacakground width) to QGroupBox's width. I cannot think of a way to make title sub-control aware of QGroupBox's width, but we can use a large padding to the right to make to look like what you want. Try adding padding more than the width of the QGroupBox widget

padding: 2 20000 2 2; /* some large value, as QGrouBox actual width is not known */

padding: 2 20000 2 2; /* some large value, as QGrouBox actual width is not known */

To copy to clipboard, switch view to plain text mode 

[FelixB]

thank you, but I already found a (better?) solution: I created a border image for the QGroupBox with a 25px top-border with the desired color.

QGroupBox
{
	background-color:transparent;
	border-image:url(:/assets/QGroupBoxBorder) 25 2 2 2; 
	border-width: 25px 2px 2px 2px;
}
 
QGroupBox::title
{
	background: transparent;
	margin: 4px;
	color: white;
}

QGroupBox
{
	background-color:transparent;
	border-image:url(:/assets/QGroupBoxBorder) 25 2 2 2; 
	border-width: 25px 2px 2px 2px;
}

QGroupBox::title
{
	background: transparent;
	margin: 4px;
	color: white;
}

To copy to clipboard, switch view to plain text mode 

[evgeniy]

margin-top