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. How do I change the appearance of the widgets ?
Qt 6.11 is out! See what's new in the release blog

How do I change the appearance of the widgets ?

Scheduled Pinned Locked Moved Unsolved General and Desktop
18 Posts 5 Posters 5.7k Views 1 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.
  • ManiRonM ManiRon

    @sierdzio Whether QQuickcontrols is available for QT Version 5.5.0

    sierdzioS Offline
    sierdzioS Offline
    sierdzio
    Moderators
    wrote on last edited by
    #5

    @maniron said in How do I change the appearance of the widgets ?:

    @sierdzio Whether QQuickcontrols is available for QT Version 5.5.0

    No, they were added in 5.7.

    For 5.5.0, you'll need to go with Controls 1, which have different styling API (check the docs that came with your installation).

    If you only can - upgrade Qt. 5.5 is very old.

    (Z(:^

    1 Reply Last reply
    1
    • ManiRonM ManiRon

      @sierdzio Whether QQuickcontrols is available for QT Version 5.5.0

      thaiboydigitalT Offline
      thaiboydigitalT Offline
      thaiboydigital
      wrote on last edited by
      #6
      This post is deleted!
      1 Reply Last reply
      0
      • sierdzioS sierdzio

        @maniron said in How do I change the appearance of the widgets ?:

        Is there any way to create a widget like this ?

        Yes.

        Use Qt Style Sheets to tweak how widgets looks.

        For custom icons inside QLineEdit - well that will require some custom subclass I think. Unless you make a custom widget: QFrame, inside QLabel (for icon) and QLineEdit in a horizontal layout.

        I assumed you're using QtWidgets. If you want Qt Quick, then look into https://doc.qt.io/qt-5/qtquickcontrols2-styles.html

        ManiRonM Offline
        ManiRonM Offline
        ManiRon
        wrote on last edited by ManiRon
        #7

        @sierdzio I tried using stylesheet but it is nowhere near the image which i shared . This below is the image i edited using stylesheet

        0_1565265230410_8.jpg

        1 Reply Last reply
        0
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by
          #8

          So you are using QtWidgets after all? Or why do you ask about QtQuick? I'm confused.

          Sorry I won't write that stylesheet for you. What you have looks like you've got pretty close to how the target looks. A few tweaks here and there and it should be roughly OK. To get a transparent window you'll need to set proper window attribute for your main widget (and it may not work on some platforms).

          (Z(:^

          ManiRonM 1 Reply Last reply
          3
          • sierdzioS sierdzio

            So you are using QtWidgets after all? Or why do you ask about QtQuick? I'm confused.

            Sorry I won't write that stylesheet for you. What you have looks like you've got pretty close to how the target looks. A few tweaks here and there and it should be roughly OK. To get a transparent window you'll need to set proper window attribute for your main widget (and it may not work on some platforms).

            ManiRonM Offline
            ManiRonM Offline
            ManiRon
            wrote on last edited by
            #9

            @sierdzio said in How do I change the appearance of the widgets ?:

            window attribute

            What do you mean by window attribute ?

            J.HilkJ Pradeep P NP 2 Replies Last reply
            0
            • ManiRonM ManiRon

              @sierdzio said in How do I change the appearance of the widgets ?:

              window attribute

              What do you mean by window attribute ?

              J.HilkJ Online
              J.HilkJ Online
              J.Hilk
              Moderators
              wrote on last edited by
              #10

              @maniron
              IIRC:
              setAttribute(Qt::WA_TranslucentBackground, true);


              Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


              Q: What's that?
              A: It's blue light.
              Q: What does it do?
              A: It turns blue.

              ManiRonM 1 Reply Last reply
              4
              • ManiRonM ManiRon

                @sierdzio said in How do I change the appearance of the widgets ?:

                window attribute

                What do you mean by window attribute ?

                Pradeep P NP Offline
                Pradeep P NP Offline
                Pradeep P N
                wrote on last edited by Pradeep P N
                #11

                @maniron
                Also please check windowOpacity. [ void setWindowOpacity(qreal level) ]

                You are also missing the Layouts & Alignments.

                All the best

                Pradeep Nimbalkar.
                Upvote the answer(s) that helped you to solve the issue...
                Keep code clean.

                ManiRonM 1 Reply Last reply
                4
                • J.HilkJ J.Hilk

                  @maniron
                  IIRC:
                  setAttribute(Qt::WA_TranslucentBackground, true);

                  ManiRonM Offline
                  ManiRonM Offline
                  ManiRon
                  wrote on last edited by
                  #12

                  @j-hilk
                  It appears same even after setting the window attribute.

                  sierdzioS Pradeep P NP 2 Replies Last reply
                  0
                  • ManiRonM ManiRon

                    @j-hilk
                    It appears same even after setting the window attribute.

                    sierdzioS Offline
                    sierdzioS Offline
                    sierdzio
                    Moderators
                    wrote on last edited by
                    #13

                    @maniron said in How do I change the appearance of the widgets ?:

                    @j-hilk
                    It appears same even after setting the window attribute.

                    You probably didn't specify alpha channel when setting background-color in your stylesheet.

                    (Z(:^

                    ManiRonM 1 Reply Last reply
                    5
                    • ManiRonM ManiRon

                      @j-hilk
                      It appears same even after setting the window attribute.

                      Pradeep P NP Offline
                      Pradeep P NP Offline
                      Pradeep P N
                      wrote on last edited by
                      #14

                      @maniron
                      Did you try to setWindowOpacity for your widget ?

                      Pradeep Nimbalkar.
                      Upvote the answer(s) that helped you to solve the issue...
                      Keep code clean.

                      1 Reply Last reply
                      0
                      • Pradeep P NP Pradeep P N

                        @maniron
                        Also please check windowOpacity. [ void setWindowOpacity(qreal level) ]

                        You are also missing the Layouts & Alignments.

                        All the best

                        ManiRonM Offline
                        ManiRonM Offline
                        ManiRon
                        wrote on last edited by
                        #15

                        @pradeep-p-n

                        "You are also missing the Layouts & Alignments."

                        I'm doing a sample and my main aim is not the layout and allignment, i need to achieve that colour.

                        "Also please check windowOpacity. [ void setWindowOpacity(qreal level) ]"

                        I'm trying this out will let you know if it works or not.

                        thank you for your time

                        Pradeep P NP 1 Reply Last reply
                        0
                        • sierdzioS sierdzio

                          @maniron said in How do I change the appearance of the widgets ?:

                          @j-hilk
                          It appears same even after setting the window attribute.

                          You probably didn't specify alpha channel when setting background-color in your stylesheet.

                          ManiRonM Offline
                          ManiRonM Offline
                          ManiRon
                          wrote on last edited by
                          #16

                          @sierdzio

                          sorry sierdzio, setting the attribute is working but it makes the window completely transparent. And I'm specifying the alpha channel also.

                          J.HilkJ 1 Reply Last reply
                          0
                          • ManiRonM ManiRon

                            @sierdzio

                            sorry sierdzio, setting the attribute is working but it makes the window completely transparent. And I'm specifying the alpha channel also.

                            J.HilkJ Online
                            J.HilkJ Online
                            J.Hilk
                            Moderators
                            wrote on last edited by J.Hilk
                            #17

                            @maniron said in How do I change the appearance of the widgets ?:

                            @sierdzio

                            sorry sierdzio, setting the attribute is working but it makes the window completely transparent. And I'm specifying the alpha channel also.

                            are you sure? setWindowOpacity makes the complete window (including child widgets) transparent, WA_TranslucentBackground should only effect the background

                            maybe sharing some code, would be helpful


                            Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                            Q: What's that?
                            A: It's blue light.
                            Q: What does it do?
                            A: It turns blue.

                            1 Reply Last reply
                            4
                            • ManiRonM ManiRon

                              @pradeep-p-n

                              "You are also missing the Layouts & Alignments."

                              I'm doing a sample and my main aim is not the layout and allignment, i need to achieve that colour.

                              "Also please check windowOpacity. [ void setWindowOpacity(qreal level) ]"

                              I'm trying this out will let you know if it works or not.

                              thank you for your time

                              Pradeep P NP Offline
                              Pradeep P NP Offline
                              Pradeep P N
                              wrote on last edited by
                              #18

                              @maniron Please share some sample code.

                              Pradeep Nimbalkar.
                              Upvote the answer(s) that helped you to solve the issue...
                              Keep code clean.

                              1 Reply Last reply
                              3

                              • Login

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