June 5, 2012

Sam Sam
Area 51 Engineer
609 posts

[Solved] Using variables in style sheets qss

 

Is there anyway that we can define a hex/rgb numbers to a variable and use them in our stylesheet(.qss) file . For eg

  1. myColor = #DFDFE0
  2. QPushButton { background-color: myColor; }

This is required as there are many components in .qss file where i need to use the same hex value for color. So I was thinking that at the top of the stylesheet file i can define all the variable and use them as required. Also if i need to change the color then i have to change at one place and that will be reflected for all the components.

Thanks

11 replies

June 5, 2012

pritamghanghas pritamghangh..
Lab Rat
26 posts

I dont think stylesheets have support for that.
you can group rules together, not sure about the exact syntax

QPushButton QLabel QWidget { background-color: #DFDFE0 }

June 5, 2012

miroslav miroslav
Ant Farmer
228 posts

You can use a text template for the style sheet, create the actual stylesheet as a combination of the template and a theme and set it. See Grantlee for string templating. I did something similar, used just basic string replacement and it works fine.

 Signature 

Mirko Boehm | .(JavaScript must be enabled to view this email address) | KDE e.V.
FSFE Fellow
Qt Certified Specialist

June 5, 2012

Sam Sam
Area 51 Engineer
609 posts

@miroslav

Can you give some examples about how can i use this in stylesheets(.qss) file , that will be really helpful. I have gone through the documentation [grantlee.org] but couldn’t understand much about how to use it.

Thanks for your time.

June 5, 2012

stephen stephen
Lab Rat
17 posts

I’d suggest looking at the book example or the unit tests in the grantlee repository. I think the books example is the most complete small example.

June 5, 2012

miroslav miroslav
Ant Farmer
228 posts
stephen wrote:
I’d suggest looking at the book example or the unit tests in the grantlee repository. I think the books example is the most complete small example.

Thanks, Stephen!

 Signature 

Mirko Boehm | .(JavaScript must be enabled to view this email address) | KDE e.V.
FSFE Fellow
Qt Certified Specialist

June 5, 2012

clepto clepto
Ant Farmer
39 posts

can you post i little code example using it in a qt application because i need it to

June 6, 2012

Sam Sam
Area 51 Engineer
609 posts

I am trying to run the book example provided in Grantlee repository [gitorious.org].
Dont know where i am going wrong, whenever i run the project i get the following errors

  1. 13:52:01: Running build steps for project books...
  2. 13:52:01: Configuration unchanged, skipping qmake step.
  3. 13:52:01: Starting: "C:\QtSDK\QtCreator\bin\jom.exe"
  4.  c:\qtsdk\desktop\qt\4.8.0\msvc2010\bin\qmake.exe -spec ..\..\..\QtSDK\Desktop\Qt\4.8.0\msvc2010\mkspecs\win32-msvc2010 CONFIG+=declarative_debug -o Makefile ..\books\books.pro
  5.  C:\QtSDK\QtCreator\bin\jom.exe -nologo -j 4 -f Makefile.Debug
  6.  
  7. jom 1.0.6 - empower your cores
  8.  
  9. Error: dependent 'debug\bookwindow.moc' does not exist.
  10. command failed with exit code 2
  11. 13:52:02: The process "C:\QtSDK\QtCreator\bin\jom.exe" exited with code 2.
  12. Error while building project books (target: Desktop)
  13. When executing build step 'Make'

What steps should i follow to make this working.
Thanks.

July 12, 2012

Sam Sam
Area 51 Engineer
609 posts

I tried but still couldn’t get this working.

July 12, 2012

Lukas Geyer Lukas Geyer
Gene Splicer
2074 posts

You do not need a full-blown template library just to replace some text. If this fits your needs doing a simple QString::replace() does the trick as well.

  1. QPushButton { background-color: myColor; }
  2.  
  3. QString styleSheet = ...;
  4. styleSheet.replace("myColor", "#DFDFE0");
  5. styleSheet.replace(...);

See also this [qt-project.org] thread.

July 12, 2012

Lukas Geyer Lukas Geyer
Gene Splicer
2074 posts

pritamghanghas wrote:
I dont think stylesheets have support for that.
you can group rules together, not sure about the exact syntax

QPushButton QLabel QWidget { background-color: #DFDFE0 }


I just want to mention that this does not do what you expect it to do.

If you want to group several selectors you will have to use commas. QPushButton, QLabel, QWidget { background-color: #DFDFE0 }

Without commas, you are doing a descendant selection.

August 28, 2012

Sam Sam
Area 51 Engineer
609 posts

Thanks for the help,

For the implementation we created a parser that would parse the css file with the user defined variable and replace the variable with the actual color code.

Regards
Soumitra.

 
  ‹‹ [Solved] Layout issue      QSortFilterProxyModel setData(), and signals issue [solved] ››

You must log in to post a reply. Not a member yet? Register here!