I have a widget in the main window, the widget has the following styles:
background-color:#ffeeeeee;width:100%;height:100%;
It is set-up to widget layout and controls auto size to fill the geometry of the widget, but the background of the widget is always transparent. What can I do to make it opaque?
This is using Qt5.6 running on RedHat Linux 7.2
NOTE: The syntax #ffeeeeee is specific to Qt, where the first node is the alpha, then red, green and blue octets.
You have too many characters in your color. Change:
background-color: #ffeeeeee;
to:
background-color: #eeeeee;
If you want to use transparency, you'll have to be explicit:
background-color: rgba(...);
With the background-color present and set to any of the following:
background-color:white;width:100%;height:100%;
or
background-color:#ffffff;width:100%;height:100%;
or my original:
background-color:#ffeeeeee;width:100%;height:100%;
The property, autoFillBackground is set to false and the background of the widget is transparent at run-time.
However removing any background-color style and leaving the style as just:
width:100%;height:100%
The property, autoFillBackground is set to true and the widget is opaque.
As far as I can see there is no error in the styles, I believe this may be an error in Qt.
Have you tried using QWidget::setWindowOpacity(1) where 1 = opaque and 0 = transperant.
Also try QGraphicsOpacityEffect.The following is code for setting the 50 percent opacity for a pushbutton but It can be extended to a widget as well.
ui->setupUi(this);
QGraphicsOpacityEffect * effect = new QGraphicsOpacityEffect(ui->pushButton);
effect->setOpacity(0.5);
ui->pushButton->setGraphicsEffect(effect);
Related
I have been trying to set the background color of a QTabWidget to black (or any other color for), but have been unsuccessful in doing so.
It seems that you need the option autoFillBackground set and then also set "background-color: black;" in the stylesheet. This then displays it properly in the Designer, but fails in the application.
This answer suggests to enclose it in another QWidget and then use the transparency, but that is a hack around the issue.
How do I set the background color of a QTabWidget via stylesheets?
EDIT
Setting QTabBar { background-color: black; } results in the following image.
As an alternative to QTreeWidget, use QTabBar + QStackedWidget and the following stylesheet
QTabBar { background-color: black; }
or use
Qt: Styling QTabWidget
I have set the color of my main window in QT to be grey.
ui(new Ui ::MainWindow)
ui-> setupUi(this)
this->setStyleSheet("background-color: grey;");
I have tried multiple ways to set the color of the QFrame, however it takes on the default grey color that I have set. One way I tried is below.
ui->frame->setStyleSheet("color:rgb(255,255,255)");
I have tried to change the color of the QFrame by using the setStyleSheet method but no matter which color I assign it remains grey. I have tried setting the background, border, and color. Is there any way to do this that I am overlooking?
You need to set the background color of the QFrame.
Set the QFrame's style sheet to the following:
"background-color: rgb(255, 255, 255);"
For Python (PyQt) users:
frame = QFrame(self)
frame.setStyleSheet('background-color: rgb(50,50,50)')
Set a MainWindow (not the QFrame) StyleSheet like this:
QMainWindow{
background-color: gray
}
QFrame {
border: 5px solid black
}
This worked for me:
mainwindow->setStyleSheet("QMainWindow{background-color: gray} QFrame { border: 5px solid black } ");
This troubled me quite some time. Before setting the actual stylesheet unset it first:
ui->frame->setStyleSheet("");
ui->frame->setStyleSheet("background-color: rgb(255,255,255)");
For more customisation options have a look at https://doc.qt.io/qt-5/stylesheet-examples.html and for larger projects you might want to think about setting up global stylesheets for your app.
This works for me:
ui->frame->setStyleSheet("background-color: rgb(251, 255, 206);");
I have all my buttons disabled in a grid, but for some, I'd like to change the background color. I'm trying:
_fieldButtons[0][0]->setStyleSheet("color: blue; background-color: blue;");
Where
QVector<QVector<QPushButton*> > _fieldButtons;
However, these buttons are all disabled, and only the text color gets changed:
How can I change the background, but not the text? Thank you!
UPDATE
I figured it's not working because the buttons are flat. How can I change flat button colors?
Two options:
Add border: none; to your stylesheet.
Use setAutoFillBackground(true) in conjunction with QPalette::Button
myButton->setFlat(true);
myButton->setAutoFillBackground(true);
QPalette pal = myButton->palette();
pal.setColor(QPalette::Button, QColor(Qt::blue));
myButton->setPalette(pal);
http://doc.qt.io/qt-5/qpushbutton.html#flat-prop
Try this:
myButton->setPalette(QColor("#124e6b"));
simply change the QColor to suit your use.
Or in Qt Creator you can right-click on the widget and select Change Style Sheet, as shown here:
Here you have two "Pseudo-States" in your control. For list of "Pseudo-States" refer below link.
http://doc.qt.io/qt-5/stylesheet-reference.html#list-of-pseudo-states
The first "Pseudo-State" is -- flat
The second "Pseudo-State" is -- disabled
Here you have to club both the states to set the style using "setStyleSheet".
_fieldButtons[0][0]->setStyleSheet(":flat:disabled {background-color: blue; border: none;}");
look for ":hover:enabled" (two different "Pseudo-States" how documentation handled) in the below link to get better idea.
http://doc.qt.io/qt-4.8/stylesheet-syntax.html
To understand, why you we have to give border:none for QPushButton, please look for below information in the first hyperlink in this answer.
"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."
Tasks:
Rounded-corners window
Custom borders
QML in QWidget
Because there is no way to change border style in parent widget, I made two of them. First parent widget is transparent, it's set in QSS. Second one is the one with rounded-corners, also set in QSS. p.s. I guess it isn't smartest idea. Not even close.
To make it work, I've set up Qt::WA_TranslucentBackground attribute.
Set up Qt::FramelessWindowHint window flag.
QML 2.0 style.[in code below]
So problem is:
When WA_TranslucentBackground and FramelessWindowHint is on - NO QML
When FramelessWindowHint is on - Only QML view
When WA_TranslucentBackground or both are off - still system BORDERS
Also I've tried to set mask on MainWindow
QPixmap pixmap = QWidget::grab(this->rect());
this->setMask(pixmap.createMaskFromColor(Qt::transparent, Qt::MaskInColor));
Works well, no system borders, custom one is rounded and QML works, but whole other area became white, don't know how to fix.
MainWindow:
QFile styleFile("style.qss");
styleFile.open(QFile::ReadOnly), qApp->setStyleSheet(QLatin1String(styleFile.readAll()));
QWidget *container = QWidget::createWindowContainer(new QQuickView(QUrl("main.qml")), this);
ui->verticalLayout->addWidget(container);
//this->setAttribute(Qt::WA_TranslucentBackground, true);
//this->setWindowFlags(Qt::FramelessWindowHint | Qt::Window);
QPixmap pixmap = QWidget::grab(this->rect());
this->setMask(pixmap.createMaskFromColor(Qt::transparent, Qt::MaskInColor));
Styles:
QWidget#MainWindow{
background:transparent;
}
QWidget#MainWindowRounded{
background-color: grey;
border: 1px solid black;
border-radius: 5px;
}
Is this possible to resolve?
HERE SOURCE CODE
In my app, i have a section that is top widget, the color of the top widget is gray, and i've been put severl widget on top widget, like QComboBox, QLineEdit and 2 QButton, but i have a problem when i right click on QLineEdit as you seen in below picture, the color of default context of window is gray, or when i open the QComboBox the color of background is gray. I'll set the background color of two these widget to white but doesn't work. So, how can i fix this?
Sample for better understand:
http://0000.4.img98.net/out.php/i52512_problem.png
Please help me
The style sheet propagates to all the child widgets, so you have to limit their range by using the right selectors. Since the context menu is a child of the QLineEdit it is also affected.
// What you have probably done:
myLineEdit->setStyleSheet("background-color: gray");
// What you should have done:
myLineEdit->setStyleSheet("QLineEdit { background-color: gray }");
// What you should do if there might be child widgets of the same type
// but for which you don't want the style to apply:
myLineEdit->setObjectName("myLineEdit");
myLineEdit->setStyleSheet("QLineEdit#myLineEdit { background-color: gray }");
See "The Style Sheet Syntax - Selector Types" for details.