Gradient for chunks in QProgressBar - qt

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() ;
}

Related

QStatusBar remove padding

I want to add a colored Widget over the full QStatusBar. I added a QLabel with red background-color but there is a padding around the label, which i can't remove.
what i tried:
setSizeGripEnabled(false)
setStyleSheet("QStatusBar { border: 0px; padding: 0px; margin: 0px; }"
"QStatusBar::item { border: 0px; padding: 0px; margin: 0px; }"
layout()->setContentsMargins(0, 0, 0, 0);
Update: Example Code:
QWidget *w = new QWidget;
QHBoxLayout *layout = new QHBoxLayout;
QStatusBar *statusBar = new QStatusBar;
QLabel *label = new QLabel("Example");
w->setStyleSheet("background-color: green");
label->setStyleSheet("background-color: red");
statusBar->addPermanentWidget(label, 1);
statusBar->layout()->setContentsMargins(0, 0, 0, 0);
statusBar->setSizeGripEnabled(false);
setStatusBar(statusBar);
w->setLayout(layout);
setCentralWidget(w);
}
I think it is not possible without pointer hacking or reimplementing all QStatusBar functionality because QStatusBar implementation based on pimpl idiom, which means some implementation hidden in private headers and borders between QStatusBar widget and children widgets are hardcoded in qstatusbar.cpp
QRect ir = item->w->geometry().adjusted(-2, -1, 2, 1);
...
QStyleOption opt(0);
opt.rect = ir;
...
style()->drawPrimitive(QStyle::PE_FrameStatusBarItem, &opt, &p, item->w);
QStatusBar{
min-height: 20px;
}
use the min-height css property.

Qt Print QStandardItemModel

I want to print rows of "QStandardItemModel". I use this code, It works but table is not beautiful.
I don't know how to adjust row height and I don't know how to set column widths based on the width of cells in the first row of the table.
QPrinter printer;
printer.setPageSize(QPrinter::A4);
printer.setFullPage(true);
QPrintDialog *dlg = new QPrintDialog(&printer,0);
if(dlg->exec() == QDialog::Accepted) {
QPainter painter;
if (painter.begin(&printer)) {
painter.translate(0,0);
int position = 0;
int rowCount=newMyModel->rowCount(QModelIndex());
for(int r=0;r<rowCount;r++)
{
if( position > painter.window().height()-100 )
{
printer.newPage();
position = 0;
painter.resetTransform();
painter.translate(0, 0);
}
QString html="<table style='page-break-after:always' border='1' width='100%' cellpadding =10 style='border-width: 1px;border-style: solid;border-color: #9e9e9e;width:100%'>";
index=newMyModel->index(r, 0);
QVariant prop1=index.data(MyModel::prop1);
QVariant prop2=index.data(MyModel::prop2);
'''
'''
'''
html.append(
"<tr style='background-color:red'>"
"<td style='border-width: 1px;padding:10; border-style: solid; border-color: #9e9e9e;width:16%'>"+prop1.toString()+" </td>"
"<td style='border-width: 1px;padding:10; border-style: solid; border-color: #9e9e9e;width:16%'>"+prop2.toString()+" </td>"
...
...
...);
}
html.append("</table>");
QRect rect = painter.boundingRect(painter.window(),
Qt::AlignJustify | Qt::TextWordWrap,
html);
QTextDocument doc;
doc.setHtml(html);
doc.drawContents(&painter, rect);
painter.drawRect(rect);
painter.translate(0, rect.height());
position += rect.height();
}
painter.end();
}
}

Qt Custom User Theming

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.

QT - CSS: decoration on focus

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.

QTableView - Selection background color

I am using the following code for set the style for the table in simulator(S60)(Nokia Qt SDK).
searchTable->setStyleSheet("background: rgb(255,255,255);color:rgb(0,0,0); font-family:Arial Narrow;font-size:20px; border: 4px outset rgb(255,255,255);gridline-color: #669933;"
"selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #486909, stop: 1 white);"
);
But When I am selecting the element in the data I got the following output. Please find the attachment.
Please help me.... What I did wrong .. Thanks in advance.
I guess your mistake is that you set up the stylesheet only for QTableView and not for all it's child widgets: cells. You could try to write your style code into a ".qss" file, add it to your app's resource file and then load it into your main.cpp with this code:
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
QFile file(":/qss/stylesheet.qss");
file.open(QFile::ReadOnly);
QString styleSheet = QLatin1String(file.readAll());
file.close();
qApp->setStyleSheet(styleSheet);
w.show();
}
In your style file you have to write something like this:
QLineEdit{
border: 2px solid grey;
border-radius: 10px;
padding: 0 8px;
background: white;
selection-background-color:darkgrey;
}
In this way all QLineEdit widgets will be shown with your style rules.

Resources