Custom Titlebar, Top-left, right border rounded; But left over part still visible

[rawfool]

I've implemented a custom titlebar using QToolBar. I've applied the style to it as shown below.

this->setStyleSheet("background: #646464; border: 0px; border-top-left-radius: 10px; border-top-right-radius: 10px;");

this->setStyleSheet("background: #646464; border: 0px; border-top-left-radius: 10px; border-top-right-radius: 10px;");

To copy to clipboard, switch view to plain text mode 

Now I got the rounded edges, but the left-over part after the border-radius is still visible. How do I "cut" it or How do I make it transparent ?
Thank you.

[pradeepreddyg95]

paste the screen shot of your gui

[rawfool]

Hi Pradeep,
PFB the screenshot of TitleBar with rounded top-edges, with the residue part.
Thank you.

Titlebar.jpg

[pradeepreddyg95]

set same stylesheet for your base widget to cut top edges.

[rawfool]

Hi Pradeep,

I did apply the same stylesheet to the base widget also. But no luck. Pls find the code below. Thank you.

CTitleBar::CTitleBar(QWidget *parent) :
    QToolBar(parent)
{
    this->setFixedHeight(24);
    this->setWindowOpacity(100);
    this->setStyleSheet("background-color: #646464; border: 0px; border-top-left-radius: 8px; border-top-right-radius: 8px;");
    this->setContentsMargins(0, 0, 0, 0);
    setWidgetStyling();
    connect(closeButton, SIGNAL(clicked()), this, SIGNAL(sig_CloseButtonClicked()));
}
 
void CTitleBar::setWidgetStyling()
{
    holderWidget = new QWidget;
    holderWidget->setStyleSheet("background-color: transparent; border-top-left-radius: 8px; border-top-right-radius: 8px;");
    holderWidget->setMouseTracking(true);
    holderWidget->setContentsMargins(0, 0, 0, 0);
    this->addWidget(holderWidget);
 
    titleLyt = new QHBoxLayout();
    titleLyt->setContentsMargins(0, 0, 0, 0);
    holderWidget->setLayout(titleLyt);
 
    closeButton = new QToolButton();
    closeButton->setMouseTracking(false);
    closeButton->setText("X");
    closeButton->setContentsMargins(0, 0, 0, 0);
    closeButton->setToolButtonStyle(Qt::ToolButtonTextOnly);
    closeButton->setFixedSize(20, 20);
    closeButton->setStyleSheet("QToolButton { color: white; font-size: 12px; background: #ec6c3f; border: 0px; border-radius: 8px;}"
                               "QToolButton: hover { color: lightGray; background: #e44d2e; padding: 0px; border: 2px solid #f9d654;}"
                               "QToolButton: pressed {color: lightGray; font-size: 9px; background: #ec633f; border: 0px solid #f9d456;}");
 
    titleIcon = new QLabel();
    titleIcon->setPixmap(QPixmap(TRAY_ICON));
    titleIcon->setStyleSheet("border: none; background: transparent;");
 
    titleText = new QLabel(APP_NAME);
    titleText->setContentsMargins(0, 0, 0, 0);
    titleText->setStyleSheet("color: orange; font: Arial; font-weight: bold; font-size: 12px");
 
    titleLyt->addWidget(titleIcon);
    titleLyt->addWidget(titleText, 2);
    titleLyt->addWidget(closeButton);
}

CTitleBar::CTitleBar(QWidget *parent) :
    QToolBar(parent)
{
    this->setFixedHeight(24);
    this->setWindowOpacity(100);
    this->setStyleSheet("background-color: #646464; border: 0px; border-top-left-radius: 8px; border-top-right-radius: 8px;");
    this->setContentsMargins(0, 0, 0, 0);
    setWidgetStyling();
    connect(closeButton, SIGNAL(clicked()), this, SIGNAL(sig_CloseButtonClicked()));
}

void CTitleBar::setWidgetStyling()
{
    holderWidget = new QWidget;
    holderWidget->setStyleSheet("background-color: transparent; border-top-left-radius: 8px; border-top-right-radius: 8px;");
    holderWidget->setMouseTracking(true);
    holderWidget->setContentsMargins(0, 0, 0, 0);
    this->addWidget(holderWidget);

    titleLyt = new QHBoxLayout();
    titleLyt->setContentsMargins(0, 0, 0, 0);
    holderWidget->setLayout(titleLyt);

    closeButton = new QToolButton();
    closeButton->setMouseTracking(false);
    closeButton->setText("X");
    closeButton->setContentsMargins(0, 0, 0, 0);
    closeButton->setToolButtonStyle(Qt::ToolButtonTextOnly);
    closeButton->setFixedSize(20, 20);
    closeButton->setStyleSheet("QToolButton { color: white; font-size: 12px; background: #ec6c3f; border: 0px; border-radius: 8px;}"
                               "QToolButton: hover { color: lightGray; background: #e44d2e; padding: 0px; border: 2px solid #f9d654;}"
                               "QToolButton: pressed {color: lightGray; font-size: 9px; background: #ec633f; border: 0px solid #f9d456;}");

    titleIcon = new QLabel();
    titleIcon->setPixmap(QPixmap(TRAY_ICON));
    titleIcon->setStyleSheet("border: none; background: transparent;");

    titleText = new QLabel(APP_NAME);
    titleText->setContentsMargins(0, 0, 0, 0);
    titleText->setStyleSheet("color: orange; font: Arial; font-weight: bold; font-size: 12px");

    titleLyt->addWidget(titleIcon);
    titleLyt->addWidget(titleText, 2);
    titleLyt->addWidget(closeButton);
}

To copy to clipboard, switch view to plain text mode 

[pradeepreddyg95]

where your creating instance for CTitleBar set stylesheet for that widget.
CTitleBar *pToolbar = new CTitleBar (this);
this->setStyleSheet("background-color: transparent; border-top-left-radius: 8px; border-top-right-radius: 8px;");
should work ...

[Santosh Reddy]

I guess you are using the CTitleBar to replace the system provided title bar by using setWindowFlags(Qt::FramelessWindowHint) on the top level widget. In such case you also need to set the translucent attribute setAttribute(Qt::WA_TranslucentBackground); on the top level widget.