How to customize the titlebar of a QMdiSubWindow with qss? - qt

I'd like to customize the titlebar of a QMdiSubWindow.
For that I use a qss.
QMdiSubWindow { border: 1px solid #000000; background: #000000 }
QMdiSubWindow:title { background: #000000 }
The problem is when applying this qss, the window icons disappear.
I know it's possible to define these icons in qss for a QDockWidget
QDockWidget { ... titlebar-close-icon: url(myCloseIcon.png); ... }
However I can't find a way to define it for a QMdiSubWindow.
Perhaps this way doesn't exists.
Do you know if it's possible ?

As of Qt 5.2 you can't; haven't checked 5.3 but AFAIK they didn't changed anything in the QMdiArea/QMdiSubWindow in the 5.3 release.
The easiest solution you have is to use QCommonStyle and paint the title bar using QPainter. For more info on that see the QCommonStyle and QStyle documentations. Please note that it is recommended to derive QCommonStyle and not QStyle for your style class. QCommonStyle inherits QStyle so you won't loose anything.
And if you want to achieve more complex effects such as drop shadow on the sub window then the only option you have left here is to derive QMdiSubWindow and QMdiArea, call QWidget::setWindowFlags(Qt::FramelessWindowHintflag) on the QMdiSubWindow derived class and implement from scratch your own subwindow with your own title bar. You can then define your own Q_PROPERTYs of type QColor and access those from QSS like exposed here in order to customize titlebar colors from QSS.
Another option would be to create a new MDI area widget from scratch but I don't think this would be applicable in your case. If you just need to customize the title bar using a custom style is the best approach you can tackle. If in trouble examples could be provided as an edit to this post.
But if you want to customize the standard QMdiSubWindow using just QSS, unfortunately it is not possible for the moment.

Related

Is there any solution to change color of QTableWidget's heads and items separately?

Is there any solution to change the font color of QTableWidget's heads and items separately using Qt Designer? I want to make a complete design in Qt Designer without using code to set any styles
I wanted to add this as a comment but unfortunately my reputation is too low.
This should be possible by using a Stylesheet in the property editor. I can't test it right now but I assume it should look like these:
QTableWidget {
color: red;
}
QHeaderView {
color: blue;
}
Edit: I saw later that you asked without using code to set any styles. This is as far as I know not possible. But you can set the Style in property editor as I suggested, s.t. you can see the changes in the Qt Designer directly.

How to change group widget content background color in Qt Style CSS

I'm trying to change skin of a program that supports Qt Style CSS, but I don't have access to the source code. I need to change the background color of the groups inside a QWidget,
I tried with:
QWidget {
background-color: #4d4d4d;
}
But it changes the color of the whole window, but I can still see the rectangle semi-transparent (like black 95% opacity). What class do I need to edit to change that particular box?
You are changing the style for the class QWidget which is the base for any Qt widget.
If you want to change the style for the group only, that's the QGroupBox class.
QGroupBox{
background-color: #4d4d4d;
}
Some QSS examples in the doc : https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qgroupbox
If you want to set the style on a specific widget of the application you will need more information from the code.

QPushButton stylesheet when setCheckable(true)

When I use
myButton->setCheckable(true);
There is -I don't know how to call it- a sort of grid :
Is it possible to not have this grid and here just my green background ?
Use the checked property:
QPushButton:checked{
background-color: ...
border: none;
}
Same applies for pressed if you want to alter that too.
Note: You can read all about the properties here (just search for QPushButton to find the properties that are part of the button. Removing the border seems to be necessary based on the documentation (otherwise the background colour might not be applied).

Change StyleSheet of QToolBox in Qt

I am designing a GUI in Qt. I have a MainWindow and a QToolBox in it. The class of my MainWindow is QTabWidget.
According to the following pictures, I have a QToolBox with two tab named Encoder and Decoder.
I could change the background color of each tab and its border.
But I don't know how to change the color of background of each pane/tab.
For example I want to change the color of Decoder pane to blue as follow.
It is possible to put a frame-widget to page and change its background.
But is it possible to change the stylesheet of QToolBox directly.
Use this stylesheet to access certain pages in QToolBox:
QWidget#page,
QWidget#page_2,
{
background: blue
}
Where page and page_2 are object names of your pages. You can find them in QtDesigner - currentItemName.
Or use this stylesheet to apply changes to all pages:
QToolBox QScrollArea>QWidget>QWidget
{
background: blue;
}
Have you tried:
QToolBox tb;
tb.setStyleSheet("background-color: blue");
If that won't do for you, there is a good list of examples on Qt Style Sheets. Maybe you can find what you want from here.

Styling QPushButton with CSS?

I'm trying to create a QPushButton that's just got an icon and a constant background color.
So that I can swap out the icon when the user clicks it, without any other apparent effects (this is for a roll-up/roll-down feature). I've added an entry like this to my stylesheet:
QPushButton.ToggleButton {
background-color: #8af;
}
and set the button's class to match, and this does indeed give me the look I want, except that when I click on it the background color changes to a lighter blue, which I don't want. What am I missing?
Edit: I guess I should mention I'm using Qt 4.5 and PyQt 4.6 to do this...
I know people like using stylesheets, but in this situation I think it is just as easy to make a custom button. Define a class that inherits from QAbstractButton, and override the paint() method. In the paint method, fill the rect with your desired background color, and then paint the current icon on top. It might be slightly more complicated if you want the border around the button as well, but not a lot.
Alternately, you could also look at the roles for QPalette, specifically QPalette::Light and QPalette::Midlight, which might be used to adjust the color of the button when pressed.
Answer
Try giving the button an ID with QObject::setObjectName and then applying the style with #idSelector?
In Python the code would probably look something like this:
button = QPushButton(self)
button.setObjectName("ToggleButton")
and stylesheet like this:
#ToggleButton:pressed {
background-color: #8af;
}
Further reading
The QFriendFeed example application at Forum Nokia is using Qt style sheets heavily to customize the UI.
I'm guessing doing background-color: #8af !important; would be too obvious so I'm assuming that doesn't work. It's worth a try if you haven't done it yet.
Otherwise, as noted in this question, there are specific states you can style. Try setting the same background color for the pressed state:
QPushButton.ToggleButton:pressed { background-color: #8af; }
Sorry if I misunderstood. Hope that helps.
open the button's stylesheet in Qt designer and try this:
QPushButton:pressed {
image: url(/path/to/your/file/fileName.png);
}

Resources