QToolButton - Text on top of icon

2,178 views
Skip to first unread message

Arvid Schneider

unread,
Mar 15, 2016, 3:41:31 PM3/15/16
to Python Programming for Autodesk Maya
Hi there, 
been searching the forums quite a bit..but couldnt find something reasonable. 
I have a QToolButton and an icon. I dont want to bake the text into the icon image, I d rather have a text using btn.setText("Text").
The problem the text is set right underneath the icon which I dont want in my case. 
It should be on top of the icon. Is there any way to do that? 
I guess with a custom QToolButton..could someone help me out there?

btn = QtGui.QToolButton()
btn.setText("Text")
icon = QtGui.QIcon()
icon.addPixmap(os.path.join('path_to_icon.png', QtGui.QIcon.Normal, QtGui.QIcon.On)
btn.setIcon(icon)

ideally:
icon.setToolButtonStyle(QtCore.Qt.ToolButtonTextOnTopIcon


Is there a way to offset the text using style sheet?
Any help is appreciated

Justin Israel

unread,
Mar 15, 2016, 5:39:42 PM3/15/16
to Python Programming for Autodesk Maya
Hey Arvid,

You could do it with StyleSheets but the pain in the butt is that once you start defining some of the button style stuff, you have to define all of the look. i.e. the gradients and borders, etc.. 

Another way that you could solve this is to just do a custom layout inside of the button:

b = QtGui.QToolButton()
l = QtGui.QVBoxLayout(b)
text = QtGui.QLabel("Text")
pic = QtGui.QLabel()
pic.setPixmap('path_to_icon.png')
pic.setScaledContents(True)
l.addWidget(text, 0, QtCore.Qt.AlignCenter)
l.addWidget(pic, 0, QtCore.Qt.AlignCenter)
b.setMinimumSize(100, 60)


--Justin


--
You received this message because you are subscribed to the Google Groups "Python Programming for Autodesk Maya" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_m...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/python_inside_maya/1b3c3979-741f-476d-99ea-da96b656819b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Marcus Ottosson

unread,
Mar 15, 2016, 5:47:53 PM3/15/16
to python_in...@googlegroups.com
Yeah, as soon as you apply even an empty stylesheet, most of the native look is gone. Tis pity. :(

A custom layout, or custom toolbutton is what I would do. Possibly reshuffle the widgets so one ends up ontop of the other, they are likely in a regular QVBoxLayout internally.


For more options, visit https://groups.google.com/d/optout.



--
Marcus Ottosson
konstr...@gmail.com

Arvid Schneider

unread,
Mar 15, 2016, 6:13:17 PM3/15/16
to python_in...@googlegroups.com
Thanks you two! Always a life saver!
I will try it with custom layouts, and keep you posted. 


Arvid Schneider

unread,
Mar 16, 2016, 6:03:51 AM3/16/16
to Python Programming for Autodesk Maya
HI Justin, 
I ve tried your example. I didnt mean with "on top" that the text should come first then the icon in the vertical layout. 
If I have square btn, I want the text to float on top of the icon. 
Check the attachment

To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_maya+unsub...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Python Programming for Autodesk Maya" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_maya+unsub...@googlegroups.com.
--
Marcus Ottosson
konstr...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Python Programming for Autodesk Maya" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_maya+unsub...@googlegroups.com.
Screenshot from 2016-03-16 10:02:56.png

Justin Israel

unread,
Mar 16, 2016, 9:10:50 PM3/16/16
to Python Programming for Autodesk Maya
That's actually almost the exact same code in the example that I gave, except instead of adding both the image and the text as individual objects to the layout, you just set the picture on the button, and only add the text to the layout. The result is that the image is drawn, centered in the button, and the text is laid out over it in the center.

Justin

To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_m...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Python Programming for Autodesk Maya" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_m...@googlegroups.com.
--
Marcus Ottosson
konstr...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Python Programming for Autodesk Maya" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_m...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Python Programming for Autodesk Maya" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_m...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/python_inside_maya/aed9e52b-57e5-403e-a7c1-f27890ed91af%40googlegroups.com.

Arvid Schneider

unread,
Mar 17, 2016, 6:49:51 AM3/17/16
to Python Programming for Autodesk Maya
Damn.. thanks Justin! That work splendid

b = QtGui.QToolButton()
l
= QtGui.QVBoxLayout(b)

b
.setFixedSize(50, 50)
b
.setIconSize(QtCore.QSize(50,50))
standardFont
= QtGui.QFont("Arial", 10, QtGui.QFont.Bold)
standardFont
.setCapitalization(QtGui.QFont.AllUppercase)

text
= QtGui.QLabel("Text")

b
.setIcon(QtGui.QIcon(os.path.join(ICON_DIR, 'csLighting_ftrackTime.png')))
l
.setContentsMargins(0,0,0,0)
l
.addStretch()
l
.addWidget(text, 0, QtCore.Qt.AlignCenter)
text
.setFont(standardFont)
b
.show()

To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_maya+unsub...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Python Programming for Autodesk Maya" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_maya+unsub...@googlegroups.com.
--
Marcus Ottosson
konstr...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Python Programming for Autodesk Maya" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_maya+unsub...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Python Programming for Autodesk Maya" group.
To unsubscribe from this group and stop receiving emails from it, send an email to python_inside_maya+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages