How to disable changing menuItems look in QMenuBar when window loses focus?
Now, when window has focus, menu items are clearly visible, but when it loses focus, items are gray, looks like disabled. I want them to look normal all the time.
My platform is Qt4 on Windows7.
Some simple screenshot of menu item on active and inactive window:
Use QStylesheets and leverage the states of your QMenuItems.
http://www.qtcentre.org/threads/37560-QPushButton-different-stylesheets-for-focus-pressed-released-combinations
QPushButton{ background-color: blue; }
QPushButton:disabled{ background-color: yellow; }
QPushButton:pressed{ background-color: orange; }
QPushButton:focus:pressed{ background-color: black; }
QPushButton:focus{ background-color: green; }
QPushButton:hover{ background-color: red; }
QPushButton:checked{ background-color: pink; }
http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qmenubar
The other option if you want to ignore stylesheets, you could try the palette.
http://doc.qt.io/qt-5/qpalette.html#details
The color groups:
The Active group is used for the window that has keyboard focus.
The Inactive group is used for other windows.
The Disabled group is used for widgets (not windows) that are disabled for some reason.
So you should be able to get the copy of the palette for your QMenuItem, copy the active palette into the inactive palette, and then call setPalette on your QMenuItem. Tada, now it always looks active.
Hope that helps.
Related
In the constructor, I set the style for the form and buttons:
{
ui->setupUi(this);
this->setStyleSheet("QWidget {background: rgb(49, 54, 59); color: rgb(220, 221, 218); selection-color: lightyellow; selection-background-color: darkcyan;}"
"QPushButton::hover {color: darkcyan; border: 2px solid grey; border-radius: 3px};");
}
Next, in the properties (icon parameter) of the button, I added an icon via resources, I also set the icon size using the iconSize parameter - 20x20, I also set the flat - True parameter in.
And this is what I get when I hover the cursor over the button:
The size of the button itself is formed using the layout and the size is 32x26, when the picture is set to 20x20.
Please tell me how you can remove this gap between the picture and the border of the button?
I tried to set the button size statically, about 22x22 and then everything is more or less fine, but I don't want to resort to such a radical solution. Thanks.
Referring to Qt's box model, the gap between the border and the icon is the padding.
In the stylesheet, you can set the padding to 0 as followed padding: 0px;
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);}");
I have a QMenuBar in window, and background color is white, so when action is selected, or mouse is point at action, text color becomes white.
How can i change hover effect color? I tried to change from pallete by changing selected text color, but that doesn't worked
QMenuBar::setStyleSheet()
will do the trick.
You can fully customize the layout of your component. Be aware of using setStyleSheet means you'll completely override the style of the component with your stylesheet.
QString style = "QMenuBar::item:selected { background: white; } QMenuBar::item:pressed { background: white; }"
menuBar.setStyleSheet(style);
I'm trying to programmatically make a QToolButton highlighted when it gains focus. I would like it to be highlighted exactly like when it is selected by mouse hover. Is this possible?
Thank you!
Not sure how familiar you are with stylesheets but this one ought to get you started:
QPushButton:hover { background-color: rgb(224, 255, 0); }
QPushButton:focus { background-color: green; }
I have a Qt QMenu in my app, consisting of two levels (the top level of submenus, then each submenu containing actions), and we have a custom dark-grey style whereby the menu background is grey, the text color is white, and the right arrow is white. When a submenu item is highlighted (mouse-over), the item background is white, the text is black, and I want the right arrow to switch to a black image as well. I'm using a CSS stylesheet to do this. However, I can't seem to find the right syntax to set an alternate right-arrow image for the item selected state. My CSS looks like this:
QMenu
{
background-color: rgb( 24, 24, 24 );
color: white;
}
QMenu::item:selected
{
background-color: white;
color: black;
}
QMenu::right-arrow
{
image: url(Resources/MenuRight.png);
}
I've tried the following additions after the above code (where MenuRightSelected.png is an inverted-color image of MenuRight.png):
QMenu::right-arrow:selected
{
image: url(Resources/MenuRightSelected.png);
}
and
QMenu::item::right-arrow:selected
{
image: url(Resources/MenuRightSelected.png);
}
Neither of these affect the displayed QMenu. Does anyone know if it is possible to do what I'm after, and if so, how?
Possibly you only have to change the order of the items in your css file. I once heard that Qt parses the css files from upwards. Items further up overwrite the behaviour of items further down.