[Release] Qt dark orange stylesheet

Coding
1

Hey!

When I started with Qt I looked for a good looking stylesheet out there but I couldn’t find a single one, seems like people doesn’t like to share their styles.

After a while I decided to develop my own stylesheet and since then I have kept using it both in maya and in my external Qt applications I develop.

I believe that a good looking UI subconsciously motivates an artist to work faster and better. It just becomes more intuitive and polished.
In my opinion a tool both has to work good, but it also has to look professional and it should please the eye!
I love to have consistent looking tools, makes them look like a big family.

Anyway, I wanted to share it with the community in case you guys ever happen to be on the same boat. Some widgets might not have 100% support for the style but you’ll eventually figure those out, besides this is a good starting point :slight_smile:

Stylesheet file: http://www.yasinuludag.com/darkorange.stylesheet

The file might be a little bloated for my taste, didn’t have time to clean it up, should be fine though!

I find that it works best with the “plastique” style. So app.setStyle(“plastique”) and then widget.setStyleSheet(“content of darkorange.stylesheet file”)

Before:

After:

EDIT:

Here are the three images used by the stylesheet.



here is the resource xml file:


<RCC>
  <qresource>
    <file>images/checkbox.png</file>
    <file alias="down_arrow.png">images/down_arrow.png</file>
    <file>images/handle.png</file>
  </qresource>
</RCC>

You’ll need to compile this resource xml by using pyrcc4 inside the bin folder of your PyQt installation, this will produce a .py file that you import into your application. The import brings in the resources online so the stylesheet automagically finds them.

EDIT 2:

Thanks to Jesse “jrapczak” Rapczak for the improvements and bug fixes, links has been updated! :slight_smile:
Here are his results:

1 Like
2

Nice. I’m all for more asset/knowledge sharing in this industry(when possible).

3

awesome. Now I don’t have to finish my own dark stylesheet… Thanks for sharing! I like the orange look.

Edit: seems your stylesheet misses some png images? Please share them if possible.

4

Hey :slight_smile:

The orange look comes both from tech-artists.org and from the compositing application Nuke :slight_smile: I really like orange + dark gray.

I’ll get both of the png’s up tomorow! Promise!

Have to sleep now!

5

Thanks Yasin, that’s pretty awesome, I didn’t even think to do that, now I want to play with making them too. I agree about what you said about the tools having a consistent look and professional feel.

6

Thanks Matt :}

Here are the two images used by the stylesheet.


here is the resource xml file:


<RCC>
  <qresource>

<!-- HAS ALIAS -->
    <file alias="down_arrow.png">images/down_arrow.png</file>

<!-- HAS NOT -->
    <file>images/handle.png</file>

  </qresource>
</RCC>

You’ll need to compile this resource xml by using pyrcc4 inside the bin folder of your PyQt installation, this will produce a .py file that you import into your application. The import brings in the resources online so the stylesheet automagically finds them.

7

thank you Yasin!

matt: writing a .qss stylesheet looks more complicated than it actually is when you look at the Qt docs. With Yasin’s example it should be very easy to make your own stylesheets. Qt also only supports a limited set of CSS commands, to keep things easy.
You should also be able to put the stylesheet itself in a resource file. Put your app icon there as well and you got a nice reusable package to customize your UIs.

Here’s some resources I used when looking into qss:

http://levelfour.googlecode.com/svn-history/r338/branches/dev/app/bin/win32/styles/levelfour.qss (another example)

http://doc.qt.nokia.com/4.7-snapshot/style-reference.html (scroll down to see all the elements that can be styled - rather abstract)

http://doc.qt.nokia.com/4.7-snapshot/stylesheet-examples.html (widget styling examples - less abstract and imho more useful)

http://doc.qt.nokia.com/4.7-snapshot/richtext-html-subset.html (overview over the supported CSS commands - scroll down)

8

Based on some older discussions on the nuke lists and some digging i have a PyQt (and a newer PySide version) module that does quick styling based on QPalette rather than stylesheets. This comes with some advantages. In addition it allows for automatic generation of simple color schemes based on a base color, hightlight color and spread. I don’t want to hijack your thread. If there is interest i can post the link tho.

Regards,
Thorsten

9

Be my guest, sounds interesting :slight_smile:

10

Heya,

note that this is not the latest version (oh how i hate syncronising internal and external repos). I will try to fix that asap. And it is (as per usual with me) pretty ugly code heh.

This is Python only, but should also serve as an easy starting point for a C-Version if needed.

http://code.google.com/p/qcolorscheme/

The colors for the standard autogenerated theme are courtesy of an older thread on the nuke list as mentioned and should be pretty close.

Here’s two shots. First beeing the default nuke theme, the second one beeing an autogenerated bright theme.

11

While QPallete allows you to easily control the color on your guis at a global level, to get more sophisticated looking ui with custom color at per widget functionality level I’d say stylesheets are better. You can’t control shapes or highlights or different behavioural elements with QPallete as good as you can with stylesheets. :slight_smile:

QPallete for me would correspond to adding colors using html tags.
While stylesheets would correspond to coloring, styling, shaping and controling using .css.

This comparision was purely to get my point across!

12

I see what you mean. We have an app here that is depending a lot on stylesheets, and i am looking to change that. Changing colors and style on a per-widget basis is easily possible (take a look at the multicolor example), tho i should add that in a more usable and integrated way most definitely. What i like about using the palette approach is that the widgets do keep their themed look and feel and i am only changing colors and looks. This leads to a quite consistent look and feel. Whereas i always ended up with oddities when using stylesheets.
In addition i find them way harder to maintain or dynamically change due to their “multiline-text-field-single-property” nature. So for example for the pseudo shaded front of a button i need a gradient. Constructing the gradient property dynamically felt pretty painful. As long as i am happy with the button having a gradient it is a matter of setting the base colors correctly in the palette and all widgets will draw properly. If i need a green button i just autogenerate a style from a green basecolor and apply it to the widget.

Anyways i would say both have their pro’s and con’s and i am eager to hear everyone’s stance on this. I am not really knee-deep into Qt (neither native nor in python) and i might have some predjudices up my sleaves :slight_smile:

Kind Regards,
Thorsten

P.S. still trying to find time to get the newer version up.

13

Yeah I saw the multi color scheme, my concern was more towards styling and shaping :).

I’ve never liked stylesheets / qss for uis that needs to change color dynamically such as a button highlighting itself to indicate “CLICK ME”!
Maybe I’m just missing something, perhaps there is support for custom attribute / flag that can be catched in the qss file just like all the other flags like “pressed”, “released” etc.
I think QPalette could be useful in that situation where dynamic color changes are needed :slight_smile:

My only concern is you have to actually go and apply a QPalette style to each individual widget in the code itself when you want darker tones or brighter tones here and there, otherwise everything ends up too washed out, while in stylesheets you say all QTextEdits should be darker, and it just works like in my example of dark skin.
With QPalette you would have to apply it manually in code if you wanted to have darker QTextEdits.

Besides I like to break up the style from the code. Not only Qt does this but WPF does it as well, which is something I love :slight_smile:
It also allows the developer to work independently from the designer / stylist.

But that’s just me!

14

Hey again,

i hear you in regards to seperating code and look. But arent stylesheets only doing that in a limited way? A lot of the “design” is still done by the style which is responsible for the drawing. And the style might or might not respect colors and/or stylesheets, no? And then there are things like padding/margins/borders that also have actual properties on many widgets? It feels a bit like hacking over the built ins.
Quick edit: I realized this might come across rethorical, but i am seriously asking as i am not to sure how stylesheets tie in with the rest of the style system. And it seemed to me that styles could just draw anything they wanted and disrespect stylesheets. But am not sure.

To be honest i think the people that did plastique did a hell of a job and i am not too keen on adjusting it in many ways. I prefer a more consistent look and feel. If i wanted to make TextEdits different i think i would just subclass it and add the stylesheet to the class. I am subclassing quite a bit anyways to create reusable custom widgets. It does not really matter if i apply a stylesheet there or a qcolorscheme. This is probably highly dependent on the type of UI that is done. And i would not really know if i prefer subclassing a widget to globally change it or write a stylesheet for that. Need to think about that heh

I guess in the end the proper way to do this would be implementing your own qt style natively and use that. This way you do get control over the actual drawing of the widgets and you can completely seperate logic and style. I do not dare that just yet tho hehe.

I generally find UI design quite an interesting topic, and i see it very often underestimated in many inhouse tools at many shops. RnD usually tends to focus on the functionality. This is probably typical for smaller shops that do not have a lot of RnD (and probably different in the game business, as there are few shops in the game business that lack RnD power i guess).

Kind Regards,
Thorsten

15

Hey!

I haven’t felt limited at all while working with stylesheets and everything I’ve ever wanted has been achievable. Qt provides a simple interface for us to work with and modify the native styles. Do you really need to create a native style with custom drawing? If yes then by all means do it. Don’t do it because it feels right, you just complicate things for little to no gain.

Subclassing a widget just to change its style seems weird to me, I would not go that route if I had to choose between one of the two you mention. UI look should be swapable without touching any code or chasing widgets in your implementation.

The proper way is to achieve your goal with minimum effort!

Not sure how maya, nuke, modo does it. I wonder if they implement native styles or just use stylesheets. I think I saw a .qss file somewhere before.

Regards!

16

Heya,

This is from the thread i got my colors from:

Nuke’s style is based on “Plastique” with some custom colours:
Palette: 50, 50, 50
Button: 80, 80, 80
Base: 100, 100, 100
Highlight: 247, 147, 30
Text: 200, 200, 200

So it seems to me they either tweaked the Palette only or based their own style on plastique. Don’t know tho as there is not more detail.

I would not go the own style route myself. And i am rather comfortable with plastique tweaked a little. I hardly see the need for really customizing a lot “locally” and usually get away with tweaking the global color scheme. The exception beeing specialized widgets. For example a layer widget in the layer manager that groups multiple widgets and has different visual style to some extent. But in that case i am subclassing the widget anyways.

How would you go about something like that using a stylesheet? You still would have to apply the stylesheet like a palette to that widget type, or is there another way?

Kind Regards,
Thorsten

Edit:

Another quick question that came to my mind. I remember that one of the main hassles i had with style sheets was that once i touched one of the properties i had to redo them all in the stylesheet. For example would it be possible to use the plastique style, and for a button only override the gradient or base color. I think i have not found a way to do so. So if i added a stylesheet to change the background color the rest of plastique was ignored and i also had to reconstruct the rest of the button’s look (the gradient, borders, text color etc. Is there a way around that?

17

Hey!

There are two ways that I know that you can achieve this!


// FIRST WAY
// access pushbutton that is child inside QFrame. QFrame can be swapped 
to your custom QLayerManager aswell
QPushButton QFrame
{
background-color: darkgray;
}


// SECOND WAY
// set object name in your custom ui and use selector syntax # in qss
self.uiLayerList.setObjectName("Awesome")

#Awesome
{
background-color: darkgray;
}

Regards!

18

I just gave this a try and either i am doing it wrong or we have a misunderstanding.

What i meant is that setting a single property destroys the whole rest of plastique. For example using the background-color i would like to create a red button. Applying background-color:red gets rid of the rest of the styling, no more rounded edges, no more gradient etc. So i have to recreate the gradient using 2 colors, the border, the highlight overlays etc. all manually. And if i need a green button elsewhere i have to change all of the colors and styling again (tho there is some copy paste).

Kind Regards,
Thorsten

19

Weren’t your question about editing a style of a subwidget inside your layermanager widget you wrote about? That’s what the snippet does, it doesn’t touch anything else except inside a specific widget that you wanted different style / look in.

On the other hand I didn’t see your edit, my answer was towards the first question: “How would you go about something like that using a stylesheet? You still would have to apply the stylesheet like a palette to that widget type, or is there another way?”

For the second question, I don’t know really if you can keep the style intact and just change a few properties. For me some widgets worked perfectly while others wouldn’t. I noticed that it’s best to edit the widgets in the begining of the inheritance chain, like if you want to change background color try to do it in QWidget and let it propagate down, this way you can keep plastique intact. Same goes for the abstract classes :slight_smile:

Regards!

20

I see, and sorry for the edit. That was kinda stupid heh. Anyways i will try and come up with a new version that is supposed to also handle different ColorGroups. After looking into it a little i am rather surprised how well Plastique Handles different ColorGroups than the normal one (ColorGroups represent Active, Inactive, Disabled and Normal states of widgets). So it seems there is some default deriving of the other Groups even tho i set the normal role to custom colors. odd. Anyways. I definitely need to fix loading, saving and storing of the colors as well as restructure and clean things up a little. Next up i will think about how to better support widget type specific and widget specific cases. I think there is too much automagic happening right now that might lead to unwanted results.

Kind Regards and thanks a lot for all the information,
Thorsten