@mrjj your file works like a charm! Thanks for the help!

@J.Hilk
Merci beaucoup, JH, c'est parfait!
wf

@KillerSmath fix did the work, combined with @mrjj QGroupButton! I added this code to style the pressed button

void MainWindow::onGroupButtonClicked(int btn_id) { g_btns->button(btn_id)->setStyleSheet(QString("QPushButton {color: #444444; background: #cccccc; border: 2px solid #cccccc; border-width: 0px 0px 2px 0px;} QPushButton:hover {border: 2px black solid; color: #333333; background-color: #F7F7F7;} QPushButton:pressed {background: #cccccc;}")); }

Thanks a lot guys!

That's not valid css. border does not take 4 separate width parameters, only one shared across all sides. If you want to set borders different for each side you need to use border-width:

border: solid #000000; border-width: 0px 0px 2px 0px;

@fouad20013
Previously you talked about QTable..., now you're saying QTree..... But the same is the case either way.

QTableWidget inherits QTableView. It should be the case that anything QTableWidget does you could do yourself using QTableView. The Q...Widgets are effectively just a convenience implementation off the Q...View, they provide an "item-based table view with a default model" if that's what you want.

However, I think you will have the same issues whether you use a QTableView or a QTableWidget. Why do you think a QTableView/QTreeView would solve your issue?

@Dagginio
Hi
just call update() to have it refresh when "status" changes.

-Do I have to remove that blue frame before I paint a grey one?
depends if you have autofillbackground on widget on.
in that case it will be cleared default.
else u might have to. try without and see

@define-qt
You can be more specific using the name of object as identifier in style sheet sintaxe

QLineEdit#ObjectName { border:0; }

@raven-worx I don't use any custom item delegate.

My model doesn't update, its items are fixed.

@raven-worx

my bad, Thanks for the link it helped a lot.

To summarise for anyone reading this. Thanks to the answers above.

You can assign a dynamic property, with a name and value of your choice, via QWidget.setProperty("cssClass", "large").

The stylesheet can match this via selector *[cssClass="large"] { ... }.

You can assign multiple values to the property via QWidget.setProperty("cssClass", [ "bold", "large", "rounded" ]). (Or it accepts a space-separated string via "bold large rounded".)

The stylesheet can match one of the values via selector *[cssClass~="large"] { ... } (note the ~=).

Note that property named class is a special one, referring to the Python/C++ code class of the widget, which you probably should not assign to.

Hi
And for fooling around and testing you can do also do

auto teststyle = R"( QWidget { background-color: red; } QPushButton { color: yellow; } )"; int main(int argc, char* argv[]) { QApplication a(argc, argv); a.setStyleSheet(teststyle); MainWindow w; w.show(); return a.exec(); } (c++ 11 compiler)

Thank you! I see you specified height and width manually. That works so far. I will use that.

@eDeviser said in Customizing QMainWindow by style sheet:

Yes, this helps!

I see the QMainWindow holds a QWidget which is set as cetralWidget. So It would be necessary to set the QMainWindow as centralWidget or to apply my css for the QWidget.

Thank you for this hint.

You have to apply your css in your qwidget !

Your css should be :

centralWidget {
background: yellow;
width: 10px; /* when vertical /
height: 10px; / when horizontal */
}

centralWidget:hover {
background: red;
}

@Swapnil_Shelke
To create those kind of buttons you need more than CSS.
You must go into button's paintEvent and then draw what you need (there are 3 simultaneous animation BTW) :

#include <QtCore/qvariantanimation.h> #include <QtCore/qvariant.h> #include <QtWidgets/qabstractbutton.h> #include <QtWidgets/qapplication.h> #include <QtWidgets/qlayout.h> class Animation : public QVariantAnimation { Q_OBJECT public: Animation(QObject *parent = 0) :QVariantAnimation(parent) { setTargetWidget(qobject_cast<QWidget*>(parent)); setAutoUpdateEnable(true); } void setAutoUpdateEnable(bool a) { if (targetWidget()) { a ? QObject::connect(this, SIGNAL(valueChanged(QVariant)), targetWidget(), SLOT(update())) : QObject::disconnect(this, SIGNAL(valueChanged(QVariant)), targetWidget(), SLOT(update())); } } QWidget *targetWidget() const { return _target; } void setTargetWidget(QWidget *w) { _target = w; } QVariant value() const { return _value; } void setValue(const QVariant &variant) { if (_value == variant) return; _value = variant; } protected: void updateCurrentValue(const QVariant &value) override { setValue(value); } private: QVariant _value; QWidget *_target = nullptr; }; class SampleButton :public QAbstractButton { public: struct ButtonStyle { qreal border_radius = 4.0; QColor background_color = QColor("#f4511e"); QColor text_color = QColor("#ffffff"); int font_size = 28; QString font_family = "Arial"; int width = 200; int padding = 20; qreal hover_padding = 25; int duration = 600; QIcon icon = QIcon("next.png"); // http://www.flaticon.com/free-icon/double-angle-pointing-to-right_25358 @16x16 qreal pixmap_padding = 20; }; SampleButton(const QString &text, QWidget *parent = 0) :QAbstractButton(parent), _textEff(new Animation(this)), _pixmapEff0(new Animation(this)), _pixmapEff1(new Animation(this)) { setFont(QFont(_st.font_family, _st.font_size)); setText(text); } QSize sizeHint() const override { return QSize(_st.width, _st.padding + fontMetrics().height() + _st.padding); } protected: void paintEvent(QPaintEvent *) override { QPainter p(this); // draw background p.setPen(Qt::NoPen); p.setBrush(_st.background_color); p.setRenderHint(QPainter::Antialiasing, true); p.drawRoundedRect(rect(), _st.border_radius, _st.border_radius); p.setRenderHint(QPainter::Antialiasing, false); // draw text if (!text().isEmpty()) { p.setFont(font()); p.setPen(_st.text_color); p.setRenderHint(QPainter::TextAntialiasing, true); p.drawText(QRectF(rect().x() - _textEff->value().toReal(), rect().y(), rect().width(), rect().height()), Qt::AlignCenter, text()); p.setRenderHint(QPainter::TextAntialiasing, false); } // draw icon if (!_st.icon.isNull()) { p.setRenderHint(QPainter::SmoothPixmapTransform, true); auto s = _st.icon.availableSizes().at(0); p.setOpacity(_pixmapEff0->value().toReal()); p.drawPixmap(QPointF(rect().right() - (_st.pixmap_padding * 2) - _pixmapEff1->value().toReal(), rect().center().y() - s.width() / 4), _st.icon.pixmap(s)); } } void enterEvent(QEvent *e) { _textEff->setStartValue(0.0); _textEff->setEndValue(_st.hover_padding); _textEff->setDuration(_st.duration); _textEff->setEasingCurve(QEasingCurve::OutCubic); _textEff->start(); _pixmapEff0->setStartValue(0.0); _pixmapEff0->setEndValue(1.0); _pixmapEff0->setDuration(_st.duration); _pixmapEff0->setEasingCurve(_textEff->easingCurve()); _pixmapEff0->start(); _pixmapEff1->setStartValue(0.0); _pixmapEff1->setEndValue(_st.pixmap_padding); _pixmapEff1->setDuration(_st.duration); _pixmapEff1->setEasingCurve(_textEff->easingCurve()); _pixmapEff1->start(); QWidget::enterEvent(e); } void leaveEvent(QEvent *e) { _textEff->setStartValue(_st.hover_padding); _textEff->setEndValue(0.0); _textEff->setDuration(_st.duration); _textEff->start(); _pixmapEff0->setStartValue(1.0); _pixmapEff0->setEndValue(0.0); _pixmapEff0->setDuration(_st.duration); _pixmapEff0->start(); _pixmapEff1->setStartValue(_st.pixmap_padding); _pixmapEff1->setEndValue(0.0); _pixmapEff1->setDuration(_st.duration); _pixmapEff1->setEasingCurve(_textEff->easingCurve()); _pixmapEff1->start(); QWidget::leaveEvent(e); } private: ButtonStyle _st; Animation *_textEff = nullptr; Animation *_pixmapEff0 = nullptr; Animation *_pixmapEff1 = nullptr; }; int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget *dialog = new QWidget; dialog->setWindowFlags(Qt::FramelessWindowHint); QHBoxLayout _Layout; dialog->setLayout(&_Layout); SampleButton *sb = new SampleButton("Hover"); _Layout.addWidget(sb); dialog->show(); return app.exec(); } #include "main.moc"

I was always searching at the wrong place.

The blue hue wasn't a problem of the style, it was a problem of the icon. Here is the solution:

for all icons

m_clientIcon.normal.addFile("plugins\\qtTsOverlay\\client.png");

add this

m_clientIcon.normal.addFile("plugins\\qtTsOverlay\\client.png", QSize(), QIcon::Selected);

Just realized, that I had still thread still open.

I'll share how I managed to circumvent the problem. Sadly I haven't found a real solution as of now.

In the function that makes the screenshot, I added this line just before calling QWidget::render

this->setStyleSheet("cStackedWidget {background-color:white;}" "QWidget#LiveStatus{background-color:white;}" ... //List of all QStackedwidget Pages ... "QWidget#FanThreshhold{background-color:white;}");

For some reason I have to set the stylesheet new for each time. Simply setting this once will not work.

Anyway, I'll mark it as solved,
unless someone else has a new idea !?

Try this , where you create ur control "dynamically"

QLineEdit * m_edit=new QLineEdit(this); m_edit->setStyleSheet(":focus{background:white}"); /*this should set the stylesheet*/

Looks like a rendering problem of the style used to render widget modified by a stylesheet.

You can define an accessibleName for your objects and distribute different StyleSheets.
either via the designer or QWidget::setAccessibleName(const QString &name);

e.g.

QPushButton{ background-color: blue; } QPushButton[accessibleName="SpecialButton1"] { background-color: red; }

Hi,
you should be able to do so by overriding the QRectF boundingRect() const function. Just call the base function to get the current rect., and return rect.adjusted(2,2,2,2).
-Michael.

@Romain-C
Well it still confused me sometimes :)

Can you check with a more recent version of Qt ?

I can't reproduce your problem, I don't know what i should be. But if I remove the showPopup method it shows the combobox at the right place for OS X.

QComboBox {background-color:rgb(190,190,190);color:black;padding-left: 10px;padding-right: 30px;border-style: solid;border-width: 0px;}

"padding-left: 10px;"

the padding will shift the combo-box displayed content form the left edge

QComboBox::drop-down {subcontrol-origin: padding; subcontrol-position: top right;width: 40px;border: 0px ;}

"subcontrol-position: top right;"

and the above will position wot text to the right.

Hopefully this helps.

@VRonin

With the provided code the whole dropdown list will be invisible. Do you know how to keep the items unaffected?

@MarceloGomez

The About code works for me using setStyleSheet .

setStyleSheet("QMainWindow { background-image: url(:/icon/Icon.jpg); }");

@SolaVitae
Do you have any additional stylesheet set for a widget in the parent hierarchy?
Because the posted stylesheet of yours shouldn't result in this effect.

I don't think there's a silver bullet to it. The cascading nature of stylesheets makes them powerful but also easy to get lost in. It's something web designers struggle with every day.
To think of it - it's not that different from inheritance in c++. A class 10 layers deep can easily become a bag of garbage if you don't plan it wisely.
I guess it comes down to careful planning, consistency and minding the scope.
One approach is to "reset" all the properties at some levels e.g. at a QMainWindow, QDialog, QPushButton that is a child of a dialog etc. Set all the margins, paddings, borders etc. to them to cut off the cascaded parent styles. Having such "clean" sections you can work your way down, always scoping to the nearest "cut off point" e.g. QDialog QStackedWidget QPushButton { ... }, where QDialog and QDialog QStackedWidget are such reset points.
It might also be useful to mark the cut-off points in your app using dynamic property styling.

As a footnote, it's also worth mentioning that, although powerful, stylesheets are kinda heavy so keeping them lean and small is something to strive for. It's also easier to use a single, top level stylesheeet (e.g on the qApp object) then to style individual widgets. Finding in which widget was that extra 1px padding defined is not something you want to do. It's a lot easier to do by analyzing one stylesheet file.

QLineEdit{ background-color:rgb(202, 255, 227);
border: 2px solid gray;
border-radius: 10px;
padding: 0 8px;
selection-background-color: darkgray;
font-size: 16px;}
QLineEdit:focus { background-color:rgb(192, 192, 255);}

Try to add this to your lineedit in the Designer.

@dor666

Try this https://github.com/borzh/qt-creator-css/blob/master/qt-creator.css

Double click on the XXXX.ui and then right click on the ui, go to "change style sheets" and just copy this code there and run it.

@mrjj @Ratzz Thank u guys alot for helping me fix this prob.

@raven-worx
Hi,

thanks for your reply and information.
Will mark it as "solved", as it is only a minor but interesting styling "issue" :)

if instead of checking the property you use the pseudo-state it should work

qwidget->setStyleSheet( "QWidget:disabled{color: #64B2D1;}" "QWidget{color: blue;}");

Well, currently, I'm not sure that's something you can modify through Qt's Style Sheet. QWizard usually follows the platform wizard design so that might be something out of its reach.

@ericg22
You can simply set properties of widgets via QSS. Most basic types are parsed. Even enums can be used by name when registered to the meta system.

class MyWidget : public QWidget { Q_OBJECT Q_PROPERTY( QColor CustomColor READ ... WRITE ... DESIGNABLE true ) Q_RPOPERTY( QFont CustomFont READ ... WRITE ... DESIGNABLE true ) Q_PROPERTY( QString CustomString READ ... WRITE ... DESIGNABLE true ) Q_PROPERTY( int CustomInteger READ ... WRITE ... DESIGNABLE true ) Q_PROPERTY( QIcon CustomIcon READ ... WRITE ... DESIGNABLE true ) Q_PROPERTY( MyEnum CustomEnum READ ... WRITE ... DESIGNABLE true ) Q_ENUMS( MyEnum ) ... enum MyEnum { MyEnumValue1, MyEnumValue2 } }

example qss to set properties:

MyWidget { qpropert-CustomColor: rgba(...); //also rgb(), hsv(), rgba(), named-colors, #XXXXXX, etc. are possible9 qproperty-CustomFont: "serif,-1,14,5,0,0,0,0,0,0"; // see QFont::fromString(): Font-Family, pointSizeF, pixelSize, QFont::StyleHint, QFont::Weight, QFont::STyle, underline, strikeout, fixedPitch, rawMode qproperty-CustomFont: "Times New Roman,12"; //should also be possible qproperty-CustomString: "Any string..."; qproperty-CustomInt: 8253; qproperty-CustomIcon: url(:/path/to/qrc/resource/icon.png); qproperty-CustomEnum: MyEnumValue2; }

@_compiler said:

thanks.

super :)
also using "#MainWindow" makes sure it dont apply to childs as stylesheets does.