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 to customize layout with CSS
Forum Updated to NodeBB v4.3 + New Features

How to customize layout with CSS

Scheduled Pinned Locked Moved Unsolved General and Desktop
11 Posts 5 Posters 2.9k 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.
  • Z Offline
    Z Offline
    zonixo
    wrote on 17 Oct 2019, 08:56 last edited by
    #1

    Hello,

    I'm currently trying to customize the layout and apparently i can't modify anything. I use the setObjectName to define the name of object but don't work out. What is the solution ?

    Thanks

    1 Reply Last reply
    0
    • S Offline
      S Offline
      SGaist
      Lifetime Qt Champion
      wrote on 17 Oct 2019, 09:05 last edited by
      #2

      Hi and welcome to devnet,

      What layout ?
      What CSS ?
      What are you trying to achieve ?

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      1
      • Z Offline
        Z Offline
        zonixo
        wrote on 17 Oct 2019, 11:13 last edited by
        #3

        Thank you.

        I added some widgets inside a Layout and i would like to customize the Layout to be able to add border and background but it not working.

        # Inside my main
        self.hLayout = QHBoxLayout()
        self.hLayout.setObjectName("hLayout")
        
        self.hLayout.addWidget(self.btn_menu)
        
        # Inside the stylesheet added to my QMainWindow ( self.w )
        self.w.setStyleSheet(css.MAIN)
        
        MAIN = """
        QHBoxLayout#hLayout {
           background: red;
        }
        
        QPushButton#btn_menu {
           margin-left: 5px;
           background: white;
        }
        
        

        The CSS doesn't work on the layout selector but working on the QPushButton selector. What is the problem ? Layouts can't be customize ?

        J P 2 Replies Last reply 17 Oct 2019, 11:31
        0
        • Z zonixo
          17 Oct 2019, 11:13

          Thank you.

          I added some widgets inside a Layout and i would like to customize the Layout to be able to add border and background but it not working.

          # Inside my main
          self.hLayout = QHBoxLayout()
          self.hLayout.setObjectName("hLayout")
          
          self.hLayout.addWidget(self.btn_menu)
          
          # Inside the stylesheet added to my QMainWindow ( self.w )
          self.w.setStyleSheet(css.MAIN)
          
          MAIN = """
          QHBoxLayout#hLayout {
             background: red;
          }
          
          QPushButton#btn_menu {
             margin-left: 5px;
             background: white;
          }
          
          

          The CSS doesn't work on the layout selector but working on the QPushButton selector. What is the problem ? Layouts can't be customize ?

          J Offline
          J Offline
          JonB
          wrote on 17 Oct 2019, 11:31 last edited by
          #4

          @zonixo

          i would like to customize the Layout
          QHBoxLayout#hLayout

          You cannot CSS style layouts, only QWidgets, and layouts are not widgets.

          1 Reply Last reply
          1
          • Z zonixo
            17 Oct 2019, 11:13

            Thank you.

            I added some widgets inside a Layout and i would like to customize the Layout to be able to add border and background but it not working.

            # Inside my main
            self.hLayout = QHBoxLayout()
            self.hLayout.setObjectName("hLayout")
            
            self.hLayout.addWidget(self.btn_menu)
            
            # Inside the stylesheet added to my QMainWindow ( self.w )
            self.w.setStyleSheet(css.MAIN)
            
            MAIN = """
            QHBoxLayout#hLayout {
               background: red;
            }
            
            QPushButton#btn_menu {
               margin-left: 5px;
               background: white;
            }
            
            

            The CSS doesn't work on the layout selector but working on the QPushButton selector. What is the problem ? Layouts can't be customize ?

            P Online
            P Online
            Pl45m4
            wrote on 17 Oct 2019, 11:53 last edited by
            #5

            @zonixo

            Add a QFrame to your layout and put your items inside this QFrame. Then you can set your style to your frame.


            If debugging is the process of removing software bugs, then programming must be the process of putting them in.

            ~E. W. Dijkstra

            J 1 Reply Last reply 17 Oct 2019, 12:00
            1
            • P Pl45m4
              17 Oct 2019, 11:53

              @zonixo

              Add a QFrame to your layout and put your items inside this QFrame. Then you can set your style to your frame.

              J Offline
              J Offline
              JonB
              wrote on 17 Oct 2019, 12:00 last edited by
              #6

              @Pl45m4
              Yes, but then how does the OP get the layout stuff applied to the widgets which are now inside a single QFrame to which the layout applies, instead of to each widget?

              P 1 Reply Last reply 17 Oct 2019, 12:12
              0
              • J JonB
                17 Oct 2019, 12:00

                @Pl45m4
                Yes, but then how does the OP get the layout stuff applied to the widgets which are now inside a single QFrame to which the layout applies, instead of to each widget?

                P Online
                P Online
                Pl45m4
                wrote on 17 Oct 2019, 12:12 last edited by Pl45m4
                #7

                @JonB

                • MainWidget / Window with layout
                  • Frame
                    • Layout with stuff

                form.png

                Or even multiple QFrames around each button. Instead of adding the widget to the layout directly, add a QFrame and place widget inside frame.

                IDK :) This was the first thing that came to my mind

                @zonixo
                Setting the background color to each widget instead of whole layout wont work for you?


                If debugging is the process of removing software bugs, then programming must be the process of putting them in.

                ~E. W. Dijkstra

                J 1 Reply Last reply 17 Oct 2019, 12:54
                1
                • P Pl45m4
                  17 Oct 2019, 12:12

                  @JonB

                  • MainWidget / Window with layout
                    • Frame
                      • Layout with stuff

                  form.png

                  Or even multiple QFrames around each button. Instead of adding the widget to the layout directly, add a QFrame and place widget inside frame.

                  IDK :) This was the first thing that came to my mind

                  @zonixo
                  Setting the background color to each widget instead of whole layout wont work for you?

                  J Offline
                  J Offline
                  JonB
                  wrote on 17 Oct 2019, 12:54 last edited by JonB
                  #8

                  @Pl45m4
                  Ah, OK, so what you really mean is move the original layout (with its widgets) down one level into the new QFrame. Then he can set the border/background on the frame widget holding the layout instead of on the layout itself. OK.

                  1 Reply Last reply
                  1
                  • C Offline
                    C Offline
                    carolinecary
                    Banned
                    wrote on 17 Oct 2019, 15:01 last edited by
                    #9
                    This post is deleted!
                    P 1 Reply Last reply 17 Oct 2019, 15:05
                    0
                    • C carolinecary
                      17 Oct 2019, 15:01

                      This post is deleted!

                      P Online
                      P Online
                      Pl45m4
                      wrote on 17 Oct 2019, 15:05 last edited by
                      #10

                      @carolinecary

                      Hi,

                      this is a Qt forum. I dont think OP is talking about websites :)


                      If debugging is the process of removing software bugs, then programming must be the process of putting them in.

                      ~E. W. Dijkstra

                      1 Reply Last reply
                      1
                      • S Offline
                        S Offline
                        SGaist
                        Lifetime Qt Champion
                        wrote on 17 Oct 2019, 16:09 last edited by
                        #11

                        @Pl45m4 That was a spammer.

                        Interested in AI ? www.idiap.ch
                        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                        1 Reply Last reply
                        1

                        2/11

                        17 Oct 2019, 09:05

                        topic:navigator.unread, 9
                        • Login

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