0

i have a menu of branches i want to make the user choose one of the branches by clicking on them.

this is the style that i want :

enter image description here

i want the icon of the branch be in the left and the text be in center.

and i used ToolButton in PyQt5 to do that but i faced a problem:

the problem is that the icon is in the left and the text beside the icon direct without padding or spaces between them.

Like This:

enter image description here

what i want ?:

i want to make the text in center only and the icon in left only.

or a method to be able to control the margin between the items inside the ToolButton

This is my code:


from PyQt5 import QtWidgets
from PyQt5 import QtGui
from PyQt5 import QtCore
from PyQt5.QtCore import QThread
import sys


class HomeBranch:
    def __init__(self):
        self.application = QtWidgets.QApplication(sys.argv)

        self.home_branch_window = QtWidgets.QWidget()
        self.home_branch_window.setStyleSheet("""
        background-color:rgb(255,255,255);
        """)
        self.home_branch_window_layout = QtWidgets.QGridLayout()
        self.home_branch_window_layout.setContentsMargins(0,0,0,0)

        ###########################################################
        #@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        # Create The Menu Of Branches
        #@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        ###########################################################

        self.branches_menu = QtWidgets.QScrollArea()
        self.branches_menu.setWidgetResizable(True)
        self.branches_menu.setGraphicsEffect(QtWidgets.QGraphicsDropShadowEffect(blurRadius=10.0,xOffset=0.0,yOffset=0.0,color=QtGui.QColor(0,0,0,200)))
        self.branches_menu.setContentsMargins(0,0,0,0)
        self.branches_menu.setMaximumWidth(550)
        self.branches_menu.setStyleSheet("""
        QScrollBar:horizontal,QScrollBar:vertical{
        background:rgba(0,0,0,0);
        margin:1000;
        padding:0;
        border:0;
        width:0;
        height:0;
        }
        QScrollBar::add-line:horizontal , QScrollBar::add-line:vertical{
            background: rgba(0, 0, 0,0);
            height: 0;
        }
        
        QScrollBar::sub-line:horizontal ,QScrollBar::sub-line:vertical {
            background: rgba(0, 0, 0,0);
            height: 0;
        }
        QScrollBar::handle:horizontal ,QScrollBar::handle:vertical{
        background-color: rgba(0,0,0,0);
        border-radius: 0;
        }
        QScrollBar::handle::pressed:horizontal ,QScrollBar::handle::pressed:vertical{
        background : rgba(0, 0, 0,0);
        }
        QScrollArea{
        background:rgb(140, 0, 0);
        margin:0;
        padding:0;
        border:0;
        border-bottom-right-radius:20;
        }
        """)
        
        
        self.frame_for_branches_menu = QtWidgets.QFrame()
        self.frame_for_branches_menu.setContentsMargins(0,0,0,0)
        self.frame_for_branches_menu.setStyleSheet("""
        background:rgb(140, 0, 0);
        margin:0;
        padding:0;
        margin-bottom:20;
        border:0;
        """)
        self.frame_for_branches_menu_layout = QtWidgets.QGridLayout()
        self.frame_for_branches_menu_layout.setContentsMargins(0,0,0,0)

        #################################
        #            <item>             #
        #################################
        self.home_branch_tool_button = QtWidgets.QToolButton()
        self.home_branch_tool_button.setFixedHeight(65)
        self.home_branch_tool_button.setText("Home")
        self.home_branch_tool_button.setObjectName("home_branch_tool_button")
        self.home_branch_tool_button.setIcon(QtGui.QIcon(r"icons/home_branch.png"))
        self.home_branch_tool_button.setIconSize(QtCore.QSize(35,35))
        self.home_branch_tool_button.setToolButtonStyle(QtCore.Qt.ToolButtonTextBesideIcon)
        self.home_branch_tool_button.setSizePolicy(QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Fixed))
        self.home_branch_tool_button.setStyleSheet("""
        QToolButton#home_branch_tool_button:hover{
        background-color: qlineargradient(spread:pad, x1:0.494, y1:0.5, x2:0.494, y2:0.494, stop:0 rgba(100,100,100,200));
        }
        QToolButton#home_branch_tool_button:pressed{
        background-color: qlineargradient(spread:pad, x1:0.494, y1:0.5, x2:0.494, y2:0.494, stop:0 rgba(150,150,150,200));
        };
        background-color: rgba(150,150,150,200);
        color:rgb(255,255,255);
        margin:0;
        padding:0;
        border:0;
        border-radius:0;
        font-size:25px;
        """)
        #################################
        #            </item>            #
        #################################

        self.frame_for_branches_menu_layout.addWidget(self.home_branch_tool_button)
        self.frame_for_branches_menu.setLayout(self.frame_for_branches_menu_layout)
        self.branches_menu.setWidget(self.frame_for_branches_menu)

        ###########################################################
        #@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        # The End
        #@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        ###########################################################
        self.home_branch_window_layout.addWidget(self.branches_menu)
        self.home_branch_window.setLayout(self.home_branch_window_layout)
        self.home_branch_window.show()
        self.application.exec()



HomeBranch()

thanks.

Pythoner-sh
  • 134
  • 6
  • 1
    You cannot do that just by using Qt Style Sheets. Besides, your QSS syntax has an important issue: you're setting generic properties (without any proper [selector type](https://doc.qt.io/qt-5/stylesheet-syntax.html#selector-types)) for parent/container widgets, which results in all child widgets to revert to the "common" style look. If you want custom layout of objects, just set a proper layout on the widget (the button, in this case) and add proper child widgets to it, which in your case could be two QLabels: one with a QPixmap to show the icon and another to show the text. – musicamante Jun 25 '23 at 03:09
  • 1
    Alternatively, use a proxy style, as shown in the linked answer for which your post was marked as duplicate. – musicamante Jun 25 '23 at 03:11

0 Answers0