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. [SOLVED] Transparent background behind button layout on PNG
Forum Updated to NodeBB v4.3 + New Features

[SOLVED] Transparent background behind button layout on PNG

Scheduled Pinned Locked Moved General and Desktop
qt designer
12 Posts 2 Posters 13.1k 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.
  • mrjjM Offline
    mrjjM Offline
    mrjj
    Lifetime Qt Champion
    wrote on last edited by mrjj
    #2

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

    M 1 Reply Last reply
    0
    • mrjjM mrjj

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

      M Offline
      M Offline
      M.K.
      wrote on last edited by
      #3

      @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.

      mrjjM 1 Reply Last reply
      0
      • M M.K.

        @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.

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

        @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
        1
        • mrjjM mrjj

          @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 Offline
          M Offline
          M.K.
          wrote on last edited by M.K.
          #5

          @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.

          mrjjM 1 Reply Last reply
          0
          • M 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.

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

            @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
            1
            • mrjjM 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 Offline
              M Offline
              M.K.
              wrote on last edited by
              #7

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

              mrjjM 1 Reply Last reply
              0
              • M M.K.

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

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

                @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
                0
                • mrjjM mrjj

                  @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 Offline
                  M Offline
                  M.K.
                  wrote on last edited by M.K.
                  #9

                  @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.

                  mrjjM 1 Reply Last reply
                  0
                  • M 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.

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

                    @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
                    1
                    • mrjjM 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 Offline
                      M Offline
                      M.K.
                      wrote on last edited by M.K.
                      #11

                      @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.

                      mrjjM 1 Reply Last reply
                      0
                      • M 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.

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

                        @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
                        0

                        • Login

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