I am trying to set up a method for theming with external files. Currently, I have a file being read and put into a QString, then being placed inside of "qApp->setStyleSheet(string);, this seems to work,however, when i color the background of a button it doesn't seem to work. The same css works directly inside of qt designer too.
Function:
void SeniorProject::themer(QString theme_name)
{
qDebug() << theme_name;
QString file = QCoreApplication::applicationDirPath()
+ "/themes/" + "default" + "/theme.style";
qDebug() << "file = " + file;
QFile themeFile(file);
QString themeStyle;
if (themeFile.open(QIODevice::ReadOnly))
{
QTextStream in (&themeFile);
themeStyle = in.readAll();
themeFile.close();
}
else
{
qDebug() << "error";
}
qApp->setStyleSheet(themeStyle);
update();
}
CSS File
QPushButton#exit {
color: rgb(220, 0, 0);
border: none;
outline: none;
}
QPushButton#exit:hover {
color: rgb(255, 8, 0);
}
QPushButton#exit:Pressed {
color: rgb(150, 0, 0);
}
QFrame#mainbox QPushButton {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgba(122,188,255,1), stop: 0.44 rgba(96,171,248,1), stop: 1 rgba(64,150,238,1));
border: .1px outset rgb(122, 188, 255);
border-radius:4px;
}
QFrame#mainbox QPushButton:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgba(147,201,255,1), stop: 0.44 rgba(133,190,247,1), stop: 1 rgba(90,163,237,1));
border: .1px outset rgb(122, 188, 255);
border-radius:4px;
}
QFrame#mainbox QPushButton:pressed {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgba(84,169,255,1), stop: 0.44 rgba(66,155,244,1), stop: 1 rgba(45,141,237,1));
border: .1px outset rgb(122, 188, 255);
border-radius:4px;
}
The background in the QPushButtons is my currently problem, the stylesheet loads correctly and updates (I can tell because the borders on the buttons actually change to what I want), but the background does not seem to be working. Can anyone help me? Thanks.
I figured out why the background was not working. If you have the background previously set of the entire widget that is the parent of the item you are trying to style through QT Designer will not be able to have a background when it is not set with QT Designer.
Related
Is there a way to do this in SCSS, to apply the background color $colorState0 dynamically to elem class width data-indx="0"?
SCSS:
$colorState0: rgb(0, 0, 0);
.elem {
background: $colorState(data-idx);
}
HTML:
<div class="elem" data-idx="0"></div>
You could use a mixin. The one below apply the background to the the element that has elem class and the given data-idx, but you can customise it to your need.
#mixin apply-background($idx) {
.elem[data-idx="#{$idx}"]{
background : rgb($idx, $idx, $idx);
}
}
#include apply-background(0);
You can try using this method :
$colorState0: rgb(0, 0, 0);
$colorState1: rgb(0, 0, 0);
.elem[data-idx=0] {
background: $colorState0;
}
.elem[data-idx=1] {
background: $colorState1;
}
and so on
I am trying to put together some basic reactive forms.
The problem we have is that our compliance department is not going to let us go through because all of the contrasts for material form fields are too transparent/light.
I am looking for a way to darken up all of the form fields, outlines, disabled text etc.
I have been trying to make it global by going into my primary stylesheet. However I cannot seem to figure out how to override material in this way.
I have tried the following within the scss:
.mat-input-element:disabled .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
opacity: 1.0 !important;
}
.mat-input-element .mat-form-field-autofill-control .ng-tns-c161-25 .ng-untouched .ng-pristine .cdk-text-field-autofill-monitored {
opacity: 1.0 !important;
}
Or higher in the themes:
// Light Theme Text
$dark-text: #000000;
$dark-primary-text: rgba($dark-text, 1.0);
$dark-accent-text: rgba($dark-primary-text, 1.0);
$dark-disabled-text: rgba($dark-primary-text, 1.0);
$dark-dividers: rgba($dark-primary-text, 1.0);
$dark-focused: rgba($dark-primary-text, 1.0);
$mat-light-theme-foreground: ( base: black, divider: $dark-dividers, dividers: $dark-dividers, disabled: $dark-disabled-text, disabled-button: rgba($dark-text, 0.26), disabled-text: $dark-disabled-text, elevation: black, secondary-text: $dark-accent-text, hint-text: $dark-disabled-text, accent-text: $dark-accent-text, icon: $dark-accent-text, icons: $dark-accent-text, text: $dark-primary-text, slider-min: $dark-primary-text, slider-off: rgba($dark-text, 0.26), slider-off-active: $dark-disabled-text, );
// Dark Theme text
$light-text: #ffffff;
$light-primary-text: $light-text;
$light-accent-text: rgba($light-primary-text, 1.0);
$light-disabled-text: rgba($light-primary-text, 1.0);
$light-dividers: rgba($light-primary-text, 1.0);
$light-focused: rgba($light-primary-text, 1.0);
$mat-dark-theme-foreground: ( base: $light-text, divider: $light-dividers, dividers: $light-dividers, disabled: $light-disabled-text, disabled-button: rgba($light-text, 0.3), disabled-text: $light-disabled-text, elevation: black, hint-text: $light-disabled-text, secondary-text: $light-accent-text, accent-text: $light-accent-text, icon: $light-text, icons: $light-text, text: $light-text, slider-min: $light-text, slider-off: rgba($light-text, 0.3), slider-off-active: rgba($light-text, 0.3), );
Neither of these approaches seem to effect the project and components in any way.
Is there a method I can use to darken the contrast of all form fields globally? Without resorting to directives or having to include the same manual css to every component.css ?
Thanks much.
EDIT: I am trying to overcome this very transparent.
You should be able to override most of the mat-form-field rules to meet your requirements. Here are some examples you can add to your top level style sheet for the 'fill' appearance:
.mat-form-field-appearance-fill {
.mat-form-field-label {
color: rgba(0, 0, 0, 1) !important;
}
.mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.08);
}
}
.mat-form-field-appearance-fill.mat-form-field-disabled {
.mat-form-field-label {
color: rgba(0, 0, 0, 0.8) !important;
}
.mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.04);
}
}
https://stackblitz.com/edit/angular-a7hisy?file=src%2Fstyles.scss
For appearance="outline"
.mat-form-field-appearance-outline {
.mat-form-field-label {
color: rgba(0, 0, 0, 1) !important;
}
.mat-form-field-outline {
color: rgba(0, 0, 0, 0.4);
}
}
.mat-form-field-appearance-outline.mat-form-field-disabled {
.mat-form-field-label {
color: rgba(0, 0, 0, 0.8) !important;
}
.mat-form-field-outline {
color: rgba(0, 0, 0, 0.2);
}
}
https://stackblitz.com/edit/angular-jy3hjq?file=src%2Fapp%2Fform-field-appearance-example.html
I have the following pushbutton stylesheet:
QPushButton:hover{
background: qlineargradient(x1 : 0, y1 : 0, x2 : 0, y2 : 1, stop : 0.0 #ffd9aa,
stop : 0.5 #ffbb6e, stop : 0.55 #feae42, stop : 1.0 #fedb74);
}
QPushButton {
border: 1px solid #6593cf;
border-radius: 2px;
padding: 5px 15px 2px 5px;
background: qlineargradient(x1 : 0, y1 : 0, x2 : 0, y2 : 1, stop : 0.0 #f5f9ff,
stop : 0.5 #c7dfff, stop : 0.55 #afd2ff, stop : 1.0 #c0dbff);
color: #006aff;
font: bold large "Arial";
height: 30px;
}
QPushButton:pressed {
background: qlineargradient(x1 : 0, y1 : 0, x2 : 0, y2 : 1, stop : 0.0 #c0dbff,
stop : 0.5 #cfd26f, stop : 0.55 #c7df6f, stop : 1.0 #f5f9ff);
padding-top: 2px;
padding-left: 3px;
}
QPushButton:on {
background: qlineargradient(x1 : 0, y1 : 0, x2 : 0, y2 : 1, stop : 0.0 #5AA72D,
stop : 0.5 #B3E296, stop : 0.55 #B3E296, stop : 1.0 #f5f9ff);
padding-top: 2px;
padding-left: 3px;
}
QPushButton:disabled {
background: transparent #e5e9ee;
padding-top: 2px;
padding-left: 3px;
color: black;
}
I have a button. When it's pressed a side widget is resized. Thus the button gets the pressed style, when I release it gets the hover style. Furthermore the widget is resized and the button "follows" the widget. The problem is that the button keeps the hover state and loses it when I do some movement with the mouse. Is this a bug from qt or I miss something in the stylesheet code.
I did a animated gif showing the situation:
Thanks
You can say that it's a bug in Qt. I would say it's a kind of bugs caused by right logic. Judge for yourself. Hover state is defined by WA_UnderMouse widget attribute. This attribute is set by the application:
if ((e->type() == QEvent::Enter || e->type() == QEvent::DragEnter) ...
widget->setAttribute(Qt::WA_UnderMouse, true);
else if (e->type() == QEvent::Leave || e->type() == QEvent::DragLeave)
widget->setAttribute(Qt::WA_UnderMouse, false);
QEvent::Enter and QEvent::Leave events are only sent when the application receives mouse event from OS.
You don't move mouse, the application doesn't receive any mouse event and so WA_UnderMouse attribute is not changed.
One of the ways to fix that is to set Qt::WA_UnderMouse attribute to the right value by yourself when moving the button widget.
I'm experimenting a bit with CSS for making a cool user interface for my QT application.
I have this problem: I have a QPushButton and when it is on focus it has a rectangle on it that I want to remove. Here some screen-shot:
Normal button:
Focused button:
I have tried to add something (backgroundcolor, text-decoration, etc)
QPushButton:focus
but it keeps on highlighting..
Some hints?
here is the QPushButton css code:
QPushButton
{
color: #b1b1b1;
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
border-width: 1px;
border-color: #1e1e1e;
border-style: solid;
border-radius: 6;
padding: 3px;
font-size: 12px;
padding-left: 5px;
padding-right: 5px;
}
QPushButton:pressed
{
background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
}
QPushButton:hover
{
border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}
QPushButton:focus {
/*background-color: red;*/
}
ps. I'm on Ubuntu 12.04,with Qt 4.8 and I'm using this wonderfull css: http://www.yasinuludag.com/darkorange.stylesheet
For some reason the accepted answer doesn't seem to work (at least on Qt5.6). This makes the work for me:
QPushButton:focus {
border: none;
outline: none;
}
The highlighted rectangle may be the QStyle::PE_FrameFocusRect styling. The only way to get rid of it is by implementing a custom style. Fortunately, Qt provides a way to implement just a proxy, which uses another style in the general case. For the focus rectangle you'd implement:
class Style_tweaks : public QProxyStyle
{
public:
void drawPrimitive(PrimitiveElement element, const QStyleOption *option,
QPainter *painter, const QWidget *widget) const
{
/* do not draw focus rectangles - this permits modern styling */
if (element == QStyle::PE_FrameFocusRect)
return;
QProxyStyle::drawPrimitive(element, option, painter, widget);
}
};
qApp->setStyle(new Style_tweaks);
One more alternative (works in windows and in ubuntu), for simplicity I use solid colors:
ui->pushButton->setStyleSheet(
"QPushButton { background-color: #0188cc; color: #ffffff; outline: none }"
);
Note "outline: none" property - it removes focus rectangle from the button.
And one more related tip for checkable buttons: by default checked buttons drawed with dot pattern, not solid color as I expected for
"QPushButton:checked { background-color: #0188cc; color: #ffffff; }".
I added "border: none" to the button stylesheet:
"QPushButton:checked { background-color: #0188cc; color: #ffffff; border: none }",
and dotted pattern disappeared! Now my checked buttons are clean, as I expected with solid background style.
I ran this snippet of code both on Windows 7 (Qt5) and on Ubuntu 12 (Qt4.8). There are no problems with it:
QFile file("style.css");
if(file.open(QIODevice::ReadOnly))
{
QString data = file.readAll();
// "this" is the derived QMainWindow class
this->setStyleSheet(data);
}
And alternatively...
ui->pushButton->setStyleSheet("QPushButton"
"{"
"color: #b1b1b1;"
"background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);"
"border-width: 1px;"
"border-color: #1e1e1e;"
"border-style: solid;"
"border-radius: 6;"
"padding: 3px;"
"font-size: 12px;"
"padding-left: 5px;"
"padding-right: 5px;"
"}"
"QPushButton:pressed"
"{"
"background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);"
"}"
"QPushButton:hover"
"{"
"border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);"
"}"
);
qDebug() << ui->pushButton->styleSheet();
Thanks to Huytard's answer I have found out that is not a Qt CSS problem but it is the normal behavior of my Ubuntu Appearance setting to add an Orange rect on focused buttons.
The theme Ambiance is the default theme in Ubuntu 12.04 and it has the graphical behavior of enhancing focused elements with an orange inner rectangle.
If I change the theme the effect I posted about and I thought was QT CSS problem is gone away. So.. it is not a QT CSS problem but Ubuntu. If someone is interested in that.. http://askubuntu.com is full of information about changing the main theme color.
Is it possible to set a common gradient for all QProgressBar chunks?
If use something like this:
QProgressBar::chunk:horizontal {
background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5,
stop: 0 green,
stop: 1 white);
margin-right: 2px;
width: 10px;
}
the result will be
http://labs.trolltech.com/blogs/wp-content/uploads/2007/06/progressbar_righttext.png
but I want to obtain a one gradient, stretched to all chunks. Like this:
http://labs.trolltech.com/blogs/wp-content/uploads/2007/06/progressbar_nochunk.png
divided onto chunks.
Thanks for all!
You must only remove:
QProgressBar::chunk:horizontal {
background: qlineargradient(x1: 0,
y1: 0.5,
x2: 1,
y2: 0.5,
stop: 0 green,
stop: 1 white);
margin-right: 2px;
width: 10px; // <------ remove this propierty
}
You cannot achieve what you want with the existing stylesheet properties. You could however subclass QProgressBar and reimplement the paint in order to get the appearance you wish.
something like this would work, but I'd prefer subclassing QProgressBar as webclectic said
class Wrapper : public QWidget
{
Q_OBJECT
QProgressBar *progressBar ;
QSlider *slider ;
public :
Wrapper(void) : QWidget(), progressBar(new QProgressBar), slider(new QSlider(Qt::Horizontal))
{
progressBar->setMinimum(0) ;
progressBar->setMaximum(100) ;
slider->setMinimum(0) ;
slider->setMaximum(100) ;
QVBoxLayout *l = new QVBoxLayout ;
setLayout(l) ;
l->addWidget(progressBar) ;
l->addWidget(slider) ;
slider->setValue(0) ;
connect(slider, SIGNAL(valueChanged(int)), SLOT(slider_value_changed(int))) ;
slider_value_changed(0) ;
}
protected slots :
void slider_value_changed(int new_value)
{
QString updated_bg = QString("background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0.0 green, stop: %0 white, stop: 1.0 white);").arg(new_value/100.0) ;
QString style_sheet ;
style_sheet += QString("QProgressBar {"
"%0"
"border: 2px solid grey;"
"border-radius: 5px;"
"text-align: center;"
"}").arg(updated_bg) ;
style_sheet += "QProgressBar::chunk {"
"background: transparent;"
"width: 10px;"
"margin: 0.5px;"
"}" ;
progressBar->setStyleSheet(style_sheet) ;
progressBar->setValue(new_value) ;
}
} ;
int main( int argc, char **argv )
{
QApplication app(argc, argv) ;
Wrapper w ;
w.show() ;
return app.exec() ;
}