Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Overriding QToolBar/Button Stylesheets

Overriding QToolBar/Button Stylesheets

Scheduled Pinned Locked Moved Solved General and Desktop
7 Posts 2 Posters 2.9k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • PerdrixP Offline
    PerdrixP Offline
    Perdrix
    wrote on last edited by Perdrix
    #1

    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.

    1 Reply Last reply
    1
    • PerdrixP Perdrix
          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?

      B Offline
      B Offline
      Bonnie
      wrote on last edited by Bonnie
      #4

      @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);
      
      1 Reply Last reply
      2
      • B Offline
        B Offline
        Bonnie
        wrote on last edited by Bonnie
        #2

        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.

        1 Reply Last reply
        1
        • PerdrixP Offline
          PerdrixP Offline
          Perdrix
          wrote on last edited by
          #3
              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?

          B 1 Reply Last reply
          0
          • PerdrixP Perdrix
                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?

            B Offline
            B Offline
            Bonnie
            wrote on last edited by Bonnie
            #4

            @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);
            
            1 Reply Last reply
            2
            • PerdrixP Offline
              PerdrixP Offline
              Perdrix
              wrote on last edited by
              #5

              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

              B 1 Reply Last reply
              0
              • PerdrixP Perdrix

                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

                B Offline
                B Offline
                Bonnie
                wrote on last edited by
                #6

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

                1 Reply Last reply
                0
                • PerdrixP Offline
                  PerdrixP Offline
                  Perdrix
                  wrote on last edited by
                  #7

                  Subclassed QToolBar using QGraphicsOpacityEffect works a treat!!

                  A huge thank you to you @Bonnie

                  David

                  1 Reply Last reply
                  0

                  • Login

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved