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. Implement stylesheet feature with CSS file for custom widgets
Forum Updated to NodeBB v4.3 + New Features

Implement stylesheet feature with CSS file for custom widgets

Scheduled Pinned Locked Moved Unsolved General and Desktop
cssqssparseparserstylesheet
14 Posts 3 Posters 3.3k 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.
  • IMAN4KI Offline
    IMAN4KI Offline
    IMAN4K
    wrote on last edited by
    #3

    Why exactly did you create a custom RadioButton derived from QAbstractButton?

    Well. it's custom.
    Because i don't want standard widget appearance and also implemented some animation

    enter image description here

    And what types of css properties do you want to support?

    color, opacity , ... as i said

    raven-worxR 1 Reply Last reply
    0
    • IMAN4KI IMAN4K

      Why exactly did you create a custom RadioButton derived from QAbstractButton?

      Well. it's custom.
      Because i don't want standard widget appearance and also implemented some animation

      enter image description here

      And what types of css properties do you want to support?

      color, opacity , ... as i said

      raven-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by
      #4

      @IMAN4K said:

      And what types of css properties do you want to support?

      color, opacity , ... as i said

      and the "..." is the interesting part i asked for...

      QSS is capable of setting properties. So before starting to parse the stylesheet code i suggest you use simply QProperties.

      See this post of mine for setting basic data types via QSS.

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      Ni.SumiN IMAN4KI 2 Replies Last reply
      2
      • raven-worxR raven-worx

        @IMAN4K said:

        And what types of css properties do you want to support?

        color, opacity , ... as i said

        and the "..." is the interesting part i asked for...

        QSS is capable of setting properties. So before starting to parse the stylesheet code i suggest you use simply QProperties.

        See this post of mine for setting basic data types via QSS.

        Ni.SumiN Offline
        Ni.SumiN Offline
        Ni.Sumi
        wrote on last edited by
        #5

        @raven-worx

        It's other question :) related to this.

        for customized widgets , can't we use like this ?

        setObjectname("SomeName");

        and

        #SomeName ::xxxx
        {}

        raven-worxR 1 Reply Last reply
        1
        • Ni.SumiN Ni.Sumi

          @raven-worx

          It's other question :) related to this.

          for customized widgets , can't we use like this ?

          setObjectname("SomeName");

          and

          #SomeName ::xxxx
          {}

          raven-worxR Offline
          raven-worxR Offline
          raven-worx
          Moderators
          wrote on last edited by
          #6

          @Ni.Sumi

          #SomeName ::xxxx

          I don't know if the space between the id- and pseudo-element selector is intentional in your example? It should work without the space (if the widget with the object name supports the pseudo-element of course). With the space it wont work.

          Qt docs say:

          Sub-controls are always positioned with respect to another element - a reference element. This reference element could be the widget or another Sub-control.

          --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
          If you have a question please use the forum so others can benefit from the solution in the future

          Ni.SumiN 1 Reply Last reply
          1
          • raven-worxR raven-worx

            @Ni.Sumi

            #SomeName ::xxxx

            I don't know if the space between the id- and pseudo-element selector is intentional in your example? It should work without the space (if the widget with the object name supports the pseudo-element of course). With the space it wont work.

            Qt docs say:

            Sub-controls are always positioned with respect to another element - a reference element. This reference element could be the widget or another Sub-control.

            Ni.SumiN Offline
            Ni.SumiN Offline
            Ni.Sumi
            wrote on last edited by
            #7

            @raven-worx

            yeah, the space is just by mistakenly. Sorry. It's clear.

            1 Reply Last reply
            0
            • raven-worxR raven-worx

              @IMAN4K said:

              And what types of css properties do you want to support?

              color, opacity , ... as i said

              and the "..." is the interesting part i asked for...

              QSS is capable of setting properties. So before starting to parse the stylesheet code i suggest you use simply QProperties.

              See this post of mine for setting basic data types via QSS.

              IMAN4KI Offline
              IMAN4KI Offline
              IMAN4K
              wrote on last edited by
              #8

              @raven-worx
              I read that post but this is not working :(

              class Sample : public QWidget {
              	Q_OBJECT
              
              	Q_PROPERTY(QColor color READ color WRITE setColor DESIGNABLE true);
              
              public:
              	Sample(QWidget *parent) : QWidget(parent) {
              		QString qss = "Sample {color: rgb(47, 169, 226);}";
              		setStyleSheet(qss);
              	}
              
              	QColor color() const { return _c; }
              	void setColor(const QColor &c) {
              		_c = c;
              	}
              
              private:
              	QColor _c;
              
              protected:
              	void paintEvent(QPaintEvent *) {
              		QPainter p(this);
              		p.fillRect(rect(), color());
              	}
              };
              
              raven-worxR 1 Reply Last reply
              0
              • IMAN4KI IMAN4K

                @raven-worx
                I read that post but this is not working :(

                class Sample : public QWidget {
                	Q_OBJECT
                
                	Q_PROPERTY(QColor color READ color WRITE setColor DESIGNABLE true);
                
                public:
                	Sample(QWidget *parent) : QWidget(parent) {
                		QString qss = "Sample {color: rgb(47, 169, 226);}";
                		setStyleSheet(qss);
                	}
                
                	QColor color() const { return _c; }
                	void setColor(const QColor &c) {
                		_c = c;
                	}
                
                private:
                	QColor _c;
                
                protected:
                	void paintEvent(QPaintEvent *) {
                		QPainter p(this);
                		p.fillRect(rect(), color());
                	}
                };
                
                raven-worxR Offline
                raven-worxR Offline
                raven-worx
                Moderators
                wrote on last edited by
                #9

                @IMAN4K said:

                I read that post but this is not working :(

                first of all you didn't read the post carefully enough ;)

                Sample { color: rgb(47, 169, 226); }
                

                should be

                Sample { qproperty-color: rgb(47, 169, 226); }
                

                Using the color QSS-property is still possible, but then you need to retrieve it from the widget's palette:

                widget->palette().color( QPalette::Text );
                

                --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
                If you have a question please use the forum so others can benefit from the solution in the future

                IMAN4KI 1 Reply Last reply
                2
                • raven-worxR raven-worx

                  @IMAN4K said:

                  I read that post but this is not working :(

                  first of all you didn't read the post carefully enough ;)

                  Sample { color: rgb(47, 169, 226); }
                  

                  should be

                  Sample { qproperty-color: rgb(47, 169, 226); }
                  

                  Using the color QSS-property is still possible, but then you need to retrieve it from the widget's palette:

                  widget->palette().color( QPalette::Text );
                  
                  IMAN4KI Offline
                  IMAN4KI Offline
                  IMAN4K
                  wrote on last edited by
                  #10

                  @raven-worx
                  Ok. this isn't a good approach for custom widgets for example i need more than one color or opacity for painting
                  I think i should go for hard parsing stuff !
                  Could i use qcssparser_p.h for retrieving values ?

                  raven-worxR 1 Reply Last reply
                  0
                  • IMAN4KI IMAN4K

                    @raven-worx
                    Ok. this isn't a good approach for custom widgets for example i need more than one color or opacity for painting
                    I think i should go for hard parsing stuff !
                    Could i use qcssparser_p.h for retrieving values ?

                    raven-worxR Offline
                    raven-worxR Offline
                    raven-worx
                    Moderators
                    wrote on last edited by
                    #11

                    @IMAN4K said:

                    Ok. this isn't a good approach for custom widgets for example i need more than one color or opacity for painting

                    means?
                    Then create a property for each state/type.

                    --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
                    If you have a question please use the forum so others can benefit from the solution in the future

                    IMAN4KI 1 Reply Last reply
                    1
                    • raven-worxR raven-worx

                      @IMAN4K said:

                      Ok. this isn't a good approach for custom widgets for example i need more than one color or opacity for painting

                      means?
                      Then create a property for each state/type.

                      IMAN4KI Offline
                      IMAN4KI Offline
                      IMAN4K
                      wrote on last edited by
                      #12

                      @raven-worx
                      First retrieving the values not working for above example :
                      If i use qdebug

                      qDebug() << this->palette().color(QPalette::Text).red() 
                      			<< this->palette().color(QPalette::Text).green() 
                      			<< this->palette().color(QPalette::Text).blue();
                      

                      I get rbg -> 0 0 0 while i'm using rgb-> 47, 169, 226

                      Secound if we have two colors :
                      Q_PROPERTY(QColor color-on READ color-on WRITE setColor-on DESIGNABLE true);
                      Q_PROPERTY(QColor color-off READ color-off WRITE setColor-off DESIGNABLE true);
                      How get each color in class ?
                      is there a direct access to these properties like color-on() ?
                      or when we declare opacity property like :
                      Q_PROPERTY(float opacity-on READ opacity-on WRITE setOpacity-on DESIGNABLE true);
                      How access this propertty value ?

                      raven-worxR 1 Reply Last reply
                      0
                      • IMAN4KI IMAN4K

                        @raven-worx
                        First retrieving the values not working for above example :
                        If i use qdebug

                        qDebug() << this->palette().color(QPalette::Text).red() 
                        			<< this->palette().color(QPalette::Text).green() 
                        			<< this->palette().color(QPalette::Text).blue();
                        

                        I get rbg -> 0 0 0 while i'm using rgb-> 47, 169, 226

                        Secound if we have two colors :
                        Q_PROPERTY(QColor color-on READ color-on WRITE setColor-on DESIGNABLE true);
                        Q_PROPERTY(QColor color-off READ color-off WRITE setColor-off DESIGNABLE true);
                        How get each color in class ?
                        is there a direct access to these properties like color-on() ?
                        or when we declare opacity property like :
                        Q_PROPERTY(float opacity-on READ opacity-on WRITE setOpacity-on DESIGNABLE true);
                        How access this propertty value ?

                        raven-worxR Offline
                        raven-worxR Offline
                        raven-worx
                        Moderators
                        wrote on last edited by
                        #13

                        @IMAN4K
                        what do you mean how should you access these values?!
                        You specified a getter method in the property definition. You've already shown how to do in an example of yours before?!

                        --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
                        If you have a question please use the forum so others can benefit from the solution in the future

                        IMAN4KI 1 Reply Last reply
                        1
                        • raven-worxR raven-worx

                          @IMAN4K
                          what do you mean how should you access these values?!
                          You specified a getter method in the property definition. You've already shown how to do in an example of yours before?!

                          IMAN4KI Offline
                          IMAN4KI Offline
                          IMAN4K
                          wrote on last edited by IMAN4K
                          #14

                          @raven-worx
                          Oh..
                          Sorry i think that was qt-bug (getter return invalid) but now it's work

                          For last question !
                          Could i use qcssparser_p.h for retrieving values for my purpose ? (i'm a lover of parsing :) )
                          Thanks.

                          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