Menu
How could I customize the Title Bar (including: close, maximize, minimize buttons, title) and the Frame of desktop application written in PyQt so that it looks like the below image?. I need a way to specify the colors I want to use for title bar elements (buttons, text title and background-color of bar and buttons). 
the code which I need to change its window:
import sys
from PyQt5 import QtCore, uic
from PyQt5.QtWidgets import QApplication, QDialog
class MainWindow(QDialog):
def __init__(self, parent=None):
QDialog.__init__(self, parent)
self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
self.resize(500, 600)
if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
sys.exit(app.exec_())
Is there any way to do that? I appreciate any suggestion and idea to doing this.
697
#########################################################
## customize Title bar
## dotpy.ir
## [email protected]
#########################################################
import sys
from PyQt4 import QtGui
from PyQt4 import QtCore
from PyQt4.QtCore import Qt
class TitleBar(QtGui.QDialog):
def __init__(self, parent=None):
QtGui.QWidget.__init__(self, parent)
self.setWindowFlags(Qt.FramelessWindowHint);
css = """
QWidget{
Background: #AA00AA;
color:white;
font:12px bold;
font-weight:bold;
border-radius: 1px;
height: 11px;
}
QDialog{
Background-image:url('img/titlebar bg.png');
font-size:12px;
color: black;
}
QToolButton{
Background:#AA00AA;
font-size:11px;
}
QToolButton:hover{
Background: #FF00FF;
font-size:11px;
}
"""
self.setAutoFillBackground(True)
self.setBackgroundRole(QtGui.QPalette.Highlight)
self.setStyleSheet(css)
self.minimize=QtGui.QToolButton(self);
self.minimize.setIcon(QtGui.QIcon('img/min.png'));
self.maximize=QtGui.QToolButton(self);
self.maximize.setIcon(QtGui.QIcon('img/max.png'));
close=QtGui.QToolButton(self);
close.setIcon(QtGui.QIcon('img/close.png'));
self.minimize.setMinimumHeight(10);
close.setMinimumHeight(10);
self.maximize.setMinimumHeight(10);
label=QtGui.QLabel(self);
label.setText("Window Title");
self.setWindowTitle("Window Title");
hbox=QtGui.QHBoxLayout(self);
hbox.addWidget(label);
hbox.addWidget(self.minimize);
hbox.addWidget(self.maximize);
hbox.addWidget(close);
hbox.insertStretch(1,500);
hbox.setSpacing(0);
self.setSizePolicy(QtGui.QSizePolicy.Expanding,QtGui.QSizePolicy.Fixed);
self.maxNormal=False;
close.clicked.connect(self.close);
self.minimize.clicked.connect(self.showSmall);
self.maximize.clicked.connect(self.showMaxRestore);
def showSmall(self):
box.showMinimized();
def showMaxRestore(self):
if(self.maxNormal):
box.showNormal();
self.maxNormal= False;
self.maximize.setIcon(QtGui.QIcon('img/max.png'));
print '1'
else:
box.showMaximized();
self.maxNormal= True;
print '2'
self.maximize.setIcon(QtGui.QIcon('img/max2.png'));
def close(self):
box.close()
def mousePressEvent(self,event):
if event.button() == Qt.LeftButton:
box.moving = True; box.offset = event.pos()
def mouseMoveEvent(self,event):
if box.moving: box.move(event.globalPos()-box.offset)
class Frame(QtGui.QFrame):
def __init__(self, parent=None):
QtGui.QFrame.__init__(self, parent)
self.m_mouse_down= False;
self.setFrameShape(QtGui.QFrame.StyledPanel)
css = """
QFrame{
Background: #D700D7;
color:white;
font:13px ;
font-weight:bold;
}
"""
self.setStyleSheet(css)
self.setWindowFlags(Qt.FramelessWindowHint);
self.setMouseTracking(True);
self.m_titleBar= TitleBar(self);
self.m_content= QtGui.QWidget(self);
vbox=QtGui.QVBoxLayout(self);
vbox.addWidget(self.m_titleBar);
vbox.setMargin(0);
vbox.setSpacing(0);
layout=QtGui.QVBoxLayout(self);
layout.addWidget(self.m_content);
layout.setMargin(5);
layout.setSpacing(0);
vbox.addLayout(layout);
# Allows you to access the content area of the frame
# where widgets and layouts can be added
def contentWidget(self):
return self.m_content
def titleBar(self):
return self.m_titleBar
def mousePressEvent(self,event):
self.m_old_pos = event.pos();
self.m_mouse_down = event.button()== Qt.LeftButton;
def mouseMoveEvent(self,event):
x=event.x();
y=event.y();
def mouseReleaseEvent(self,event):
m_mouse_down=False;
if __name__ == '__main__':
app = QtGui.QApplication(sys.argv);
box = Frame()
box.move(60,60);
l=QtGui.QVBoxLayout(box.contentWidget());
l.setMargin(0);
edit=QtGui.QLabel("""I would've did anything for you to show you how much I adored you
But it's over now, it's too late to save our loveJust promise me you'll think of me
Every time you look up in the sky and see a star 'cuz I'm your star.""");
l.addWidget(edit)
box.show()
app.exec_()
Here's a PyQt5 version of @iraj jelodari's script:
#########################################################
## customize Title bar
## dotpy.ir
## [email protected]
#########################################################
import sys
from PyQt5 import QtWidgets, QtGui
from PyQt5 import QtCore
from PyQt5.QtCore import Qt
class TitleBar(QtWidgets.QDialog):
def __init__(self, parent=None):
QtWidgets.QDialog.__init__(self, parent)
self.setWindowFlags(Qt.FramelessWindowHint)
css = """
QWidget{
Background: #AA00AA;
color:white;
font:12px bold;
font-weight:bold;
border-radius: 1px;
height: 11px;
}
QDialog{
Background-image:url('img/titlebar bg.png');
font-size:12px;
color: black;
}
QToolButton{
Background:#AA00AA;
font-size:11px;
}
QToolButton:hover{
Background: #FF00FF;
font-size:11px;
}
"""
self.setAutoFillBackground(True)
self.setBackgroundRole(QtGui.QPalette.Highlight)
self.setStyleSheet(css)
self.minimize=QtWidgets.QToolButton(self)
self.minimize.setIcon(QtGui.QIcon('img/min.png'))
self.maximize=QtWidgets.QToolButton(self)
self.maximize.setIcon(QtGui.QIcon('img/max.png'))
close=QtWidgets.QToolButton(self)
close.setIcon(QtGui.QIcon('img/close.png'))
self.minimize.setMinimumHeight(10)
close.setMinimumHeight(10)
self.maximize.setMinimumHeight(10)
label=QtWidgets.QLabel(self)
label.setText("Window Title")
self.setWindowTitle("Window Title")
hbox=QtWidgets.QHBoxLayout(self)
hbox.addWidget(label)
hbox.addWidget(self.minimize)
hbox.addWidget(self.maximize)
hbox.addWidget(close)
hbox.insertStretch(1,500)
hbox.setSpacing(0)
self.setSizePolicy(QtWidgets.QSizePolicy.Expanding,QtWidgets.QSizePolicy.Fixed)
self.maxNormal=False
close.clicked.connect(self.close)
self.minimize.clicked.connect(self.showSmall)
self.maximize.clicked.connect(self.showMaxRestore)
def showSmall(self):
box.showMinimized()
def showMaxRestore(self):
if(self.maxNormal):
box.showNormal()
self.maxNormal= False
self.maximize.setIcon(QtGui.QIcon('img/max.png'))
print('1')
else:
box.showMaximized()
self.maxNormal= True
print('2')
self.maximize.setIcon(QtGui.QIcon('img/max2.png'))
def close(self):
box.close()
def mousePressEvent(self,event):
if event.button() == Qt.LeftButton:
box.moving = True
box.offset = event.pos()
def mouseMoveEvent(self,event):
if box.moving: box.move(event.globalPos()-box.offset)
class Frame(QtWidgets.QFrame):
def __init__(self, parent=None):
QtWidgets.QFrame.__init__(self, parent)
self.m_mouse_down= False
self.setFrameShape(QtWidgets.QFrame.StyledPanel)
css = """
QFrame{
Background: #D700D7;
color:white;
font:13px ;
font-weight:bold;
}
"""
self.setStyleSheet(css)
self.setWindowFlags(Qt.FramelessWindowHint)
self.setMouseTracking(True)
self.m_titleBar= TitleBar(self)
self.m_content= QtWidgets.QWidget(self)
vbox=QtWidgets.QVBoxLayout(self)
vbox.addWidget(self.m_titleBar)
vbox.setContentsMargins(0, 0, 0, 0)
vbox.setSpacing(0)
layout=QtWidgets.QVBoxLayout()
layout.addWidget(self.m_content)
layout.setContentsMargins(5, 5, 5, 5)
layout.setSpacing(0)
vbox.addLayout(layout)
# Allows you to access the content area of the frame
# where widgets and layouts can be added
def contentWidget(self):
return self.m_content
def titleBar(self):
return self.m_titleBar
def mousePressEvent(self,event):
self.m_old_pos = event.pos()
self.m_mouse_down = event.button()== Qt.LeftButton
def mouseMoveEvent(self,event):
x=event.x()
y=event.y()
def mouseReleaseEvent(self,event):
m_mouse_down=False
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
box = Frame()
box.move(60,60)
l=QtWidgets.QVBoxLayout(box.contentWidget())
l.setContentsMargins(0, 0, 0, 0)
edit=QtWidgets.QLabel("""I would've did anything for you to show you how much I adored you
But it's over now, it's too late to save our loveJust promise me you'll think of me
Every time you look up in the sky and see a star 'cuz I'm your star.""")
l.addWidget(edit)
box.show()
app.exec_()
answered Oct 04 '22 03:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With