I'm trying to set a style to a button so that it has no border, but it seems the lack of border then makes the button non-clickable. Is there a better way of getting no border?
button = QtGui.QPushButton(todo, self)
button.move(0, i * 32)
button.setFixedSize(200,32)
button.setCheckable(True)
button.setStyleSheet("QPushButton { background: rgb(75, 75, 75); color: rgb(255, 255, 255); text-align: left; font-size: 12pt; border: none;}")
EDIT: WHOOPS, just noticed this is a Question regarding Qt/Python (and not Qt/C++), well maybe my answer helps anyways..
Just tried it, and it works for me...
Here is the code i used:
#include <QtGui/QApplication>
#include <QtGui/QPushButton>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QWidget w;
QPushButton* button = new QPushButton("i am toggleable", &w);
button->setFixedSize(200,32);
button->setCheckable(true);
button->setStyleSheet(
"QPushButton { \
background: rgb(75, 75, 75);\
color: rgb(255, 255, 255);\
text-align: left;\
font-size: 12pt;\
border: none;\
}\
QPushButton:checked {\
background: rgb(105, 105, 105);\
}\
");
w.show();
return a.exec();
}
notice i added a additional CSS rule for checked buttons, so it gets visible if a Button is checked or not. Are you sure your buttons dont work, or could it be, that you just dont see that they are working ?!
EDIT2: If it doesnt work for you, you could just use setFlat(True), and use additional CSS rules to fix the colors (like in my example).
Related
I want to change the style of the calendar widget; however, I couldn't change the background of the months drop-down menu (which I guess is ComboBox).Also there are some dark gray rects at the sides of the 'Dec 2021' text. How could I change them, too? Thanks in advance.
Here is what I've done so far;
self.dateEdit.setStyleSheet(
f"QDateEdit{{font-size: {int(settings['FONT_SIZE_PRIMARY']*0.6)}px; font-family: {settings['FONT']};\
color: {settings['COLOR_PRIMARY']};background-color: {settings['COLOR_BG_PRIMARY']};}}"
f"QCalendarWidget{{font-size: {int(settings['FONT_SIZE_SECONDARY']*0.7)}px;\
font-family: {settings['FONT']};}}"
f"QAbstractItemView{{background-color: {settings['COLOR_PRIMARY']};}}"
)
The month selection popup is actually a QMenu, so you need to use the appropriate selector.
The navigation bar has a hardcoded object name (qt_calendar_navigationbar), so you can use the #id selector.
QMenu {
background: orange;
}
QMenu::item:selected {
background: yellow;
border-radius: 2px;
}
#qt_calendar_navigationbar {
background: rgb(255, 168, 88)
}
All buttons in the navigation bar have object names (always have a look at the sources to check for those), so you can style them individually:
qt_calendar_prevmonth
qt_calendar_nextmonth
qt_calendar_monthbutton
qt_calendar_yearbutton
qt_calendar_yearedit
I'm trying to apply some stylesheets to my QCalendarWidget, and I already made some changes. Here is my code at the moment:
QCalendarWidget QWidget{
background-color:magenta;
color: green;
}
QCalendarWidget QToolButton{
background-color:black;
color: green;
icon-size: 30px;
}
QCalendarWidget QMenu{
background-color:magenta;
color: green;
}
QCalendarWidget QAbstractItemView:enabled{
background-color: yellow;
color: black;
}
QCalendarWidget QAbstractItemView:disabled{
background-color: yellow;
color: white;
}
QCalendarWidget QMenu{
background-color: rgb(255, 46, 221);
}
QCalendarWidget QSpinBox{
background-color: black;
}
And the result is this:
The problem is that I can't find how I customize the green arrows, the number of the week, and the days of the week. Any suggestions?
This only works for month buttons, is a bit hacky, and keep in mind that it's based on hardcoded private methods. It uses the objectName to get the specific QToolButton ("qt_calendar_prevmonth" and "qt_calendar_nextmonth") and also set the icon. Do not use image: url, as it won't work for QToolButtons.
Theoretically you could also find their object names by going through the layout of the header and check the first and last QToolButtons, which might be a bit "harder", but probably safer, and, after that, you set the stylesheet accordingly.
#qt_calendar_prevmonth {
background-color: blue;
icon-size: 30px;
qproperty-icon: url(prevmonth.svg);
}
#qt_calendar_nextmonth {
background-color: orange;
icon-size: 30px;
qproperty-icon: url(nextmonth.svg);
}
Unfortunately, due to the way QCalendarWidget works, there's no way to change the format of "headers" through stylesheet, so you'll need to stick to QCalendarWidget's headerTextFormat(), dateTextFormat() and so on.
fmt = cal.headerTextFormat()
fmt.setForeground(QtGui.QColor('green'))
fmt.setBackground(QtGui.QColor('orange'))
cal.setHeaderTextFormat(fmt)
I want to know which element did user click.
is there any way to do that?
thank you.
It's hard to understand what exactly you want due to lack of description.
You can try below approach (modify/improve it) to highlight, for instance, clicked button:
java_script = """var el = document.querySelectorAll('button');
for(var i=0;i<el.length;i++)
{
el[i].onclick = function()
{
this.setAttribute('style', "background: yellow; border: 2px solid red;")
};
}"""
driver.execute_script(java_script)
This will allow you to highlight button (change to whatever element type you want) that was clicked.
You can also replace this.setAttribute('style', "background: yellow; border: 2px solid red;") with alert(this.textContent) to show alert with text of clicked element
There seems to be multiple GUI libraries for Python. I wish to develop a desktop application (e.g. for Windows), with a completely custom design - basically, using sprites or mathematical objects. In the case of effects, one requirement is a neon glow for buttons.
Which library/libraries are suitable for this task?
For full screen use showFullScreen() on your widget.
You can use PyQT with QSS for GUI.
QSS : Its a variant of CSS with most of the properties intersecting
with CSS styles and specially designed to work and design the Qt guis
and widgets. But instead of HTML tags we use the Widgets class name
for styling them, like :- QWidget, QLineEdit, QLabel, QPushButton etc.
etc.
e.g.:
QWidget {
background-color: #222222;
}
QLineEdit {
background-color: aliceblue;
color: #618b38;
font-style: italic;
font-weight: bold;
}
QLabel {
background-color: #222222;
color: #618b38;
}
QPushButton {
background-color: #8b0000;
color: #ffffff;
border-radius: 5px;
border-style: none;
height: 25px;
}
I did not yet find out how to make the icons in my QMenu larger. I have tried to define a stylesheet in which the icon size is enlarged. But it doesn't work. Here is my code:
menuStyleSheet = ("""
QMenu {
font-size: 18px;
color: black;
border: 2px solid black;
left: 20px;
background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #cccccc, stop: 1 #ffffff);
}
QMenu::item {
padding: 2px 20px 2px 30px;
border: 1px solid transparent; /* reserve space for selection border */
spacing: 20px;
height: 60px;
}
QMenu::icon {
padding-left: 20px;
width: 50px; /* <- unfortunately, doesn't work */
height: 50px; /* <- unfortunately, doesn't work */
}
""")
#####################################################
# THE PYQT APPLICATION #
#####################################################
class GMainWindow(QMainWindow):
def __init__(self, title):
super(GMainWindow, self).__init__()
...
def setCustomMenuBar(self):
myMenuBar = self.menuBar()
global menuStyleSheet
myMenuBar.setStyleSheet(menuStyleSheet)
# Now add Menus and QActions to myMenuBar..
The result of this code is as follows:
I know that there is an old StackOverflow question about a similar topic, but it assumes that one is coding the Qt application in C++. So the situation is different. Here is the link: How to make Qt icon (in menu bar and tool bar) larger?
Any help is greatly appreciated :-)
EDIT :
Here are some details about my machine:
OS: Windows 10
Python: v3 (Anaconda package)
Qt: PyQt5
After a long search, I finally found the solution.
Just copy-paste the code below, and paste it in a *.py file. Of course, you should replace the path to the icon with a valid path on your local computer. Just provide a complete path ("C:\..") to be 100% sure that Qt finds the icon drawing.
import sys
import os
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
# Create a custom "QProxyStyle" to enlarge the QMenu icons
#-----------------------------------------------------------
class MyProxyStyle(QProxyStyle):
pass
def pixelMetric(self, QStyle_PixelMetric, option=None, widget=None):
if QStyle_PixelMetric == QStyle.PM_SmallIconSize:
return 40
else:
return QProxyStyle.pixelMetric(self, QStyle_PixelMetric, option, widget)
# This is the main window class (with a simple QMenu implemented)
# ------------------------------------------------------------------
class TestWindow(QMainWindow):
def __init__(self):
super(TestWindow, self).__init__()
# 1. Set basic geometry and color.
self.setGeometry(100, 100, 400, 400)
self.setWindowTitle('Hello World')
palette = QPalette()
palette.setColor(QPalette.Window, QColor(200, 200, 200))
self.setPalette(palette)
# 2. Create the central frame.
self.centralFrame = QFrame()
self.centralFrame.setFrameShape(QFrame.NoFrame)
self.setCentralWidget(self.centralFrame)
# 3. Create a menu bar.
myMenuBar = self.menuBar()
fileMenu = myMenuBar.addMenu("&File")
testMenuItem = QAction(QIcon("C:\\my\\path\\myFig.png"), "&Test", self)
testMenuItem.setStatusTip("Test for icon size")
testMenuItem.triggered.connect(lambda: print("Menu item has been clicked!"))
fileMenu.addAction(testMenuItem)
# 4. Show the window.
self.show()
# Start your Qt application based on the new style
#---------------------------------------------------
if __name__== '__main__':
app = QApplication(sys.argv)
myStyle = MyProxyStyle('Fusion') # The proxy style should be based on an existing style,
# like 'Windows', 'Motif', 'Plastique', 'Fusion', ...
app.setStyle(myStyle)
myGUI = TestWindow()
sys.exit(app.exec_())
You will see a window like this, with a huge icon:
So how did I solve it? Well, apparently you cannot increase the icon size of a QMenu item in the usual way - defining the size in the stylesheet. The only way to do it is to provide a new QStyle, preferably derived from an existing QStyle. I found sources on how to do that in C++ (see http://www.qtcentre.org/threads/21187-QMenu-always-displays-icons-aty-16x16-px), but no explanation for PyQt.
After long trials and errors, I got it working :-)
Apparently more people struggle with this situation: http://www.qtcentre.org/threads/61860-QMenu-Icon-Scale-in-PyQt