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. QWidget stylesheet rules
Forum Updated to NodeBB v4.3 + New Features

QWidget stylesheet rules

Scheduled Pinned Locked Moved Solved General and Desktop
12 Posts 3 Posters 1.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.
  • J JonB
    23 Oct 2020, 10:10

    @CP71 said in QWidget stylesheet rules:

    But I can’t do point n.3.

    QWidget#FormTop{ should indeed work. Make sure you really have done the setObjectName("FormTop")? Try plain #FormTop for the rule (I think that works, though not certain), or *#FormTop? Remove you other rules to ensure you check this alone.

    Avoid multiple definition with same value in two or more items (E.g. background: #0C0C0C;)

    Good luck ;-) CSS/QSS doesn't work this way, regrettably :( I ended up achieving this the way I would in HTML/CSS, viz. lots of separate classes for such attributes

    .buttonColorGreen { background-color: rgba(185, 245, 144, 0.9); }
    .colorRed { color: Red; }
    
    btnViewActions.setProperty("class", "buttonColorGreen");
    
    C Offline
    C Offline
    CP71
    wrote on 23 Oct 2020, 10:45 last edited by
    #3

    Thanks @JonB ,
    I’m certainly making a mistake, #FormTop doesn’t work also when is alone in css. I’m sure form is called FormTop but something dosn’t run in my code, I’m investigate.

    Thank you very much to share your way to resolve my problem, I will keep it in mind ;)

    My hope was working only in the stylesheet for look customization.

    Thanks
    CP71

    J J 2 Replies Last reply 23 Oct 2020, 10:50
    0
    • C CP71
      23 Oct 2020, 10:45

      Thanks @JonB ,
      I’m certainly making a mistake, #FormTop doesn’t work also when is alone in css. I’m sure form is called FormTop but something dosn’t run in my code, I’m investigate.

      Thank you very much to share your way to resolve my problem, I will keep it in mind ;)

      My hope was working only in the stylesheet for look customization.

      Thanks
      CP71

      J Offline
      J Offline
      JonB
      wrote on 23 Oct 2020, 10:50 last edited by JonB
      #4

      @CP71 said in QWidget stylesheet rules:

      I’m sure form is called FormTop

      To use #FormTop{ you must use setObjectName("FormTop") on the instance, either explicitly in your code or implicitly in designer-generated where you set the objectName property? If you mean you have a class named FormTop then you must use just FormTop{

      C 1 Reply Last reply 23 Oct 2020, 13:18
      1
      • C CP71
        23 Oct 2020, 10:45

        Thanks @JonB ,
        I’m certainly making a mistake, #FormTop doesn’t work also when is alone in css. I’m sure form is called FormTop but something dosn’t run in my code, I’m investigate.

        Thank you very much to share your way to resolve my problem, I will keep it in mind ;)

        My hope was working only in the stylesheet for look customization.

        Thanks
        CP71

        J Offline
        J Offline
        J.Hilk
        Moderators
        wrote on 23 Oct 2020, 10:51 last edited by J.Hilk
        #5

        @CP71 said in QWidget stylesheet rules:

        ’m certainly making a mistake, #FormTop doesn’t work also when is alone in css.

        I'm almost 100% certain, that there is no standalone "background:" property for QStyleSheet, what you're looking for is background-color: like in your QLabel example


        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.

        J C 2 Replies Last reply 23 Oct 2020, 10:53
        1
        • J J.Hilk
          23 Oct 2020, 10:51

          @CP71 said in QWidget stylesheet rules:

          ’m certainly making a mistake, #FormTop doesn’t work also when is alone in css.

          I'm almost 100% certain, that there is no standalone "background:" property for QStyleSheet, what you're looking for is background-color: like in your QLabel example

          J Offline
          J Offline
          JonB
          wrote on 23 Oct 2020, 10:53 last edited by JonB
          #6

          @J-Hilk
          That's a damned good spot :) Hmm, actually read on.... And reduce your "I'm almost 100% certain" ;-)

          @CP71
          Notice how my rule uses background-color:.

          There is a CSS attribute background, but it specifies more than just the color (like background: lightblue url("img_tree.gif") no-repeat fixed center;). QSS may not allow this.... EDIT Actually, it does, according to https://doc.qt.io/qt-5/stylesheet-reference.html#list-of-properties

          Shorthand notation for setting the background. Equivalent to specifying background-color, background-image, background-repeat, and/or background-position.

          1 Reply Last reply
          1
          • J J.Hilk
            23 Oct 2020, 10:51

            @CP71 said in QWidget stylesheet rules:

            ’m certainly making a mistake, #FormTop doesn’t work also when is alone in css.

            I'm almost 100% certain, that there is no standalone "background:" property for QStyleSheet, what you're looking for is background-color: like in your QLabel example

            C Offline
            C Offline
            CP71
            wrote on 23 Oct 2020, 13:07 last edited by
            #7

            @J-Hilk
            Thanks.
            Seems background and background-color are interchangeable, so seems they have same behavior, anyway I changed all in background-color and I have same result.

            1 Reply Last reply
            0
            • J JonB
              23 Oct 2020, 10:50

              @CP71 said in QWidget stylesheet rules:

              I’m sure form is called FormTop

              To use #FormTop{ you must use setObjectName("FormTop") on the instance, either explicitly in your code or implicitly in designer-generated where you set the objectName property? If you mean you have a class named FormTop then you must use just FormTop{

              C Offline
              C Offline
              CP71
              wrote on 23 Oct 2020, 13:18 last edited by
              #8

              @JonB
              At starting I had “FormTop” only in UI Editor, next for major certain I called setObjectName in the constructor of the form.

              My Idea is to create an object to manage the changing of style, but now I read CSS and and call setStyleSheet in the constructor.

              J 1 Reply Last reply 23 Oct 2020, 13:23
              0
              • C CP71
                23 Oct 2020, 13:18

                @JonB
                At starting I had “FormTop” only in UI Editor, next for major certain I called setObjectName in the constructor of the form.

                My Idea is to create an object to manage the changing of style, but now I read CSS and and call setStyleSheet in the constructor.

                J Offline
                J Offline
                JonB
                wrote on 23 Oct 2020, 13:23 last edited by JonB
                #9

                @CP71
                I don't really know what you're saying here. Yes, you can set explicit stylesheets on each individual QWidget. But this can make things harder to manage/debug than if you stick to an application- (or even window-)specific stylesheet with class/object selectors.

                If it were me, I would persist in finding why yours does not seem to work. I have used object-selectors, and they do work. However, I leave that to you.

                C 1 Reply Last reply 26 Oct 2020, 10:41
                1
                • J JonB
                  23 Oct 2020, 13:23

                  @CP71
                  I don't really know what you're saying here. Yes, you can set explicit stylesheets on each individual QWidget. But this can make things harder to manage/debug than if you stick to an application- (or even window-)specific stylesheet with class/object selectors.

                  If it were me, I would persist in finding why yours does not seem to work. I have used object-selectors, and they do work. However, I leave that to you.

                  C Offline
                  C Offline
                  CP71
                  wrote on 26 Oct 2020, 10:41 last edited by
                  #10

                  Hi everybody.
                  Thanks to all for help.

                  Now seems to work well!

                  I don’t know why, but the following code works well

                  #FormTop QWidget{
                  background-color: #FFFFFF;
                  color: #000000;
                  }

                  Instead the following code doesn’t work, or it seems so:

                  QWidget#FormTop{
                  background-color: #FFFFFF;
                  color: #000000;
                  }

                  I thought both codes are good but, maybe I made a mistake in the second case, I don't know what!

                  Thanks
                  CP71

                  J 1 Reply Last reply 26 Oct 2020, 10:51
                  0
                  • C CP71
                    26 Oct 2020, 10:41

                    Hi everybody.
                    Thanks to all for help.

                    Now seems to work well!

                    I don’t know why, but the following code works well

                    #FormTop QWidget{
                    background-color: #FFFFFF;
                    color: #000000;
                    }

                    Instead the following code doesn’t work, or it seems so:

                    QWidget#FormTop{
                    background-color: #FFFFFF;
                    color: #000000;
                    }

                    I thought both codes are good but, maybe I made a mistake in the second case, I don't know what!

                    Thanks
                    CP71

                    J Offline
                    J Offline
                    JonB
                    wrote on 26 Oct 2020, 10:51 last edited by
                    #11

                    @CP71
                    Umm, depends what you have...

                    #FormTop QWidget finds something with object name FormTop, and then sets a QWidget inside it. QWidget#FormTop finds a QWidget whose object name is FormTop and sets that. So what exactly have you set FormTop object name on?

                    C 1 Reply Last reply 26 Oct 2020, 11:47
                    1
                    • J JonB
                      26 Oct 2020, 10:51

                      @CP71
                      Umm, depends what you have...

                      #FormTop QWidget finds something with object name FormTop, and then sets a QWidget inside it. QWidget#FormTop finds a QWidget whose object name is FormTop and sets that. So what exactly have you set FormTop object name on?

                      C Offline
                      C Offline
                      CP71
                      wrote on 26 Oct 2020, 11:47 last edited by
                      #12

                      Thanks @JonB
                      I have a empty project with following items

                      4310d27a-7d3e-455c-8d4f-3d0940892c36-image.png

                      My FormTop is

                      24068377-edf0-4f70-a0b6-89f15158a884-image.png

                      In CSS I must change target for style from FormTop to WidgetFormTop.

                      So to link to my latest post, the following code works well.

                      WidgetFormTop QWidget{

                      background-color: #FFFFFF;
                      color: #000000;
                      }

                      Instead the following code doesn’t work, or it seems so:

                      WidgetFormTop#FormTop{
                      background-color: #FFFFFF;
                      color: #000000;
                      }

                      For me, the objectName you can set via UI editor (objectName property) or via code by setObjectName();

                      In fact, I reached up my goal only partially. I really wanted to set properties of “FormTop” but I can’t if I write “FormTop” in CSS. But I can do indirectly writing “WidgetFormTop” in CSS . Why? I’don’t know.

                      Remember, I call setStyleSheet of MainFrame in main.cpp.

                      1 Reply Last reply
                      0

                      12/12

                      26 Oct 2020, 11:47

                      • Login

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