I am using QscrollArea in in my pyside chat demo application to display messages.
I added style sheet to make scrollbar transparent but, still it hiding my messages.
Below is my style sheet which are written for scrollbar.
QScrollBar:vertical {
background-color:transparent;
width: 8px;
}
QScrollBar::handle:vertical {
background-color: #a0a0a0;
min-height: 25px;
border-radius:4px;
}
QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {
background-color:transparent;
}
My msg ballon look like below when there is no scrollbar appear
and after scrollbar appear it look like below.
You need to adjust your margins on your widgets.
Related
I want to implement list of radiobuttons, but radiobutton shouldn't have a circle and if radiobutton is checked, then the background color is different from the others.
Like in this photo.
(https://i.stack.imgur.com/LsOeE.png)
I think I can use radiobuttons or tabs, but i don't know how to change the styles of this things. Tell me a widget with similar logic or how to change the style of radiobuttons/tabs.
If you don't need the circle of a radio button, then you probably don't need a radio button at all.
Instead, use standard QPushButtons (or QToolButtons) with setCheckable(True) and add them to a QButtonGroup.
win = QWidget()
win.setStyleSheet('''
QPushButton[checkable="true"]::checked {
background: red;
}
''')
layout = QHBoxLayout(win)
group = QButtonGroup()
for title in 'cdefgh':
button = QPushButton(title)
layout.addWidget(button)
button.setCheckable(True)
group.addButton(button)
group.buttons()[0].setChecked(True)
i set css rule:
css = '''
QRadioButton::indicator {
image: none;
}
QRadioButton::checked
{
background-color : red;
}
'''
radioButton.setStyleSheet(css)
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)
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