CODEWITHSUNDEEP
pythonqtpyqtpyqt5
titusjan
titusjan

Reputation: 5546

Change QDocketWidget hover title bar color with CSS

I have a GUI with a QDockwidget and I would like that the color of the title bar of the dock widgets changes color if the user hovers above it with the mouse cursor. I have a small test program below where the title bar changes color when the cursor is above it. However, it also changes color if the cursor is above the rest of the dock widget. Is there any way to fix this?

CSS = """

    QDockWidget::title {
        background-color: lightblue; 
        border: 1px solid black;
    }

    QDockWidget::title:hover {
        background: yellow;
    }

    QMainWindow::separator {
        background: palette(Midlight);
    }

    QMainWindow::separator:hover {
        background: palette(Mid);
    }
"""

from PyQt5 import QtWidgets
from PyQt5.QtCore import Qt, QSize

class CenteredLabel(QtWidgets.QWidget):

    def __init__(self, text, parent=None):
        super().__init__(parent=parent)
        self.verLayout = QtWidgets.QVBoxLayout()
        self.setLayout(self.verLayout)
        self.horLayout = QtWidgets.QHBoxLayout()
        self.verLayout.addLayout(self.horLayout)
        self.label = QtWidgets.QLabel(text)
        self.horLayout.addWidget(self.label)

    def sizeHint(self):
        return QSize(300, 400)


class MyWindow(QtWidgets.QMainWindow):

    def __init__(self, parent=None):
        super().__init__(parent=parent)
        self.setCentralWidget(CenteredLabel("Central Widget"))
        self.dockWidget = QtWidgets.QDockWidget("Dock Title", parent=self)
        self.dockWidget.setWidget(CenteredLabel("Dock Widget"))
        self.addDockWidget(Qt.LeftDockWidgetArea, self.dockWidget)


def main():
    app = QtWidgets.QApplication([])

    # Fusion style is the default style on Linux
    app.setStyle(QtWidgets.QStyleFactory.create("fusion"))
    app.setStyleSheet(CSS)

    win = MyWindow()
    win.show()
    win.raise_()
    app.exec_()

if __name__ == "__main__":
    main()

P.S. I have set the application Qt-style to fusion, which is completely configurable with palettes (unlike e.g. the macintosh style). I prefer a solution that work with all Qt-styles, but if that is not possible I can consider to set my application style to fusion on all platforms.

Upvotes: 9

Views: 1308

Answers (1)

Isma
Isma

Reputation: 15190

I tried your code and I could reproduce the same issue, it seems like a bug to me.

Here is a possible workaround using a custom widget as the title:

from PyQt5.QtWidgets import QLabel

CSS = """
    #CustomTitle {
        background-color: lightblue; 
        border: 1px solid black;
    }

    #CustomTitle:hover {
        background: red;
    }

    QMainWindow::separator {
        background: palette(Midlight);
    }

    QMainWindow::separator:hover {
        background: palette(Mid);
    }
"""

from PyQt5 import QtWidgets
from PyQt5.QtCore import Qt, QSize

class CenteredLabel(QtWidgets.QWidget):

    def __init__(self, text, parent=None):
        super().__init__(parent=parent)
        self.verLayout = QtWidgets.QVBoxLayout()
        self.setLayout(self.verLayout)
        self.horLayout = QtWidgets.QHBoxLayout()
        self.verLayout.addLayout(self.horLayout)
        self.label = QtWidgets.QLabel(text)
        self.horLayout.addWidget(self.label)

    def sizeHint(self):
        return QSize(300, 400)


class MyWindow(QtWidgets.QMainWindow):

    def __init__(self, parent=None):
        super().__init__(parent=parent)
        self.setCentralWidget(CenteredLabel("Central Widget"))
        self.dockWidget = QtWidgets.QDockWidget(parent=self)
        self.dockWidget.setWidget(CenteredLabel("Dock Widget"))
        self.customTitle = QLabel("Dock Title", parent=self.dockWidget)
        self.customTitle.setObjectName("CustomTitle")
        self.dockWidget.setTitleBarWidget(self.customTitle)
        self.addDockWidget(Qt.LeftDockWidgetArea, self.dockWidget)


def main():
    app = QtWidgets.QApplication([])

    # Fusion style is the default style on Linux
    app.setStyle(QtWidgets.QStyleFactory.create("fusion"))
    app.setStyleSheet(CSS)

    win = MyWindow()
    win.show()
    win.raise_()

Upvotes: 2

Related Questions