In qt you normally set the color of a QWidget with the QPalette.
Example:
QPalette palette = new QPalette();
palette.setBrush(QPalette::Base, this->palette().backgorund());
QLineEdit *line = new QLineEdit();
line->setPalette(palette);
Now I have a little problem. It is not possible to change the bordercolor of a QLineEdit with the QPalette. That means, that I have to use a QStyleSheet.
Example:
QLineEdit *line = new QLineEdit();
line.setStyleSheet("border: 1px solid green");
But now I can't set the basecolor of the QLineEdit with QPalette, because the background-color of QLineEdit is not longer connected to QPalette::base.
That means, that the following code wouldn't change the background-color of the QLineEdit:
QPalette palette = new QPalette();
palette.setBrush(QPalette::Base, this->palette().backgorund());
QLineEdit *line = new QLineEdit();
line->setPalette(palette);
line->setStyleSheet("border: 1px solid green");
But it is not possible, to define the background-color of the QLineEdit in the StyleSheet, because the background-color of the QLineEdit have to be dynamically.
My question: How to connect the background-color of the QLineEdit with QPalette::base to define the background-color of QLineEdit dynamically with QPalette?
Alternatively:
line->setStyleSheet(QStringLiteral(
"border: 1px solid green;"
"background-color: palette(base);"
));
Reference: http://doc.qt.io/qt-5/stylesheet-reference.html#paletterole
Using PaletteRole also lets the CSS be in a separate file/source.
Just construct the required QString at runtime...
auto style_sheet = QString("border: 1px solid green;"
"background-color: #%1;")
.arg(QPalette().color(QPalette::Base).rgba(), 0, 16);
The above should result in a QString such as...
border: 1px solid green;
background-color: #ffffffff;
Then...
line->setStyleSheet(style_sheet);
I found a solution for my situation. Because I only want to mask the border, and don't want to color it, I can use the method QLineEdit::setFrame(bool). But what is, if I want to color the frame like in my example above? I didn't find a solution for that so far. I am happy about every answer.
Related
I would like to change color of my progress bar from default green to red. I have this code, but the view is "flat", I would like to achieve something like "3d effect" as on picture below:
Code for red PB:
QPalette pal = ui->pbExtractionWidget->palette();
pal.setColor(QPalette::Normal, QColor(Qt::red));
QString danger = "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #FF0350,stop: 0.4999 #FF0020,stop: 0.5 #FF0019,stop: 1 #FF0000 );border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;border: .px solid black;}";
ui->pbExtractionWidget->setStyleSheet(danger);
This is how it looks:
This link provides a way to style the progressbar.
This link provides a way to change gradient color for widgets.
Essentially, you just need to change the stylesheet correctly. Each Chunk is a piece of the progressbar.
Or use QPalette which uses Base to color the background of a widget. Set its gradient correctly and then do the following.
palette.setBrush( QPalette::Base, gradientVariable);
ui->pbExtractionWidget->setPalette(palette);
// In main.cpp
qDebug() << QStyleFactory::keys();
// If keys contains e.g. 'Fusion' it would be possible to change color of QProgressBar.
// On windows default style is 'Windows' and color can only be change with style sheets.
auto style = QStyleFactory::create("Fusion");
if (style) {
app.setStyle(style);
}
class MyProgressBar final : public QProgressBar {
void paintEvent(QPaintEvent*) final {
QStyleOptionProgressBar option{};
initStyleOption(&option);
option.textAlignment = Qt::AlignHCenter;
option.palette.setColor(QPalette::Highlight, QColor("lightskyblue"));
option.palette.setColor(QPalette::HighlightedText, option.palette.color(QPalette::Text));
QPainter painter{this};
style()->drawControl(QStyle::CE_ProgressBar, &option, &painter, this);
}
};
You have to set the stylesheet correctly, use below stylesheet code
QString danger = "QProgressBar::chunk: horizontal {border-radius: 3px; background: QLinearGradient(X1:0, y1:0.966136, x2:0, y2:0, stop:0.609721 rgba(242, 53, 53, 255), stop:0.691923 rgba(240, 151, 141, 252));border: .px solid black;}";
ui->progressBar->setStyleSheet(danger);
I am trying to change the background color of my TextField "colorBox0" to "value0" but it gets rid of the border.
Here is a simplified version of my code:
static Paint value0 = Paint.valueOf("FFFFFF");
TextField colorBox0;
colorBox0.setBackground(new Background(new BackgroundFill(value0, CornerRadii.EMPTY, Insets.EMPTY)));
Any help is very much appreciated
Thank you
I found that you can construct a string of css code out of a string and a variable by using the to string method and the substring method like this:
colorBox0
.setStyle("-fx-control-inner-background: #"+value0.toString().substring(2));
Looking at the (shortened) default JavaFX styles for the TextField explains a lot:
.text-input {
-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1;
-fx-background-radius: 3, 2;
}
So the background is a layered background including the border. This technique is used a lot throughout JavaFX. But it is very easy to modify just one color.
First we need to assign a new custom style class to our TextField:
TextField textField = new TextField();
textField.getStyleClass().add("custom");
and the CSS file:
.custom {
-fx-control-inner-background: orange;
}
As you can see, you do not have to override all styles of the textfield, it is sufficient to only override the color variable used for the background.
Try to set the color using CSS:
TextField colorBox0;
colorBox0.setStyle("-fx-background-color: white;");
Elegant solution with colour translation:
static Paint black = Paint.valueOf(Integer.toHexString(Color.BLACK.hashCode()));
TextField textfield;
textField.setStyle(
"-fx-control-inner-background: #"+black.toString().substring(2));
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();
}
i wrote a simple class that derives QPushButton, and tried to apply stylesheet on it.
but it didn't work.
I read the qt doc, but i could not find the point.
Can any one help me out?
class Button : public QPushButton
{
Q_OBJECT
public:
Button(QWidget * parent = NULL);
~Button();
protected:
void keyPressEvent(QKeyEvent * event);
};
Button * btn = new Button(rootframe);
// I tried the following ways, all NG.
btn->setStyleSheet("background: white; color: blue;");
btn->setStyleSheet("QPushButton{background: white; color: blue;}");
btn->setStyleSheet("Button {background: white; color: blue;}");
Thanks..
From the Qt Style Sheets Reference:
Warning: If you only set a background-color on a QPushButton, the
background may not appear unless you set the border property to some
value. This is because, by default, the QPushButton draws a native
border which completely overlaps the background-color.
This should work
btn->setStyleSheet("background-color: white; color: blue; border: none");
It is advisable to check the QPushButton stylesheets example.
I have some QPushButtons in the rows of a QTreeView, and they're showing up with these black borders around them that I can't seem to modify. Currently I can grey out the buttons with this code:
for (int i = 0; i < QPalette::NColorRoles; i++){
QPalette::ColorRole thisRole = static_cast<QPalette::ColorRole>(i);
QColor newColor = commitPalette.color(QPalette::Disabled,thisRole);
int grayColor = qGray(newColor.rgb());
newColor.setRgb(grayColor,grayColor,grayColor,50);
commitPalette.setColor(QPalette::Disabled, thisRole, newColor);
}
But it doesn't do anything to the border. I'd prefer to avoid using stylesheets, as I like the automatic color generation provided by QPalette's constructor
If you are using Qt creator, right click the QPushButton and setStyleSheet as border: none; Thats it.
If you set the QButton property isFlat = true it should disable the border unless it's being clicked.
I suggest using a stylesheet. From the code you can make it to a function:
void setFlatStyle(QPushButton *btn)
{
btn->setStyleSheet(QString("QPushButton {border: 0px;}"));
}
Just pass the button in there and get your result.
button.setStyleSheet("QPushButton { border: none; }")
As said #RajaRaviVarma