{"id":21792,"date":"2024-03-15T22:36:15","date_gmt":"2024-03-15T22:36:15","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/"},"modified":"2024-03-21T21:19:55","modified_gmt":"2024-03-21T21:19:55","slug":"how-to-customize-the-title-bar-in-pyqt5","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/","title":{"rendered":"How to customize the title bar in PyQt5?"},"content":{"rendered":"<p>To customize the title bar of PyQt5, you need to create a custom title bar area within a QWidget (or its subclasses) and add the desired widgets on it. Here is a simple example:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">from<\/span> PyQt5 <span class=\"hljs-keyword\">import<\/span> QtCore, QtGui, QtWidgets\r\n\r\n<span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title class_\">CustomTitleBar<\/span>(QtWidgets.QWidget):\r\n    <span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title function_\">__init__<\/span>(<span class=\"hljs-params\">self, parent<\/span>):\r\n        <span class=\"hljs-built_in\">super<\/span>().__init__(parent)\r\n        self.setFixedHeight(<span class=\"hljs-number\">30<\/span>)  <span class=\"hljs-comment\"># \u8bbe\u7f6e\u6807\u9898\u680f\u9ad8\u5ea6<\/span>\r\n        layout = QtWidgets.QHBoxLayout(self)\r\n        layout.setContentsMargins(<span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>)  <span class=\"hljs-comment\"># \u8bbe\u7f6e\u8fb9\u8ddd\u4e3a0<\/span>\r\n\r\n        <span class=\"hljs-comment\"># \u521b\u5efa\u6807\u9898\u680f\u7684\u5c0f\u90e8\u4ef6<\/span>\r\n        self.title = QtWidgets.QLabel(<span class=\"hljs-string\">\"Custom Title Bar\"<\/span>)\r\n        self.minimize_button = QtWidgets.QPushButton(<span class=\"hljs-string\">\"-\"<\/span>)\r\n        self.maximize_button = QtWidgets.QPushButton(<span class=\"hljs-string\">\"\u25a1\"<\/span>)\r\n        self.close_button = QtWidgets.QPushButton(<span class=\"hljs-string\">\"\u2715\"<\/span>)\r\n\r\n        <span class=\"hljs-comment\"># \u6dfb\u52a0\u5c0f\u90e8\u4ef6\u5230\u5e03\u5c40<\/span>\r\n        layout.addWidget(self.title)\r\n        layout.addWidget(self.minimize_button)\r\n        layout.addWidget(self.maximize_button)\r\n        layout.addWidget(self.close_button)\r\n\r\n        <span class=\"hljs-comment\"># \u6dfb\u52a0\u6837\u5f0f<\/span>\r\n        self.setStyleSheet(<span class=\"hljs-string\">\"\"\"\r\n            background-color: #333;\r\n            color: #fff;\r\n            font-size: 12px;\r\n            padding-left: 5px;\r\n        \"\"\"<\/span>)\r\n\r\n        <span class=\"hljs-comment\"># \u8fde\u63a5\u6309\u94ae\u7684\u4fe1\u53f7\u4e0e\u69fd<\/span>\r\n        self.minimize_button.clicked.connect(self.parent().showMinimized)\r\n        self.maximize_button.clicked.connect(self.toggleMaximize)\r\n        self.close_button.clicked.connect(self.parent().close)\r\n\r\n    <span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title function_\">toggleMaximize<\/span>(<span class=\"hljs-params\">self<\/span>):\r\n        <span class=\"hljs-keyword\">if<\/span> self.maximize_button.text() == <span class=\"hljs-string\">\"\u25a1\"<\/span>:\r\n            self.parent().showNormal()\r\n            self.maximize_button.setText(<span class=\"hljs-string\">\"\u25a2\"<\/span>)\r\n        <span class=\"hljs-keyword\">else<\/span>:\r\n            self.parent().showMaximized()\r\n            self.maximize_button.setText(<span class=\"hljs-string\">\"\u25a1\"<\/span>)\r\n\r\n<span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title class_\">MainWindow<\/span>(QtWidgets.QMainWindow):\r\n    <span class=\"hljs-keyword\">def<\/span> <span class=\"hljs-title function_\">__init__<\/span>(<span class=\"hljs-params\">self<\/span>):\r\n        <span class=\"hljs-built_in\">super<\/span>().__init__()\r\n        self.setWindowTitle(<span class=\"hljs-string\">\"Custom Title Bar Example\"<\/span>)\r\n\r\n        self.title_bar = CustomTitleBar(self)\r\n        self.setMenuWidget(self.title_bar)\r\n        self.setContentsMargins(<span class=\"hljs-number\">0<\/span>, self.title_bar.height(), <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">0<\/span>)  <span class=\"hljs-comment\"># \u8bbe\u7f6e\u5185\u5bb9\u8fb9\u8ddd<\/span>\r\n\r\n        <span class=\"hljs-comment\"># \u6dfb\u52a0\u5185\u5bb9\u90e8\u4ef6<\/span>\r\n        central_widget = QtWidgets.QWidget(self)\r\n        self.setCentralWidget(central_widget)\r\n        layout = QtWidgets.QHBoxLayout(central_widget)\r\n        label = QtWidgets.QLabel(<span class=\"hljs-string\">\"Custom Window Content\"<\/span>)\r\n        layout.addWidget(label)\r\n\r\n        self.setStyleSheet(<span class=\"hljs-string\">\"\"\"\r\n            QWidget {\r\n                background-color: #eee;\r\n            }\r\n        \"\"\"<\/span>)\r\n\r\n<span class=\"hljs-keyword\">if<\/span> __name__ == <span class=\"hljs-string\">\"__main__\"<\/span>:\r\n    app = QtWidgets.QApplication([])\r\n    window = MainWindow()\r\n    window.show()\r\n    app.exec_()\r\n<\/code><\/pre>\n<p>In this example, we initially create a custom class called CustomTitleBar that inherits from QWidget and displays the title bar widgets (title, minimize button, maximize\/restore button, and close button) in a horizontal layout. We also set some styles for the title bar.<\/p>\n<p>Next, we will create a MainWindow class that inherits from QMainWindow. In its constructor, we will create an instance of CustomTitleBar and set it as the menu widget. We will also ensure that the content is not overlapped by the title bar by setting the margin of the content widget.<\/p>\n<p>Finally, we created an application instance and displayed the main window.<\/p>\n<p>Please note that this example only demonstrates the basic appearance and behavior customization of the title bar. You can modify and expand it according to your own needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To customize the title bar of PyQt5, you need to create a custom title bar area within a QWidget (or its subclasses) and add the desired widgets on it. Here is a simple example: from PyQt5 import QtCore, QtGui, QtWidgets class CustomTitleBar(QtWidgets.QWidget): def __init__(self, parent): super().__init__(parent) self.setFixedHeight(30) # \u8bbe\u7f6e\u6807\u9898\u680f\u9ad8\u5ea6 layout = QtWidgets.QHBoxLayout(self) layout.setContentsMargins(0, 0, 0, [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-21792","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to customize the title bar in PyQt5? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to customize the title bar in PyQt5?\" \/>\n<meta property=\"og:description\" content=\"To customize the title bar of PyQt5, you need to create a custom title bar area within a QWidget (or its subclasses) and add the desired widgets on it. Here is a simple example: from PyQt5 import QtCore, QtGui, QtWidgets class CustomTitleBar(QtWidgets.QWidget): def __init__(self, parent): super().__init__(parent) self.setFixedHeight(30) # \u8bbe\u7f6e\u6807\u9898\u680f\u9ad8\u5ea6 layout = QtWidgets.QHBoxLayout(self) layout.setContentsMargins(0, 0, 0, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T22:36:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T21:19:55+00:00\" \/>\n<meta name=\"author\" content=\"Noah Thompson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noah Thompson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/\"},\"author\":{\"name\":\"Noah Thompson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\"},\"headline\":\"How to customize the title bar in PyQt5?\",\"datePublished\":\"2024-03-15T22:36:15+00:00\",\"dateModified\":\"2024-03-21T21:19:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/\"},\"wordCount\":174,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/\",\"name\":\"How to customize the title bar in PyQt5? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T22:36:15+00:00\",\"dateModified\":\"2024-03-21T21:19:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to customize the title bar in PyQt5?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\",\"name\":\"Noah Thompson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"caption\":\"Noah Thompson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to customize the title bar in PyQt5? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/","og_locale":"en_US","og_type":"article","og_title":"How to customize the title bar in PyQt5?","og_description":"To customize the title bar of PyQt5, you need to create a custom title bar area within a QWidget (or its subclasses) and add the desired widgets on it. Here is a simple example: from PyQt5 import QtCore, QtGui, QtWidgets class CustomTitleBar(QtWidgets.QWidget): def __init__(self, parent): super().__init__(parent) self.setFixedHeight(30) # \u8bbe\u7f6e\u6807\u9898\u680f\u9ad8\u5ea6 layout = QtWidgets.QHBoxLayout(self) layout.setContentsMargins(0, 0, 0, [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T22:36:15+00:00","article_modified_time":"2024-03-21T21:19:55+00:00","author":"Noah Thompson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Noah Thompson","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/"},"author":{"name":"Noah Thompson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a"},"headline":"How to customize the title bar in PyQt5?","datePublished":"2024-03-15T22:36:15+00:00","dateModified":"2024-03-21T21:19:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/"},"wordCount":174,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/","name":"How to customize the title bar in PyQt5? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T22:36:15+00:00","dateModified":"2024-03-21T21:19:55+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-customize-the-title-bar-in-pyqt5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to customize the title bar in PyQt5?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a","name":"Noah Thompson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","caption":"Noah Thompson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=21792"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21792\/revisions"}],"predecessor-version":[{"id":55674,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21792\/revisions\/55674"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=21792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=21792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=21792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}