CODEWITHSUNDEEP
qttabsqtscriptqtstylesheets
MARTIN Damien
MARTIN Damien

Reputation: 1026

Define tabs background with stylesheets without changing QWidget?

I want to make a very basic GUI: tabs, text area.

But I want to color my tabs and make them always looking the same on MAC, Windows and Linux.

So, I tryed to use a stylesheet:

QTabWidget::pane
{
    border-top: 2px solid #1B1B1B;
    background-color: #262626;
}

QTabWidget::tab-bar
{
    left: 5px;
    alignment: left;
    background: #3E3E3E;
}

QTabBar::tab
{
    background: transparent;
    color: #757575;
    padding: 15px 5px 15px 5px;
}

QTabBar::tab:hover
{
    text-decoration: underline;
}

QTabBar::tab:selected
{
    color: #DEF600;
    background: qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #262626, stop: 1.0 #3D3D3D );
}

But even if the tabs looks well, there is a problem: The tab pane is still transparent...

I can force a background color by adding:

QWidget
{
    background-color: #262626;
}

But as you know, this change the background color of ALL the widgets, even my QPlainTextEdit that I still want to have a white background. And more annoying, this reset the OS skin and display ugly scrollbars (I really want to keep them as they were).

Is there a way to change the tabs pane background without having to reskin all the components ?

Upvotes: 3

Views: 8761

Answers (6)

Ruan
Ruan

Reputation: 301

I had the same problem. I could get it to work with this:

QTabWidget::pane > QWidget {
    background-color: #262626;
}

Upvotes: 11

NRUB
NRUB

Reputation: 374

It is possible simply by:

* {background: green;}

This style set background for this widget and all their childs so you need to know one important thing. The area you think is QTabWidget in fact is QWidget which is set inside of QTabWidget. You can easly check where QTabWidget is and where is their child by adding to your style

QTabWidget::pane {background: green; padding: 10px;}

green area is a QTabWidget, all inside is overlapped by QTabWidgets child (any QWidget added by addTab() function).

Upvotes: 1

Mr. Developerdude
Mr. Developerdude

Reputation: 9688

Try enabling document mode with

myTab->setDocumentMode(true);

This has worked for me when everything else has failed. You can do it in code, or by twiddling the property in qtcreator.

You still might have to apply some styles to the pane like so:

QTabWidget:pane{
background: red;
}

Read more about this in the documentation.

Upvotes: 0

warunanc
warunanc

Reputation: 2259

Refer this: http://doc.qt.digia.com/qt/stylesheet-syntax.html

Read ID Selector under Selector Types. You can instruct a certain style to be applied only for a given object name. So you can use whatever the name you have given to your tabWidget.

Upvotes: 0

Al2O3
Al2O3

Reputation: 3213

add style 

 "background-color:rgb(255,255,255)"

to each tab.

Upvotes: 0

Joonhwan
Joonhwan

Reputation: 476

Try this. 

QTabWidget::pane {
    background: red;
}

You can read this for details. And one more thing to comment. You can use QObject::objectName() as style sheet's id selector. for example, 

QTabWidget#myTab { ... }

hope this helps.

Upvotes: 3

Related Questions