Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    [SOLVED] Transparent background behind button layout on PNG

    General and Desktop
    qt designer
    2
    12
    11661
    Loading More Posts
    • 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.
    • M
      M.K. last edited by M.K.

      Hello together,

      in the picture you can see a somewhat strange background color behind the buttons.
      Imgur

      My questions is how can I remove that part or make it transparent. It seems it takes a similiar color to the image. There is no problem with "one color" images.

      Current stylesheet:

      QPushButton {
      color: #333;
      border: 2px solid #555;
      border-radius: 11px;
      padding: 5px;
      background: qradialgradient(cx: 0.3, cy: -0.4,
      fx: 0.3, fy: -0.4,
      radius: 1.35, stop: 0 #fff, stop: 1 #888);
      min-width: 80px;
      }
      
      QPushButton:hover {
      background: qradialgradient(cx: 0.3, cy: -0.4,
      fx: 0.3, fy: -0.4,
      radius: 1.35, stop: 0 #fff, stop: 1 #bbb);
      }
      
      QPushButton:pressed {
      background: qradialgradient(cx: 0.4, cy: -0.1,
      fx: 0.4, fy: -0.1,
      radius: 1.35, stop: 0 #fff, stop: 1 #ddd);
      }
      

      I'd like to add that I'm farely new to QT and not a too experienced programer currently learning Python and with no experience in C++ whatsoever.

      Thank you for your answers in advance.

      1 Reply Last reply Reply Quote 0
      • mrjj
        mrjj Lifetime Qt Champion last edited by mrjj

        Hi and welcome
        What are the buttons inside of?
        It seems they are in a widget or a frame ?

        M 1 Reply Last reply Reply Quote 0
        • M
          M.K. @mrjj last edited by

          @mrjj they are in a QVBoxLayout.
          My plan is to make the whole project scalable so I dont have to redo the gui for every resolution or atleast only for 16:9 and 4:3.
          Any tips are much appreciated.

          mrjj 1 Reply Last reply Reply Quote 0
          • mrjj
            mrjj Lifetime Qt Champion @M.K. last edited by

            @M.K.
            Ah, that way.
            Normally they are pretty transparent.
            How do you set the background ?
            Is that a QLabel or what you use ?
            Im asking to see if I can get same result as you :)

            Well using Layouts are a good way to make sure it can scale. Often one has to
            use a layout in a layout to get the exact effect but once learned, they are super handy.

            M 1 Reply Last reply Reply Quote 1
            • M
              M.K. @mrjj last edited by M.K.

              @mrjj the image is set as background-image on the QWidget:

              background-image: url(:/720p/Data/Pictures/Background/1280x720/#4.png);
              

              dont know yet if i create several images for different resolutions or if i resize a high-res image with python. Not sure how I can implement it but i'll figure it out.

              Edit:
              Ok I fixed it, i applied a grid layout to the form and now it somehow works.

              mrjj 1 Reply Last reply Reply Quote 0
              • mrjj
                mrjj Lifetime Qt Champion @M.K. last edited by mrjj

                @M.K.
                Hi , I could get it to do so also.
                It seems when the layout/frame/widget is owned by
                the background widget, it can use a color from the bg image as its background.
                if I move it outside, it will use the background color I specify.
                I have only used a QLabel as bg so I learned something new :)

                I guess what is happening is that its also a widget so it inherits the bg image.

                I pretty sure it can be disabled somehow but not sure how inside the editor.

                you can name your bg (double click it) and set bitmap only for that widget
                like
                QWidget #mybox {
                background-image: url(:/Untitled-1.png);
                }

                here i called bg mybox.

                Then it works as expected

                M 1 Reply Last reply Reply Quote 1
                • M
                  M.K. @mrjj last edited by

                  @mrjj thank you very much.
                  It also solved my inherit problem on my next "page".

                  mrjj 1 Reply Last reply Reply Quote 0
                  • mrjj
                    mrjj Lifetime Qt Champion @M.K. last edited by

                    @M.K.
                    Super. :)
                    I find it works best if I only assign style sheet to MainWindow / dialog
                    and use the # syntax to address the widgets I want to style by name.
                    At least I find it easier to control compared to give each widget its own style sheet.
                    :)

                    M 1 Reply Last reply Reply Quote 0
                    • M
                      M.K. @mrjj last edited by M.K.

                      @mrjj is it possible to group some widgets? And if so how?
                      In my new Form I have 10x10 Text Browser to form a table and I'd like to assign a certain stylesheet to it. They are named "Scoreboard_1" to "Scoreboard_100".

                      I put each row into a separate horizontalLayout so I have the option to hide the last 5 Layouts in a differrent setting.

                      mrjj 1 Reply Last reply Reply Quote 0
                      • mrjj
                        mrjj Lifetime Qt Champion @M.K. last edited by mrjj

                        @M.K.
                        What you mean by group ?
                        If you put them all in a widget/frame, they all have that as parent and sort of a group then.
                        And if you then set style on that container, all in will get the style.
                        If you mean a style group , sort of ?

                        You can also set it for all Text Browser type. on main if its a global style for those ?

                        Also note that you can use dynamic properties to target "some" of the widgets
                        https://wiki.qt.io/Dynamic_Properties_and_Stylesheets

                        like
                        QWidget[editFocus="true"]
                        {
                        border: 3px solid rgb(20,15,255);
                        }

                        so if editFocus is true the style is used. NOTE. changing editFocus from code, does not reapply the style.
                        Also note that you can easy create own flags like editFocus in the editor.

                        M 1 Reply Last reply Reply Quote 1
                        • M
                          M.K. @mrjj last edited by M.K.

                          @mrjj
                          Imgur

                          The number 1 box in the picture should be a "stylegroup" so i can assign a specific font to these without typing the the stylesheet for every textBrowser. Number 2 shouldnt be influenced by it and have it own font.

                          Edit:
                          ok, found the frame widget.

                          mrjj 1 Reply Last reply Reply Quote 0
                          • mrjj
                            mrjj Lifetime Qt Champion @M.K. last edited by

                            @M.K.
                            just a note so im sure you know.

                            when you say

                            QTextBrowser {
                            ....
                            }

                            it its for all QTextBrowser instances of the parent where you set stylesheet.
                            So if on the mainwindow, it will be all.

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post