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

[SOLVED] Transparent background behind button layout on PNG

Scheduled Pinned Locked Moved General and Desktop
qt designer
12 Posts 2 Posters 12.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.
  • M Offline
    M Offline
    mrjj
    Lifetime Qt Champion
    wrote on 14 Sept 2015, 06:20 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 14 Sept 2015, 12:03
    0
    • M mrjj
      14 Sept 2015, 06:20

      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 14 Sept 2015, 12:03 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.

      M 1 Reply Last reply 14 Sept 2015, 12:09
      0
      • M M.K.
        14 Sept 2015, 12:03

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

        M Offline
        M Offline
        mrjj
        Lifetime Qt Champion
        wrote on 14 Sept 2015, 12:09 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 14 Sept 2015, 12:47
        1
        • M mrjj
          14 Sept 2015, 12:09

          @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 14 Sept 2015, 12:47 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.

          M 1 Reply Last reply 14 Sept 2015, 13:10
          0
          • M M.K.
            14 Sept 2015, 12:47

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

            M Offline
            M Offline
            mrjj
            Lifetime Qt Champion
            wrote on 14 Sept 2015, 13:10 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 14 Sept 2015, 13:48
            1
            • M mrjj
              14 Sept 2015, 13:10

              @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 14 Sept 2015, 13:48 last edited by
              #7

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

              M 1 Reply Last reply 14 Sept 2015, 13:52
              0
              • M M.K.
                14 Sept 2015, 13:48

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

                M Offline
                M Offline
                mrjj
                Lifetime Qt Champion
                wrote on 14 Sept 2015, 13:52 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 14 Sept 2015, 14:09
                0
                • M mrjj
                  14 Sept 2015, 13:52

                  @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 14 Sept 2015, 14:09 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.

                  M 1 Reply Last reply 14 Sept 2015, 14:12
                  0
                  • M M.K.
                    14 Sept 2015, 14:09

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

                    M Offline
                    M Offline
                    mrjj
                    Lifetime Qt Champion
                    wrote on 14 Sept 2015, 14:12 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 14 Sept 2015, 14:25
                    1
                    • M mrjj
                      14 Sept 2015, 14:12

                      @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 14 Sept 2015, 14:25 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.

                      M 1 Reply Last reply 14 Sept 2015, 15:00
                      0
                      • M M.K.
                        14 Sept 2015, 14:25

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

                        M Offline
                        M Offline
                        mrjj
                        Lifetime Qt Champion
                        wrote on 14 Sept 2015, 15:00 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

                        11/12

                        14 Sept 2015, 14:25

                        • Login

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