Change background color of QTabWidget tabs
Question:
Is it possible in PYQT4 to change the background color of tabs for a QTabWidget? There is a way to change the color of the text but not the background color of the tab.
I have a program with multiple tabs, and I want to give each level its own background color. See attached example.
from PyQt4 import QtCore, QtGui
try:
_fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
_fromUtf8 = lambda s: s
class Ui_Dialog(object):
def setupUi(self, Dialog):
Dialog.setObjectName(_fromUtf8("Dialog"))
Dialog.resize(661, 397)
self.verticalLayout = QtGui.QVBoxLayout(Dialog)
self.verticalLayout.setObjectName(_fromUtf8("verticalLayout"))
self.tabWidget = QtGui.QTabWidget(Dialog)
self.tabWidget.setObjectName(_fromUtf8("tabWidget"))
self.tab = QtGui.QWidget()
self.tab.setObjectName(_fromUtf8("tab"))
self.verticalLayout_2 = QtGui.QVBoxLayout(self.tab)
self.verticalLayout_2.setObjectName(_fromUtf8("verticalLayout_2"))
self.tabWidget_2 = QtGui.QTabWidget(self.tab)
self.tabWidget_2.setObjectName(_fromUtf8("tabWidget_2"))
self.tab_3 = QtGui.QWidget()
self.tab_3.setObjectName(_fromUtf8("tab_3"))
self.verticalLayout_3 = QtGui.QVBoxLayout(self.tab_3)
self.verticalLayout_3.setObjectName(_fromUtf8("verticalLayout_3"))
self.tabWidget_3 = QtGui.QTabWidget(self.tab_3)
self.tabWidget_3.setObjectName(_fromUtf8("tabWidget_3"))
self.tab_5 = QtGui.QWidget()
self.tab_5.setObjectName(_fromUtf8("tab_5"))
self.verticalLayout_4 = QtGui.QVBoxLayout(self.tab_5)
self.verticalLayout_4.setObjectName(_fromUtf8("verticalLayout_4"))
self.tabWidget_4 = QtGui.QTabWidget(self.tab_5)
self.tabWidget_4.setObjectName(_fromUtf8("tabWidget_4"))
self.tab_7 = QtGui.QWidget()
self.tab_7.setObjectName(_fromUtf8("tab_7"))
self.verticalLayout_5 = QtGui.QVBoxLayout(self.tab_7)
self.verticalLayout_5.setObjectName(_fromUtf8("verticalLayout_5"))
self.tabWidget_5 = QtGui.QTabWidget(self.tab_7)
self.tabWidget_5.setElideMode(QtCore.Qt.ElideRight)
self.tabWidget_5.setObjectName(_fromUtf8("tabWidget_5"))
self.tab_9 = QtGui.QWidget()
self.tab_9.setObjectName(_fromUtf8("tab_9"))
self.tabWidget_5.addTab(self.tab_9, _fromUtf8(""))
self.tab_10 = QtGui.QWidget()
self.tab_10.setObjectName(_fromUtf8("tab_10"))
self.tabWidget_5.addTab(self.tab_10, _fromUtf8(""))
self.verticalLayout_5.addWidget(self.tabWidget_5)
self.tabWidget_4.addTab(self.tab_7, _fromUtf8(""))
self.tab_8 = QtGui.QWidget()
self.tab_8.setObjectName(_fromUtf8("tab_8"))
self.tabWidget_4.addTab(self.tab_8, _fromUtf8(""))
self.verticalLayout_4.addWidget(self.tabWidget_4)
self.tabWidget_3.addTab(self.tab_5, _fromUtf8(""))
self.tab_6 = QtGui.QWidget()
self.tab_6.setObjectName(_fromUtf8("tab_6"))
self.tabWidget_3.addTab(self.tab_6, _fromUtf8(""))
self.verticalLayout_3.addWidget(self.tabWidget_3)
self.tabWidget_2.addTab(self.tab_3, _fromUtf8(""))
self.tab_4 = QtGui.QWidget()
self.tab_4.setObjectName(_fromUtf8("tab_4"))
self.tabWidget_2.addTab(self.tab_4, _fromUtf8(""))
self.verticalLayout_2.addWidget(self.tabWidget_2)
self.tabWidget.addTab(self.tab, _fromUtf8(""))
self.tab_2 = QtGui.QWidget()
self.tab_2.setObjectName(_fromUtf8("tab_2"))
self.tabWidget.addTab(self.tab_2, _fromUtf8(""))
self.verticalLayout.addWidget(self.tabWidget)
self.buttonBox = QtGui.QDialogButtonBox(Dialog)
self.buttonBox.setOrientation(QtCore.Qt.Horizontal)
self.buttonBox.setStandardButtons(QtGui.QDialogButtonBox.Cancel|QtGui.QDialogButtonBox.Ok)
self.buttonBox.setObjectName(_fromUtf8("buttonBox"))
self.verticalLayout.addWidget(self.buttonBox)
self.retranslateUi(Dialog)
self.tabWidget.setCurrentIndex(0)
self.tabWidget_2.setCurrentIndex(0)
self.tabWidget_3.setCurrentIndex(0)
self.tabWidget_4.setCurrentIndex(0)
self.tabWidget_5.setCurrentIndex(0)
QtCore.QObject.connect(self.buttonBox, QtCore.SIGNAL(_fromUtf8("accepted()")), Dialog.accept)
QtCore.QObject.connect(self.buttonBox, QtCore.SIGNAL(_fromUtf8("rejected()")), Dialog.reject)
QtCore.QMetaObject.connectSlotsByName(Dialog)
def retranslateUi(self, Dialog):
Dialog.setWindowTitle(QtGui.QApplication.translate("Dialog", "Dialog", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_5.setTabText(self.tabWidget_5.indexOf(self.tab_9), QtGui.QApplication.translate("Dialog", "Tab 9", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_5.setTabText(self.tabWidget_5.indexOf(self.tab_10), QtGui.QApplication.translate("Dialog", "Tab 10", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_4.setTabText(self.tabWidget_4.indexOf(self.tab_7), QtGui.QApplication.translate("Dialog", "Tab 7", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_4.setTabText(self.tabWidget_4.indexOf(self.tab_8), QtGui.QApplication.translate("Dialog", "Tab 8", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_3.setTabText(self.tabWidget_3.indexOf(self.tab_5), QtGui.QApplication.translate("Dialog", "Tab 5", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_3.setTabText(self.tabWidget_3.indexOf(self.tab_6), QtGui.QApplication.translate("Dialog", "Tab 6", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_2.setTabText(self.tabWidget_2.indexOf(self.tab_3), QtGui.QApplication.translate("Dialog", "Tab 3", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_2.setTabText(self.tabWidget_2.indexOf(self.tab_4), QtGui.QApplication.translate("Dialog", "Tab 4", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), QtGui.QApplication.translate("Dialog", "Tab 1", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), QtGui.QApplication.translate("Dialog", "Tab 2", None, QtGui.QApplication.UnicodeUTF8))
#
#------------------------------------------------------------------------------
#
# For Testing
#
self.tab_33 = QtGui.QWidget()
self.tabWidget.addTab(self.tab_33, "Hell")
QColor = QtGui.QColor(255, 85, 0)
a = self.tabWidget.tabBar()
a.setTabTextColor(0, QColor)
if __name__ == "__main__":
import sys
app = QtGui.QApplication(sys.argv)
Dialog = QtGui.QDialog()
ui = Ui_Dialog()
ui.setupUi(Dialog)
Dialog.show()
sys.exit(app.exec_())
Answers:
You may use qt style sheets to customize look of QTabWidget:
http://doc.qt.digia.com/4.7-snapshot/stylesheet-examples.html#customizing-qtabwidget-and-qtabbar
e.g.:
self.tabwidget.setStyleSheet('QTabBar::tab {background-color: red;}')
If you’re using a widget-style which doesn’t draw the tabs using pixmaps (see this Qt FAQ for details), you can create a subclass of QTabBar and re-colour the tabs in a reimplemented paintEvent, and then use QTabWidget.setTabBar to replace the default tab-bar. This allows the tabs to be coloured individually, which isn’t possible using stylesheets.
Here’s a simple demo:
PyQt5:
from PyQt5 import QtGui, QtWidgets
class TabBar(QtWidgets.QTabBar):
def paintEvent(self, event):
style = self.style()
painter = QtGui.QPainter(self)
option = QtWidgets.QStyleOptionTab()
for index in range(self.count()):
self.initStyleOption(option, index)
bgcolor = QtGui.QColor(self.tabText(index))
option.palette.setColor(QtGui.QPalette.Window, bgcolor)
option.palette.setColor(QtGui.QPalette.Button, bgcolor)
style.drawControl(QtWidgets.QStyle.CE_TabBarTab, option, painter)
class Window(QtWidgets.QTabWidget):
def __init__(self):
super().__init__()
self.setTabBar(TabBar(self))
for color in 'tomato orange yellow lightgreen skyblue plum'.split():
self.addTab(QtWidgets.QWidget(self), color)
if __name__ == '__main__':
app = QtWidgets.QApplication(['Test'])
window = Window()
window.setGeometry(600, 100, 420, 200)
window.show()
app.exec()
PyQt4:
from PyQt4 import QtGui
class TabBar(QtGui.QTabBar):
def paintEvent(self, event):
painter = QtGui.QStylePainter(self)
option = QtGui.QStyleOptionTab()
for index in range(self.count()):
self.initStyleOption(option, index)
bgcolor = QtGui.QColor(self.tabText(index))
option.palette.setColor(QtGui.QPalette.Window, bgcolor)
option.palette.setColor(QtGui.QPalette.Button, bgcolor)
painter.drawControl(QtGui.QStyle.CE_TabBarTab, option)
class Window(QtGui.QTabWidget):
def __init__(self):
QtGui.QTabWidget.__init__(self)
self.setTabBar(TabBar(self))
for color in 'tomato orange yellow lightgreen skyblue plum'.split():
self.addTab(QtGui.QWidget(self), color)
if __name__ == '__main__':
import sys
app = QtGui.QApplication(sys.argv)
window = Window()
window.resize(420, 200)
window.show()
sys.exit(app.exec_())
Is it possible in PYQT4 to change the background color of tabs for a QTabWidget? There is a way to change the color of the text but not the background color of the tab.
I have a program with multiple tabs, and I want to give each level its own background color. See attached example.
from PyQt4 import QtCore, QtGui
try:
_fromUtf8 = QtCore.QString.fromUtf8
except AttributeError:
_fromUtf8 = lambda s: s
class Ui_Dialog(object):
def setupUi(self, Dialog):
Dialog.setObjectName(_fromUtf8("Dialog"))
Dialog.resize(661, 397)
self.verticalLayout = QtGui.QVBoxLayout(Dialog)
self.verticalLayout.setObjectName(_fromUtf8("verticalLayout"))
self.tabWidget = QtGui.QTabWidget(Dialog)
self.tabWidget.setObjectName(_fromUtf8("tabWidget"))
self.tab = QtGui.QWidget()
self.tab.setObjectName(_fromUtf8("tab"))
self.verticalLayout_2 = QtGui.QVBoxLayout(self.tab)
self.verticalLayout_2.setObjectName(_fromUtf8("verticalLayout_2"))
self.tabWidget_2 = QtGui.QTabWidget(self.tab)
self.tabWidget_2.setObjectName(_fromUtf8("tabWidget_2"))
self.tab_3 = QtGui.QWidget()
self.tab_3.setObjectName(_fromUtf8("tab_3"))
self.verticalLayout_3 = QtGui.QVBoxLayout(self.tab_3)
self.verticalLayout_3.setObjectName(_fromUtf8("verticalLayout_3"))
self.tabWidget_3 = QtGui.QTabWidget(self.tab_3)
self.tabWidget_3.setObjectName(_fromUtf8("tabWidget_3"))
self.tab_5 = QtGui.QWidget()
self.tab_5.setObjectName(_fromUtf8("tab_5"))
self.verticalLayout_4 = QtGui.QVBoxLayout(self.tab_5)
self.verticalLayout_4.setObjectName(_fromUtf8("verticalLayout_4"))
self.tabWidget_4 = QtGui.QTabWidget(self.tab_5)
self.tabWidget_4.setObjectName(_fromUtf8("tabWidget_4"))
self.tab_7 = QtGui.QWidget()
self.tab_7.setObjectName(_fromUtf8("tab_7"))
self.verticalLayout_5 = QtGui.QVBoxLayout(self.tab_7)
self.verticalLayout_5.setObjectName(_fromUtf8("verticalLayout_5"))
self.tabWidget_5 = QtGui.QTabWidget(self.tab_7)
self.tabWidget_5.setElideMode(QtCore.Qt.ElideRight)
self.tabWidget_5.setObjectName(_fromUtf8("tabWidget_5"))
self.tab_9 = QtGui.QWidget()
self.tab_9.setObjectName(_fromUtf8("tab_9"))
self.tabWidget_5.addTab(self.tab_9, _fromUtf8(""))
self.tab_10 = QtGui.QWidget()
self.tab_10.setObjectName(_fromUtf8("tab_10"))
self.tabWidget_5.addTab(self.tab_10, _fromUtf8(""))
self.verticalLayout_5.addWidget(self.tabWidget_5)
self.tabWidget_4.addTab(self.tab_7, _fromUtf8(""))
self.tab_8 = QtGui.QWidget()
self.tab_8.setObjectName(_fromUtf8("tab_8"))
self.tabWidget_4.addTab(self.tab_8, _fromUtf8(""))
self.verticalLayout_4.addWidget(self.tabWidget_4)
self.tabWidget_3.addTab(self.tab_5, _fromUtf8(""))
self.tab_6 = QtGui.QWidget()
self.tab_6.setObjectName(_fromUtf8("tab_6"))
self.tabWidget_3.addTab(self.tab_6, _fromUtf8(""))
self.verticalLayout_3.addWidget(self.tabWidget_3)
self.tabWidget_2.addTab(self.tab_3, _fromUtf8(""))
self.tab_4 = QtGui.QWidget()
self.tab_4.setObjectName(_fromUtf8("tab_4"))
self.tabWidget_2.addTab(self.tab_4, _fromUtf8(""))
self.verticalLayout_2.addWidget(self.tabWidget_2)
self.tabWidget.addTab(self.tab, _fromUtf8(""))
self.tab_2 = QtGui.QWidget()
self.tab_2.setObjectName(_fromUtf8("tab_2"))
self.tabWidget.addTab(self.tab_2, _fromUtf8(""))
self.verticalLayout.addWidget(self.tabWidget)
self.buttonBox = QtGui.QDialogButtonBox(Dialog)
self.buttonBox.setOrientation(QtCore.Qt.Horizontal)
self.buttonBox.setStandardButtons(QtGui.QDialogButtonBox.Cancel|QtGui.QDialogButtonBox.Ok)
self.buttonBox.setObjectName(_fromUtf8("buttonBox"))
self.verticalLayout.addWidget(self.buttonBox)
self.retranslateUi(Dialog)
self.tabWidget.setCurrentIndex(0)
self.tabWidget_2.setCurrentIndex(0)
self.tabWidget_3.setCurrentIndex(0)
self.tabWidget_4.setCurrentIndex(0)
self.tabWidget_5.setCurrentIndex(0)
QtCore.QObject.connect(self.buttonBox, QtCore.SIGNAL(_fromUtf8("accepted()")), Dialog.accept)
QtCore.QObject.connect(self.buttonBox, QtCore.SIGNAL(_fromUtf8("rejected()")), Dialog.reject)
QtCore.QMetaObject.connectSlotsByName(Dialog)
def retranslateUi(self, Dialog):
Dialog.setWindowTitle(QtGui.QApplication.translate("Dialog", "Dialog", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_5.setTabText(self.tabWidget_5.indexOf(self.tab_9), QtGui.QApplication.translate("Dialog", "Tab 9", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_5.setTabText(self.tabWidget_5.indexOf(self.tab_10), QtGui.QApplication.translate("Dialog", "Tab 10", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_4.setTabText(self.tabWidget_4.indexOf(self.tab_7), QtGui.QApplication.translate("Dialog", "Tab 7", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_4.setTabText(self.tabWidget_4.indexOf(self.tab_8), QtGui.QApplication.translate("Dialog", "Tab 8", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_3.setTabText(self.tabWidget_3.indexOf(self.tab_5), QtGui.QApplication.translate("Dialog", "Tab 5", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_3.setTabText(self.tabWidget_3.indexOf(self.tab_6), QtGui.QApplication.translate("Dialog", "Tab 6", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_2.setTabText(self.tabWidget_2.indexOf(self.tab_3), QtGui.QApplication.translate("Dialog", "Tab 3", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget_2.setTabText(self.tabWidget_2.indexOf(self.tab_4), QtGui.QApplication.translate("Dialog", "Tab 4", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab), QtGui.QApplication.translate("Dialog", "Tab 1", None, QtGui.QApplication.UnicodeUTF8))
self.tabWidget.setTabText(self.tabWidget.indexOf(self.tab_2), QtGui.QApplication.translate("Dialog", "Tab 2", None, QtGui.QApplication.UnicodeUTF8))
#
#------------------------------------------------------------------------------
#
# For Testing
#
self.tab_33 = QtGui.QWidget()
self.tabWidget.addTab(self.tab_33, "Hell")
QColor = QtGui.QColor(255, 85, 0)
a = self.tabWidget.tabBar()
a.setTabTextColor(0, QColor)
if __name__ == "__main__":
import sys
app = QtGui.QApplication(sys.argv)
Dialog = QtGui.QDialog()
ui = Ui_Dialog()
ui.setupUi(Dialog)
Dialog.show()
sys.exit(app.exec_())
You may use qt style sheets to customize look of QTabWidget:
http://doc.qt.digia.com/4.7-snapshot/stylesheet-examples.html#customizing-qtabwidget-and-qtabbar
e.g.:
self.tabwidget.setStyleSheet('QTabBar::tab {background-color: red;}')
If you’re using a widget-style which doesn’t draw the tabs using pixmaps (see this Qt FAQ for details), you can create a subclass of QTabBar and re-colour the tabs in a reimplemented paintEvent, and then use QTabWidget.setTabBar to replace the default tab-bar. This allows the tabs to be coloured individually, which isn’t possible using stylesheets.
Here’s a simple demo:
PyQt5:
from PyQt5 import QtGui, QtWidgets
class TabBar(QtWidgets.QTabBar):
def paintEvent(self, event):
style = self.style()
painter = QtGui.QPainter(self)
option = QtWidgets.QStyleOptionTab()
for index in range(self.count()):
self.initStyleOption(option, index)
bgcolor = QtGui.QColor(self.tabText(index))
option.palette.setColor(QtGui.QPalette.Window, bgcolor)
option.palette.setColor(QtGui.QPalette.Button, bgcolor)
style.drawControl(QtWidgets.QStyle.CE_TabBarTab, option, painter)
class Window(QtWidgets.QTabWidget):
def __init__(self):
super().__init__()
self.setTabBar(TabBar(self))
for color in 'tomato orange yellow lightgreen skyblue plum'.split():
self.addTab(QtWidgets.QWidget(self), color)
if __name__ == '__main__':
app = QtWidgets.QApplication(['Test'])
window = Window()
window.setGeometry(600, 100, 420, 200)
window.show()
app.exec()
PyQt4:
from PyQt4 import QtGui
class TabBar(QtGui.QTabBar):
def paintEvent(self, event):
painter = QtGui.QStylePainter(self)
option = QtGui.QStyleOptionTab()
for index in range(self.count()):
self.initStyleOption(option, index)
bgcolor = QtGui.QColor(self.tabText(index))
option.palette.setColor(QtGui.QPalette.Window, bgcolor)
option.palette.setColor(QtGui.QPalette.Button, bgcolor)
painter.drawControl(QtGui.QStyle.CE_TabBarTab, option)
class Window(QtGui.QTabWidget):
def __init__(self):
QtGui.QTabWidget.__init__(self)
self.setTabBar(TabBar(self))
for color in 'tomato orange yellow lightgreen skyblue plum'.split():
self.addTab(QtGui.QWidget(self), color)
if __name__ == '__main__':
import sys
app = QtGui.QApplication(sys.argv)
window = Window()
window.resize(420, 200)
window.show()
sys.exit(app.exec_())