I am using a QSplitter, but the handle color is not changing, it has always the default color:
m_pSplitMainWin = new QSplitter;
m_pSplitMainWin->setOrientation(Qt::Horizontal);
m_pSplitMainWin->setHandleWidth(10);
m_pSplitMainWin->setStyleSheet("QSplitter::handle:background-color: rgb(55, 100, 110);");
I got some idea from previous post but I am not able to do it with m_pSplitMainWin object
Your CSS syntax is wrong. It should read
QSplitter::handle { background-color: rgb(55, 100, 110); }
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 want to set background color of a selected inactive item in a QTreeView using style sheet as follows:
MyTreeView->setStyleSheet("QTreeView::item:selected:!active { background-color: rgb(150, 180, 220) }");
But the code has no effect in the tree view, but the similar code works for QTableView.
Can anyone tell me what I'm missing here?
Thanks in advance.
rgb(150, 180, 220); you need the semi colon inside too.
I'm trying to change the background color of a QAbstractButton (either a QPushButton or QCheckBox) in Qt5 and having zero luck.
This does nothing:
pButton->setAutoFillBackground(true);
QPalette palette = pButton->palette();
palette.setColor(QPalette::Window, QColor(Qt::blue));
pButton->setPalette(palette);
pButton->show();
and if I try changing the style sheet:
pButton->setStyleSheet("background-color: rgb(255,255,0);");
then Qt throws up its hands and draws an afwul-looking blocky button.
There is a page titled "How to change the background color of QWidget" but it just talks about those two methods.
There is also a page "Qt Style Sheets Examples" that implies that if you want to change the background color, you have to take over all aspects of drawing the button, which just seems like overkill.
I need this to run on Mac, Windows, and Ubuntu Linux, and it's really not a happy thing if I have to manually draw everything about the button 3 times (once for each platform).
Am I missing something obvious?
p.s. By "background color" I mean the area surrounding the button, not the color under the text on the face of the button.
I had the same issue, but finally got this to work. I'm using Qt 5 with the Fusion color theme:
QPalette pal = button->palette();
pal.setColor(QPalette::Button, QColor(Qt::blue));
button->setAutoFillBackground(true);
button->setPalette(pal);
button->update();
Try these commands in the exact order as above, and if that still doesn't work, set your theme to Fusion and try again.
Good luck!
Add propoerty border:none; to the stylesheet
For some reason this removes the default background color also.
Example: background-color: rgba(46, 204, 113, 0.4); border: none;
Try this:
QColor col = QColor(Qt::blue);
if(col.isValid()) {
QString qss = QString("background-color: %1").arg(col.name());
button->setStyleSheet(qss);
}
as mentioned at the QT Forum by #goetz.
I used some different definition of Qcolor col as QColor col = QColor::fromRgb(144,238,144); and this works for me.
Changing the Dialog styleSheet Property works for me, set this property to:
QPushButton:pressed {
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(60, 186, 162, 255), stop:1 rgba(98, 211, 162, 255))
}
QPushButton {
background-color: #3cbaa2; border: 1px solid black;
border-radius: 5px;
}
QPushButton:disabled {
background-color: rgb(170, 170, 127)
}
I found a stupid way, tried every attribute in palette, and it works for me when changing 'QPalette::Base'.
Maybe you can have a try.
pButton->setAutoFillBackground(true);
QPalette palette = pButton->palette();
//palette.setColor(QPalette::Window, QColor(Qt.blue));
//palette.setColor(QPalette::Foreground, QColor(Qt.blue));
palette.setColor(QPalette::Base, QColor(Qt.blue));
//palette.setColor(QPalette::AlternateBase, QColor(Qt.blue));
//palette.setColor(QPalette::ToolTipBase, QColor(Qt.blue));
//palette.setColor(QPalette::ToolTipText, QColor(Qt.blue));
//palette.setColor(QPalette::Text, QColor(Qt.blue));
//palette.setColor(QPalette::Button, QColor(Qt.blue));
//palette.setColor(QPalette::ButtonText, QColor(Qt.blue));
//palette.setColor(QPalette::BrightText, QColor(Qt.blue));
pButton->setPalette(palette);
pButton->show();
reference link : How to get a stylesheet property?
I've struggled with same problem. You need to choose QPalette::Button instead of QPalette::Window. Qt reference says this: QPaletteButton - The general button background color. This background can be different from Window as some styles require a different background color for buttons.
So I solved it this way:
QPalette pal=this->palette(); \\"this" is my derived button class
pal.setColor(QPalette::Window, style.background);
QColor col=style.background; \\ my style wrapper, returns QColor
this->setAutoFillBackground(true);
this->setPalette(pal);
I want to toggle the color of a button On/Off.
This works for me ...
QPalette pal = ui->pushButton->palette();
if (bIn)
pal.setColor(QPalette::Button, QColor(Qt::green));
else
pal.setColor(QPalette::Button, QColor(Qt::red));
ui->pushButton->setPalette(pal);
ui->pushButton->setAutoFillBackground(true);
ui->pushButton->repaint();
I flip the value of bIn on a Clicked Signal/Slot.
void BtnFrame::on_pushButton_clicked()
{
if (bIn)
bIn=false;
else
bIn=true;
setColor();
}
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.