I'm trying to change the width of a vertical QScrollBar with a custom stylesheet like
QScrollBar:vertical
{
border: 2px solid grey;
background: #32CC99;
width: 10px;
margin: 22px 0 22px 0;"
}
QScrollBar:vertical:hover {
background: red;
width: 25px ;
}
It doesn't work. Did I make any mistake? Can't we change the width of widget in run-time?
You should try
QScrollBar::handle:hover {
background: red;
width: 25px;
}
It works for me
I don't think there is a way of doing this by using the stylesheets alone.
You could create your own scrollbar and override the enterEvent and leaveEvent and change the stylesheet there.
You could also install an event filter to your existing scrollbar (you can get your scrollbar by using the QAbstractScrollArea::verticalScrollBar() function) and listen to the same events and change the stylesheet there.
Related
In Qt I set a background image for a QPushButton, then I added a tooltip for this button and the tooltip has the same background image as the button and I couldn't change it with stylesheet, what am I missing?
In my code I have:
button->setStyleSheet("background-image: url(pathToImage);");
button->setToolTip("Click here");
In my style.qss I have:
QToolTip{
background-image: none;
background-color: white;
font-size: 20px;
border: 1px solid black;
}
The font-size and the border works, but the tooltip's background-image is the same as the button's.
I also tried adding another background-image to the tooltip, it didn't worked either.
How can I change the tooltip's background?
You have to specify the QWidget where to apply the property. If you dont do so, it will apply it to all the childrens of the widget.
In your case, to avoid the background image in the tooltip you have to specify that you want to apply that style to a QPushButton widget. The documentation says:
If we want the property to apply only to the QLineEdits that are children (or grandchildren or grand-grandchildren) of a specific dialog, we would rather do this:
myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
In the example you mention, if you want to modify the style of the tooltip and the button, do something like this:
ui->pushButton->setStyleSheet(""
"QPushButton { background-image: url(me.png); }"
"QToolTip { color: #ffffff; background-color: #000000; border: 0px; }");
It will give you something like this
Update:
If you want to apply it to a single object and not the rest of the widgets of the same type, the documentation says:
If we want the property to apply only to one specific QLineEdit, we can give it a name using QObject::setObjectName() and use an ID Selector to refer to it:
myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");
So in your case:
ui->pushButton->setObjectName("awesomeButton");
ui->pushButton->setStyleSheet("QPushButton#awesomeButton { background-image: url(me.png); }");
When you set qss with setStyleSheet your stylesheet applies for all children of object. In your case you can avoid this using stylesheet for QPushButton only
button->setStyleSheet("QPushButton {background-image: url(pathToImage);}");
For already existed Qt project I'd like set border for focused widgets through qss-fle. But I faced out with some unexpected result. When I change border of QSpinBox (and QDoubleSpinBox) border will change as I expect but up-button and down-button change too and look ugly.
Here is my style definition (full example available here):
QSpinBox:focus
{
border-width: 2px;
border-style: solid;
border-color: green;
}
My question is: how to change appearance of border and simultaneously preserve appearance of up-button and down-button. Solution what I am looking for shouldn't be cross platform or cross version.
My environment:
- KUbuntu 15.10 (amd64);
- Qt 5.4 (x64).
Update:
Here is one more example with another style:
QSpinBox
{
border-width: 2px;
border-style: solid;
border-color : red;
}
QSpinBox:hover
{
border-width: 2px;
border-style: solid;
border-color: blue;
}
The widget looks like this:
When you apply a style sheet to the QSpinBox, this widget is completely painted using the QStyleSheetStyle (this class is not part of the public API).
So you have to either style your spin box completely, including the up/down buttons or not to use the style sheet at all.
That up/down buttons are not separated widgets, so you can't apply a different style to them.
So I suggest to subclass the QSpinBox and reimplement the paintEvent() method. In your paintEvent() method you will just call it's default implementation and than you will draw a rectangle around.
try to edit your qss file with another random style to see if it's consistent.
QSpinBox
{
border-width: 2px;
border-style: solid;
border-color : red;
}
QSpinBox:hover
{
border-width: 2px;
border-style: solid;
border-color: blue;
}
Edit :
I see that your arrows are still in bad form so I would suggest you two things :
style also your up-down arrows with background image property or so (take a screen shot of the desired arrows..or so)
forger to style this part via stylesheet and override the "QPaintEvent onFocus handler" by code. Setting the border as green wouldn't be so painful
What happens when font family and size supplied by stylesheet of QTreeView differ from the ones returned by the model assigned to it? So far it seems like model's data overrides stylesheet settings. How do I change font of a view with a custom model assigned to it then?
Or to be more precise: if I know I want to style the view with stylesheet - what do I return from model when ::FontRole is requested?
UPD: just in case I am doing something stupid, here is my stylesheet that I assign to qtreeview:
QTreeView::item:selected
{
color: black;
font-family:"Times New Roman", Times, serif;
}
QTreeView::item:has-children
{
font-family: "Comic Sans MS", cursive, sans-serif;
height: 25px;
border-bottom: 1px solid;
border-bottom-color: green ;
border-top: 1px;
}
After some asking around and googling it turned out that styling text in QTreeView should be done on QTreeView instead of QTreeView::item
I'm trying to make the parent items in my QTreeView taller, have larger fonts, a custom expanded/collapsed icon in the right and be underlined. Here's my style sheet so far:
QTreeView::item:has-children
{
font: bold 24px;
height: 20px;
border-bottom: 2px groove lightgray;
}
QTreeView::branch:closed:has-children
{
border-bottom: 2px groove lightgray;
image: url(:/images/collapsed.png);
}
QTreeView::branch:open:has-children
{
border-bottom: 2px groove lightgray;
image: url(:/images/expanded.png);
}
Some of the styles are working. The underline on the branch and item only appears when the item has children which is what I wanted. The icon has changed which is also good. However, the "height" and "font" are not being respected and all items have the same height and font. QTreeView::item:has-children seems valid because the border-bottom is respected. If I set "height" for simply "QTreeView::item", all items get that height but "font" still doesn't work. Can anybody help me with the syntax here?
The tree view has the following properties set in designer:
frameShape: NoFrame
frameShadow: Plain
editTriggers: NoEditTriggers
selectionMode: NoSelection
animated: true
headerHidden: true
The rest of the properties are defaults
I'm developing Qt application for Mac OS X.
Problem is when I create QToolButton it apears with some outline.
http://i.stack.imgur.com/vqtP9.png
I use next stylesheet
QToolButton {
border: 1px solid #575757;
border-radius: 4px;
}
How to remove the outline?
ANSWER:
I didn't mentioned that I'm adding this item to statusBar().
To remove border around the item I used:
QStatusBar::item {border: 0px;}
Have you tried this ?
QToolButton {
border: 1px solid #575757;
border-radius: 4px;
background-color: palette(base);
}
Usually, web best-practices recommand that if you change one color, you have to change them all.
It is likely that you will also have to change the text color as well to avoid potential issues on some computers with non-default window text color.
use this :
yourWidgetElement->setFocusPolicy(Qt::NoFocus ) ;