How to get this style on a button

Dariusz

Hey

I'm trying to wrap my head around how Qt does Fusion style, but do it via css so I can edit certain parts of it >

Does any1 have any idea?
It has like doble outline, darker & lighter & some grad over it.
I'm stuck.
Half of the CSS code I feed to qt does not work.
Are there any plans to modernize CSS & get it up to latest ver ?

LRDPRDX

This may help (regarding colors):

    QColor darkGray(53, 53, 53);
    QColor gray(128, 128, 128);
    QColor black(25, 25, 25);
    QColor blue(42, 130, 218);

    QPalette darkPalette;
    darkPalette.setColor(QPalette::Window, darkGray);
    darkPalette.setColor(QPalette::WindowText, Qt::white);
    darkPalette.setColor(QPalette::Base, black);
    darkPalette.setColor(QPalette::AlternateBase, darkGray);
    darkPalette.setColor(QPalette::ToolTipBase, blue);
    darkPalette.setColor(QPalette::ToolTipText, Qt::white);
    darkPalette.setColor(QPalette::Text, Qt::white);
    darkPalette.setColor(QPalette::Button, darkGray);
    darkPalette.setColor(QPalette::ButtonText, Qt::white);
    darkPalette.setColor(QPalette::Link, blue);
    darkPalette.setColor(QPalette::Highlight, blue);
    darkPalette.setColor(QPalette::HighlightedText, Qt::black);

    darkPalette.setColor(QPalette::Active, QPalette::Button, gray.darker());
    darkPalette.setColor(QPalette::Disabled, QPalette::ButtonText, gray);
    darkPalette.setColor(QPalette::Disabled, QPalette::WindowText, gray);
    darkPalette.setColor(QPalette::Disabled, QPalette::Text, gray);
    darkPalette.setColor(QPalette::Disabled, QPalette::Light, darkGray);

Original link

LRDPRDX

Also here the Combinear qss looks similar so you can download this qss and edit it.

LRDPRDX

BTW, here is how I used the above palette :

screenshot_11_10_19:32:26.png

To change the active text color I use this function (ofc could be lambda) :

inline void ColorButton( QPushButton* button, QColor color )
{
    QPalette palette = button->palette();
    palette.setColor( QPalette::Active, QPalette::ButtonText, color );
    button->setPalette( palette );
    button->update();
}

Dariusz

@LRDPRDX Hey
Yes I'm using pallete too, but if I want to increase/decrease padding... then I lose style. So I have to remake the style in css. Its a bummer we cant just... "change 1 property" of a style without it going bananas.

JKSH

@Dariusz said in How to get this style on a button:

if I want to increase/decrease padding... then I lose style

As a workaround, call QWidget::setMinimumSize() on your buttons. Increasing the minimum size has a similar effect as increasing padding.

Dariusz

@JKSH AH yes, could do... but I'm trying to css entire app with hundreds of buttons/etc..
CSS is really great "idea" to do it, just a bit of a problem with Qt as qt does not respect half of the css I give it from web searches & breaks with fusion :- (

Will qt update CSS support to be more... modern ?

Or is CSS no longer the way to go, in which case what is?

Christian Ehrlicher

@Dariusz said in How to get this style on a button:

it of a problem with Qt as qt does not respect half of the css I give it from web searches & breaks with fusion :- (

Because it's not CSS but QSS.

JKSH

@Dariusz said in How to get this style on a button:

CSS is really great "idea" to do it, just a bit of a problem with Qt as qt does not respect half of the css I give it from web searches & breaks with fusion :- (

As @Christian-Ehrlicher said, Qt style sheets are inspired by CSS, but it is not CSS. Here is the list of the CSS 2.1 properties (plus custom Qt-specific properties) supported by Qt style sheets: https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties

What you get from web searches is mostly for CSS 3. This is designed for websites and web apps, not for desktop widgets.

Will qt update CSS support to be more... modern ?

Not for widgets.

CSS support is complex, and essentially requires a heavyweight web engine.

Or is CSS no longer the way to go, in which case what is?

There are a few options:

Stay with widgets and use stylesheets by following https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties
Stay with widgets and style your GUI programmatically using the C++ API (e.g. setMinimumSize(), setMargins(), etc.)
Switch to Qt Quick and use QML styling:
- https://doc.qt.io/qt-6/qtquickcontrols2-styles.html
- https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#creating-a-custom-style
Write a HTML5 + CSS3 + JS app and run it via Qt WebEngine

LRDPRDX

@Dariusz said in How to get this style on a button:

@JKSH AH yes, could do... but I'm trying to css entire app with hundreds of buttons/etc..

I think you could inherit from the QPushButton then:

class MyButton : public QPushButton
{
    MyButton( ... ) :
        ...
    {
        setMinimumSize( ... );
    }
};