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

                              10/14

                              5 Aug 2016, 10:53

                              • Login

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