Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Overriding QToolBar/Button Stylesheets



  • I'm modifying the look of a QToolbar and have mostly but not quite achieved what I want. in the code snip below t is the QToolBar.

        QString styleSheet(QString("QToolBar "
            "{background-color: rgba(255,255,255,128); "
            "border-radius: %1px};"
            "QToolButton "
            "{border 0px;}").
            arg(radius));
        t.setStyleSheet(styleSheet);
    

    I'd have preferred to use QToolBar::setWindowOpacity(0.5); to get both the icons and toolbar background to 50% but that didn't seem to work.
    This produces:

    718320c0-d9c0-4347-b8d9-bd710462a761-image.png

    What I'd like is to:

    • reduce the size of the border zone around the buttons

    • get rid of the pale blue square over the buttons in the On state

    How can I do those things please - I tried setting the QToolButton border to 0px but that didn't seem to change much.



  • @Perdrix
    No, you still have some syntax error in the style sheet that makes the QToolButton part not working.
    Don't add an extra ";" after "}".

        QString styleSheet(QString(
            "QToolBar "
                "{background-color: rgba(255,255,255,128); "
                "border-radius: %1px;} "
            "QToolButton "
                "{max-width: 48px; "
                "max-height: 49px; "
                "border: 0px;}").
            arg(radius));
    

    This should work. (No need to add those padding / margin. I already tested, they don't change anything.)
    And if you look at the opacity property in the stylesheet doc you can see that it is only supported for tooltips.

    PS why can one not set transparency on the child widget?

    From its name windowOpacity you can see that this property is window only...
    It will be passed to QWindow if the widget is a window.
    So if it is not a window, it just won't do anything.

    any samples lying about?

    It is quite simple.

    QGraphicsOpacityEffect *eff = new QGraphicsOpacityEffect(&t);
    eff->setOpacity(0.5);
    t.setGraphicsEffect(eff);
    


  • Wow, you've made a lot of progress on that! It looks nice already!

    1. Maybe not a beatiful way, but you can set the max size of the button. Since they all have the same size, this can be easily done by style sheet.
    2. Any change of border can make the blue square go away, you just need to fix your syntax (you've missed the ":")

    So, the QToolButton part of the style sheet should be

    {max-width: 48px;
    max-height: 49px;
    border: 0px;}
    

    And I had done some testing about opacity due to some recent post.
    setWindowOpacity is only for top-level widgets (a.k.a, windows).
    If you want to set opacity of a child widget, you should look at QGraphicsOpacityEffect and QWidget::setGraphicsEffect.



  •     QString styleSheet(QString(
            "QToolBar "
                "{background-color: rgba(255,255,255,128); "
                "opacity: 0.5; "
                "border-radius: %1px; "
                "border: 0px;}; " 
            "QToolButton "
                "{margin: 0px; "
                "opacity: 0.5; "
                "padding: 0px; "
                "border-radius: %1px; "
                "max-width: 48px; "
                "max-height: 49px; "
                "border: 0px;}; "
            "QToolButton::hover "
            "{opacity: 1.0;}; "
            "QToolButton::on "
                "{background-color: rgba(0, 0, 0, 0);};").
            arg(radius));
    

    is what it now reads, but the translucent blue backgrond for On status is still there, as is the grey one for the Active state. Opacity in the style sheet also appears to be ignored :(

    PS why can one not set transparency on the child widget?

    I looked at QGraphicsOpacityEffect and setGraphicsEffect - the docs appear a bit thin for these - any samples lying about?



  • @Perdrix
    No, you still have some syntax error in the style sheet that makes the QToolButton part not working.
    Don't add an extra ";" after "}".

        QString styleSheet(QString(
            "QToolBar "
                "{background-color: rgba(255,255,255,128); "
                "border-radius: %1px;} "
            "QToolButton "
                "{max-width: 48px; "
                "max-height: 49px; "
                "border: 0px;}").
            arg(radius));
    

    This should work. (No need to add those padding / margin. I already tested, they don't change anything.)
    And if you look at the opacity property in the stylesheet doc you can see that it is only supported for tooltips.

    PS why can one not set transparency on the child widget?

    From its name windowOpacity you can see that this property is window only...
    It will be passed to QWindow if the widget is a window.
    So if it is not a window, it just won't do anything.

    any samples lying about?

    It is quite simple.

    QGraphicsOpacityEffect *eff = new QGraphicsOpacityEffect(&t);
    eff->setOpacity(0.5);
    t.setGraphicsEffect(eff);
    


  • Oh Blush!!! Sorry about that. I guess I need to subclass QToolBar to handle QEnterEvent and QLeaveEvent (to set opacity to 100% on EnterEvent and back to 50% on LeaveEvent)?

    Thanks again
    David



  • @Perdrix
    Right.
    If you really don't want to subclass QToolBar, you can consider using event filter.



  • Subclassed QToolBar using QGraphicsOpacityEffect works a treat!!

    A huge thank you to you @Bonnie

    David


Log in to reply