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. Clipping of (OR maybe background colour of) QToolbar Icons
Forum Updated to NodeBB v4.3 + New Features

Clipping of (OR maybe background colour of) QToolbar Icons

Scheduled Pinned Locked Moved Solved General and Desktop
15 Posts 4 Posters 849 Views 2 Watching
  • 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 Perdrix

    I have a toolbar that does this in its ctor:

    constexpr int radius = 27;
       :
    QColor colour = palette().window().color(); 
     colour = colour.lighter(300);
     colour.setAlpha(205);
     QString styleSheet(QString(
                "QToolBar "
                "{background-color: %1; "
                "border-radius: %2px;}; "
            )
                .arg(colour.name(QColor::HexArgb))
                .arg(radius)
            );
     setStyleSheet(styleSheet);
    

    I thought that this would clip the icons to the new outline but what I get is:

    a85a3d25-8c44-49c6-b7e7-29655d022fdd-image.png

    So the icons aren't being clipped to the new shape.

    Should I expect that to work?

    The png files that define the icons have their background set to transparent (outside the circle in the centre).

    PerdrixP Offline
    PerdrixP Offline
    Perdrix
    wrote on last edited by Perdrix
    #2

    Update: They aren't buttons, they are icons.

    I'm guessing that the paint method is filling the background with "window" colour before it paints the icon image (set with setFile()).

    Is there an easy way to get them to prefill with transparent colour so the toolbar shows through except where the icon itself is non-transparent?

    It's only the currently active icon that does this ...
    Thanks
    David

    PerdrixP 1 Reply Last reply
    0
    • PerdrixP Perdrix

      Update: They aren't buttons, they are icons.

      I'm guessing that the paint method is filling the background with "window" colour before it paints the icon image (set with setFile()).

      Is there an easy way to get them to prefill with transparent colour so the toolbar shows through except where the icon itself is non-transparent?

      It's only the currently active icon that does this ...
      Thanks
      David

      PerdrixP Offline
      PerdrixP Offline
      Perdrix
      wrote on last edited by
      #3

      Anyone have any ideas?

      mrjjM 1 Reply Last reply
      0
      • PerdrixP Perdrix

        Anyone have any ideas?

        mrjjM Offline
        mrjjM Offline
        mrjj
        Lifetime Qt Champion
        wrote on last edited by
        #4

        @Perdrix
        Hi
        As far as I know, QToolButtons are auto-created when you insert icons.

        Settings a round border will not clip anything as the clipping is the Widgets area and
        even if the frame/border is drawn round, the actual area is still square.

        Try setting QToolbuttons background

        QToolButton {
        background-color:transparent;
        }
        
        PerdrixP 1 Reply Last reply
        0
        • mrjjM mrjj

          @Perdrix
          Hi
          As far as I know, QToolButtons are auto-created when you insert icons.

          Settings a round border will not clip anything as the clipping is the Widgets area and
          even if the frame/border is drawn round, the actual area is still square.

          Try setting QToolbuttons background

          QToolButton {
          background-color:transparent;
          }
          
          PerdrixP Offline
          PerdrixP Offline
          Perdrix
          wrote on last edited by Perdrix
          #5

          @mrjj I changed the ctor so it starts with:

                  constexpr int radius = 27;
                  
                          QColor colour = palette().window().color();
                          colour = colour.lighter(300);
                          colour.setAlpha(205);
                          QString styleSheet(QString(
                              "QToolButton {background - color:transparent;} "
                              "QToolBar "
                              "{background-color: %1; "
                              "border-radius: %2px;}"
                          )
                              .arg(colour.name(QColor::HexArgb))
                              .arg(radius)
                          );
                          setStyleSheet(styleSheet);
                  
          

          Unfortunately, it didn't seem to help any:

          98dffbba-17a3-4e59-bebd-b167849726c9-image.png

          mrjjM JonBJ 2 Replies Last reply
          0
          • PerdrixP Perdrix

            @mrjj I changed the ctor so it starts with:

                    constexpr int radius = 27;
                    
                            QColor colour = palette().window().color();
                            colour = colour.lighter(300);
                            colour.setAlpha(205);
                            QString styleSheet(QString(
                                "QToolButton {background - color:transparent;} "
                                "QToolBar "
                                "{background-color: %1; "
                                "border-radius: %2px;}"
                            )
                                .arg(colour.name(QColor::HexArgb))
                                .arg(radius)
                            );
                            setStyleSheet(styleSheet);
                    
            

            Unfortunately, it didn't seem to help any:

            98dffbba-17a3-4e59-bebd-b167849726c9-image.png

            mrjjM Offline
            mrjjM Offline
            mrjj
            Lifetime Qt Champion
            wrote on last edited by
            #6

            @Perdrix
            Ah, its when you hover / click it ?

            Its due to the auto raise feature, i believe.

            PerdrixP 1 Reply Last reply
            0
            • mrjjM mrjj

              @Perdrix
              Ah, its when you hover / click it ?

              Its due to the auto raise feature, i believe.

              PerdrixP Offline
              PerdrixP Offline
              Perdrix
              wrote on last edited by
              #7

              @mrjj The top three icons are checkable. So if I click the second icon and hover over the third one I see:

              458759f1-4189-4315-abf1-1953837dd161-image.png

              1 Reply Last reply
              0
              • PerdrixP Perdrix

                @mrjj I changed the ctor so it starts with:

                        constexpr int radius = 27;
                        
                                QColor colour = palette().window().color();
                                colour = colour.lighter(300);
                                colour.setAlpha(205);
                                QString styleSheet(QString(
                                    "QToolButton {background - color:transparent;} "
                                    "QToolBar "
                                    "{background-color: %1; "
                                    "border-radius: %2px;}"
                                )
                                    .arg(colour.name(QColor::HexArgb))
                                    .arg(radius)
                                );
                                setStyleSheet(styleSheet);
                        
                

                Unfortunately, it didn't seem to help any:

                98dffbba-17a3-4e59-bebd-b167849726c9-image.png

                JonBJ Offline
                JonBJ Offline
                JonB
                wrote on last edited by
                #8

                @Perdrix said in Clipping of (OR maybe background colour of) QToolbar Icons:

                {background - color:transparent;}

                This may be quite orthogonal to your issue, but are you sure this is acceptable written like that?

                PerdrixP 1 Reply Last reply
                0
                • JonBJ JonB

                  @Perdrix said in Clipping of (OR maybe background colour of) QToolbar Icons:

                  {background - color:transparent;}

                  This may be quite orthogonal to your issue, but are you sure this is acceptable written like that?

                  PerdrixP Offline
                  PerdrixP Offline
                  Perdrix
                  wrote on last edited by
                  #9

                  @JonB I wasn't sure so I changed it. And this is what I now see:

                  23a17028-8ee5-4901-91b6-0104b1ee3957-image.png

                  So changing it to:

                  QString styleSheet(QString(
                  "QToolButton {background-color:transparent;} "

                  did change things and not for the better :(

                  So "background - color" was wrong!

                  JoeCFDJ JonBJ mrjjM 3 Replies Last reply
                  0
                  • PerdrixP Perdrix

                    @JonB I wasn't sure so I changed it. And this is what I now see:

                    23a17028-8ee5-4901-91b6-0104b1ee3957-image.png

                    So changing it to:

                    QString styleSheet(QString(
                    "QToolButton {background-color:transparent;} "

                    did change things and not for the better :(

                    So "background - color" was wrong!

                    JoeCFDJ Offline
                    JoeCFDJ Offline
                    JoeCFD
                    wrote on last edited by JoeCFD
                    #10

                    @Perdrix can not you add round radius to that button only on the top part?

                    Stylesheet: border-top-left-radius: *px; border-top-right-radius: *px;

                    1 Reply Last reply
                    0
                    • PerdrixP Perdrix

                      @JonB I wasn't sure so I changed it. And this is what I now see:

                      23a17028-8ee5-4901-91b6-0104b1ee3957-image.png

                      So changing it to:

                      QString styleSheet(QString(
                      "QToolButton {background-color:transparent;} "

                      did change things and not for the better :(

                      So "background - color" was wrong!

                      JonBJ Offline
                      JonBJ Offline
                      JonB
                      wrote on last edited by JonB
                      #11

                      @Perdrix
                      I know nothing :) But (provided I understand right) I would expect:

                      QToolButton{border: none; background-color: transparent;}
                      

                      (I assume you have the correct transparency on your icons. Perhaps you should confirm this?)

                      Just OOI isn't that what https://stackoverflow.com/questions/69755056/how-to-set-qaction-to-have-transparent-background-inside-qtoolbar says and is similar enough to yours??

                      PerdrixP 2 Replies Last reply
                      2
                      • PerdrixP Perdrix

                        @JonB I wasn't sure so I changed it. And this is what I now see:

                        23a17028-8ee5-4901-91b6-0104b1ee3957-image.png

                        So changing it to:

                        QString styleSheet(QString(
                        "QToolButton {background-color:transparent;} "

                        did change things and not for the better :(

                        So "background - color" was wrong!

                        mrjjM Offline
                        mrjjM Offline
                        mrjj
                        Lifetime Qt Champion
                        wrote on last edited by mrjj
                        #12

                        @Perdrix

                        If anything else fails, then you can try setMask
                        If does make the area round/as the icon but can a bit annoying to align.
                        More over, the checked default drawing might not be visible.

                        #include "QBitmap" // must have to use setmask
                        ....
                           setStyleSheet(styleSheet);
                        
                            auto list = ui->toolBar->findChildren<QToolButton *>();
                            for (auto *w : list) {
                                w->setAutoRaise(false);
                                QIcon ico = w->icon();
                                QPixmap pix = ico.pixmap(ui->toolBar->iconSize());
                                w->setMask(pix.mask());
                            }
                        

                        alt text

                        1 Reply Last reply
                        0
                        • JonBJ JonB

                          @Perdrix
                          I know nothing :) But (provided I understand right) I would expect:

                          QToolButton{border: none; background-color: transparent;}
                          

                          (I assume you have the correct transparency on your icons. Perhaps you should confirm this?)

                          Just OOI isn't that what https://stackoverflow.com/questions/69755056/how-to-set-qaction-to-have-transparent-background-inside-qtoolbar says and is similar enough to yours??

                          PerdrixP Offline
                          PerdrixP Offline
                          Perdrix
                          wrote on last edited by Perdrix
                          #13

                          @JonB Pretty sure the background of my icons are correct:

                          Here's one of them to play with:ButtonStar_Down.png

                          1 Reply Last reply
                          0
                          • JonBJ JonB

                            @Perdrix
                            I know nothing :) But (provided I understand right) I would expect:

                            QToolButton{border: none; background-color: transparent;}
                            

                            (I assume you have the correct transparency on your icons. Perhaps you should confirm this?)

                            Just OOI isn't that what https://stackoverflow.com/questions/69755056/how-to-set-qaction-to-have-transparent-background-inside-qtoolbar says and is similar enough to yours??

                            PerdrixP Offline
                            PerdrixP Offline
                            Perdrix
                            wrote on last edited by
                            #14

                            @JonB You sir, are a star! border:none; made the difference!!!

                            So:

                            QToolButton {border: none; background-color: transparent;}
                            

                            worked a treat!

                            Why did adding border:none; fix it please?

                            JonBJ 1 Reply Last reply
                            0
                            • PerdrixP Perdrix has marked this topic as solved on
                            • PerdrixP Perdrix

                              @JonB You sir, are a star! border:none; made the difference!!!

                              So:

                              QToolButton {border: none; background-color: transparent;}
                              

                              worked a treat!

                              Why did adding border:none; fix it please?

                              JonBJ Offline
                              JonBJ Offline
                              JonB
                              wrote on last edited by
                              #15

                              @Perdrix said in Clipping of (OR maybe background colour of) QToolbar Icons:

                              Why did adding border:none; fix it please?

                              QSS magic/guess/example/makes sense to remove anything not needed.

                              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