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

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
  • 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.
  • I Offline
    I Offline
    IMAN4K
    wrote on 5 Aug 2016, 06:06 last edited by IMAN4K 8 May 2016, 08:09
    #1

    Hi Everyone.
    I'm developing custom widgets for my app. for example i've a RadioButton Class derived from QAbstractButton
    and in subclass implementation (and painting) i use some properties {font-size, font-family, color, height, opacity,.... }
    What i want is to fetch these property from a css file in my app (Styles.css).
    Something like this :
    Styles.css

    #RadioButton {
        color:#009688;
        pen-width:2;
        opacity:0.54;
        font-size:13;
    }
    

    Is this possible with standard QWidget::setStyleSheet(const QString & styleSheet) function ?

    Due to my custom widgets should i parse Styles.css on my own (or using qcssparser_p.h) and do as follow ?

    style.h

    namespace Style {
    	class radiobutton {
    		/* parse Styles.css  and get the properties here */
    	};
            /* other widgets */
    }
    

    RadioButton.h

    #include "style.h"
    class RadioButton {
    private:
    	Style::radiobutton _st;
    	/* use  properties value for example _st.opacity() */
    };
    

    So in your opinion what is the best solution ?

    R 1 Reply Last reply 5 Aug 2016, 06:15
    0
    • I IMAN4K
      5 Aug 2016, 06:06

      Hi Everyone.
      I'm developing custom widgets for my app. for example i've a RadioButton Class derived from QAbstractButton
      and in subclass implementation (and painting) i use some properties {font-size, font-family, color, height, opacity,.... }
      What i want is to fetch these property from a css file in my app (Styles.css).
      Something like this :
      Styles.css

      #RadioButton {
          color:#009688;
          pen-width:2;
          opacity:0.54;
          font-size:13;
      }
      

      Is this possible with standard QWidget::setStyleSheet(const QString & styleSheet) function ?

      Due to my custom widgets should i parse Styles.css on my own (or using qcssparser_p.h) and do as follow ?

      style.h

      namespace Style {
      	class radiobutton {
      		/* parse Styles.css  and get the properties here */
      	};
              /* other widgets */
      }
      

      RadioButton.h

      #include "style.h"
      class RadioButton {
      private:
      	Style::radiobutton _st;
      	/* use  properties value for example _st.opacity() */
      };
      

      So in your opinion what is the best solution ?

      R Offline
      R Offline
      raven-worx
      Moderators
      wrote on 5 Aug 2016, 06:15 last edited by
      #2

      @IMAN4K
      you get only the style features of the base class.
      Why exactly did you create a custom RadioButton derived from QAbstractButton?
      And what types of css properties do you want to support?

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

      1 Reply Last reply
      1
      • I Offline
        I Offline
        IMAN4K
        wrote on 5 Aug 2016, 06:58 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

        R 1 Reply Last reply 5 Aug 2016, 08:35
        0
        • I IMAN4K
          5 Aug 2016, 06:58

          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

          R Offline
          R Offline
          raven-worx
          Moderators
          wrote on 5 Aug 2016, 08:35 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

          N I 2 Replies Last reply 5 Aug 2016, 09:01
          2
          • R raven-worx
            5 Aug 2016, 08:35

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

            N Offline
            N Offline
            Ni.Sumi
            wrote on 5 Aug 2016, 09:01 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
            {}

            R 1 Reply Last reply 5 Aug 2016, 09:08
            1
            • N Ni.Sumi
              5 Aug 2016, 09:01

              @raven-worx

              It's other question :) related to this.

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

              setObjectname("SomeName");

              and

              #SomeName ::xxxx
              {}

              R Offline
              R Offline
              raven-worx
              Moderators
              wrote on 5 Aug 2016, 09:08 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

              N 1 Reply Last reply 5 Aug 2016, 09:17
              1
              • R raven-worx
                5 Aug 2016, 09:08

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

                N Offline
                N Offline
                Ni.Sumi
                wrote on 5 Aug 2016, 09:17 last edited by
                #7

                @raven-worx

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

                1 Reply Last reply
                0
                • R raven-worx
                  5 Aug 2016, 08:35

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

                  I Offline
                  I Offline
                  IMAN4K
                  wrote on 5 Aug 2016, 10:14 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());
                  	}
                  };
                  
                  R 1 Reply Last reply 5 Aug 2016, 10:19
                  0
                  • I IMAN4K
                    5 Aug 2016, 10:14

                    @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());
                    	}
                    };
                    
                    R Offline
                    R Offline
                    raven-worx
                    Moderators
                    wrote on 5 Aug 2016, 10:19 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

                    I 1 Reply Last reply 5 Aug 2016, 10:53
                    2
                    • R raven-worx
                      5 Aug 2016, 10:19

                      @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 );
                      
                      I Offline
                      I Offline
                      IMAN4K
                      wrote on 5 Aug 2016, 10:53 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 ?

                      R 1 Reply Last reply 5 Aug 2016, 10:54
                      0
                      • I IMAN4K
                        5 Aug 2016, 10:53

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

                        R Offline
                        R Offline
                        raven-worx
                        Moderators
                        wrote on 5 Aug 2016, 10:54 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

                        I 1 Reply Last reply 5 Aug 2016, 11:25
                        1
                        • R raven-worx
                          5 Aug 2016, 10:54

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

                          I Offline
                          I Offline
                          IMAN4K
                          wrote on 5 Aug 2016, 11:25 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 ?

                          R 1 Reply Last reply 5 Aug 2016, 11:30
                          0
                          • I IMAN4K
                            5 Aug 2016, 11:25

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

                            R Offline
                            R Offline
                            raven-worx
                            Moderators
                            wrote on 5 Aug 2016, 11:30 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

                            I 1 Reply Last reply 5 Aug 2016, 11:44
                            1
                            • R raven-worx
                              5 Aug 2016, 11:30

                              @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?!

                              I Offline
                              I Offline
                              IMAN4K
                              wrote on 5 Aug 2016, 11:44 last edited by IMAN4K 8 May 2016, 11:50
                              #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

                              5/14

                              5 Aug 2016, 09:01

                              topic:navigator.unread, 9
                              • Login

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