I am having some issues styling my QComboBoxes. I want to have them highlight when mouse over, but it seems they retain the highlight if I click on them and then close the pop-up (either by clicking outside or by selecting something, does not matter). I am using Qt 5.13.1 and I see this issue on macOS and Linux. Haven't tested on others but I guess it would be the same.
My style is this simple, maybe I am missing something:
QComboBox:hover
{
background-color: rgba(0, 0, 0, 0.2);
}
Is this what you're looking for? Or do you mean the hover color of the QComboBox when you did not yet press to view all the other options?
QComboBox QAbstractItemView
{
selection-color: white;
selection-background-color: black;
}
EDIT (after reading the comments):
Right click on the combobox in the designer space and chose go to slot.
Then press CurrentIndexChanged(int) and change the code of the slot to this:
void MainWindow::on_comboBox_currentIndexChanged(int index)
{
ui->comboBox->setStyleSheet("QComboBox:!editable, QComboBox::drop-down:editable {"
"background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,"
"stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,"
"stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);}");
}
Ok, I managed to work around this issue, will write it here in case anybody else has this problem. I quit trying to use qss and did it in the code. Subclassed the QComboBox and added the hover events:
bool TrackableComboBox::event(QEvent *event)
{
switch (event->type())
{
case QEvent::Enter:
this->setStyleSheet("background-color: rgba(0, 0, 0, 0.2);");
break;
case QEvent::Leave:
case QEvent::MouseButtonPress:
this->setStyleSheet("background-color: -1;");
break;
default:
break;
}
return QWidget::event(event);
}
The secret here is to add Leave and MouseButtonPress reset the color, otherwise you will have the same issue.
Related
Trying to style qt widget, I need different colors for hover, while the mouse is pressed, disabled and normal state. I m not able to change color for the pressed state. Please, help?
QWidget
{
background-color: rgb(170, 170, 255);
}
QWidget:hover
{
background-color: rgb(0, 170, 0);
}
QWidget:pressed
{
background-color: rgb(255, 0, 0);
}
QWidget does not have ":hover" and ":pressed" pseudo-states supported. However, you can simulate these pseudo-states through dynamic properties. Still, in order to use such a mechanism, you would have to do the following things first (you can choose whichever you like):
Install event filter on your QWidget instance. This event filter would have to react to the following events: QEvent::Enter and QEvent::Leave for hover state. And then, QEvent::MouseButtonPress would need to be used for the mouse press state. Regarding event types, you can read more here. Also, there might be circumstances where you would need to react to the current mouse position. However, by not knowing your exact use case it is hard to tell if you need that or not.
Implement custom class that would be a child of QWidget. By doing so, you would need to override the following methods:
virtual void enterEvent(QEvent *event)
virtual void leaveEvent(QEvent *event)
virtual void mousePressEvent(QMouseEvent *event)
Now, in each implementation you would have to set your own dynamic property. The following example illustrates just how to set a dynamic property and ensure it gets styled on run-time:
ui->someWidget->setProperty("property_applied", true);
// This is the limitationn. You can read more about it here: https://wiki.qt.io/Dynamic_Properties_and_Stylesheets
ui->someWidget->style()->unpolish(ui->someWidget);
ui->someWidget->style()->polish(ui->someWidget);
When styling by dynamic properties, you can set the following stylesheet:
#someWidget[property_applied=true] {
background-color: #ff0000;
}
#someWidget[property_applied=false] {
background-color: #00ff00;
}
In other words, it would be not too hard to implement the following styling mechanism through usage of event filters or custom widget implementation and dynamic properties:
QWidget {
background-color: rgb(170, 170, 255);
}
QWidget[hover=true] {
background-color: rgb(0, 170, 0);
}
QWidget[pressed=true] {
background-color: rgb(255, 0, 0);
}
I have a QTableWidget with a few QTableWidgetItem's in it. To style it I use:
QTableWidget::item {
...
}
Now a few of the items are read only. How can I color them differently using the stylesheet? Normaly I would use a property and then select with:
QTableWidgetItem[readOnly="true"]
But this doesn't work since we define the style of the QTableWidget and QTableWidgetItem has no method setProperty.
Normally the styling should be
WIDGET::SUB-CONTROL:PSEUDO-STATE
Please try as said below.
QTableWidget::item:read-only {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
}
For list of Sub-Controls and Pseudo-States refer below link:
http://doc.qt.io/qt-5/stylesheet-reference.html#selection-color-prop
System: Linux Mint, QT Creator from Repo -> QT Version 5.2, C++)
I've created a Customwidget wich Im using inside a QTreeView
OwnItem *OI = new OwnItem;
QTreeWidgetItem *itemN = new QTreeWidgetItem();
ui->ProjektListe->addTopLevelItem(itemN);
ui->ProjektListe->setItemWidget(itemN, 0, OI);
What I want is to set up a Stylesheet for the QTreeWidget including a Backgroundcolor and a Textcolor in Normal Mode and Selected Mode.
So far:
QTreeWidget::item{
background-color: rgb(255, 255, 255);
color: rgb(255, 255, 0);
}
QTreeWidget::item:selected{
background-color: #157efb;
color: rgb(255, 0, 0);
}
The Problem is that The Backgroundcolor works, the Color (TextColor) not (in both Cases). Im aware that when stylesheets for childs are set separately this won't work but the widget itself and all of its children (Some Labels and Buttons) are "Sylesheet" free.
The only Case "color: .... " for TextColor works is this case
QWidget{
color: rgb(85, 0, 0);
}
But this wont work with the "selected" status
My anser is in C++ not for the CSS but you can create a QPalette then set the values that you want to with the function void QPalette::setColor ( ColorGroup group, ColorRole role, const QColor & color ) so for you it should me something like:
QTreeWidget tree(a);
QPalette palette;
palette.setColor(QPalette::Window, QColor(255, 255, 255));
palette.setColor(QPalette::WindowText, QColor(255, 255, 0));
palette.setColor(QPalette::Highlight, QColor(255, 0, 0))
palette.setColor(QPalette::HighlightedText, QColor(0, 0, 255));
QList<QTreeWidgetItem> treeItems = tree.findChildren<QTreeWidgetItem*>();
foreach (QTreeWidgetItem *w : treeItems) {
w.setPalette(palette);
}
the findChildren will return a list with all the children to the widget then you can set the palette. To find the list of the colors groups you can go here: http://qt-project.org/doc/qt-4.8/qpalette.html#setColor then click on the ColorGroup type in the parameter then you will be are here: http://qt-project.org/doc/qt-4.8/qpalette.html#ColorGroup-enum
Good luck !
So I am trying to change only the background color of my MainWindow. When I try to do this using this->setStyleSheet("background-color:black;"); for example it changes the background of everything: child widgets, QTextBoxEdit background, everything.
Is there a way to only change the background of just the main window?
As you know, every QMainWindow has a central widget and by default is named centralwidget.
So the best way of solving this issue is changing the background for that widget.
It's pretty simple when we use a style sheet. In this case would be the following one:
#centralwidget {
background-color: rgb(0, 0, 0);
}
you can use Qt class name before QSS, like
QMainWindow { background-color: rgb(0, 0, 0);}
in your example QMainWindow > QWidget { background-color: rgb(0, 0, 0);} maybe better.
please see http://doc.qt.io/qt-4.8/stylesheet-syntax.html for more information
I have a JavaFX 2 application, where all my buttons use the default style (grey gradient). In some special areas of the application, the background color is red, yellow or green. In these areas, I also have buttons.
Instead of re-styling all the different states (normal, hover, pressed) of the button in all three colors, I'd like to just give the button the tint of the background. Is this possible, and how?
If not, is there a way to easily re-style the base button style, and have the hover and pressed states (pseudo-selectors) automatically derived from this style?
If that's not possible, I'm open for suggestions.. My most important goal is to avoid redundant/duplicate declarations (especially of gradients), in case someone wants to add a different color panel later, or just change the shade of one of the background colors.
CSS for the red panel/button:
#my-red-panel {
-fx-border-width: 1;
-fx-border-radius: 5;
-fx-background-radius: 5;
-fx-smooth: true;
-fx-border-color: rgb(209, 65, 42);
-fx-background-color: rgba(255, 78, 50, 0.89);
}
#my-red-panel .button {
-fx-background: rgba(0, 0, 0, 0); /* Now borders look good, but button is still grey*/
}
My best bet so far, is to use a semi-transparent gradient, like so:
#my-red-panel .button {
-fx-background-color: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
}
I still have to declare each state, but at least I can change the underlying colors without having to modify each state. The main problem is that this overrides the entire look of the button, so I was hoping for something better... :-/
Not tested, but try experimenting with:
#my-red-panel {
-fx-base: rgba(255, 78, 50, 0.89);
}
or perhaps:
#my-red-panel .button {
-fx-base: ... ;
}
depending on the exact effects you want.
The trick here is that the default css (caspian.css for JavaFX2.2 or modena.css for JavaFX8) use some pre-defined lookup colors. You can dig out the source for these to see how they are used. If you redefine these lookups for a node in the scene graph, the new definition is propagated to all child nodes.