Graphical User Interface playaround

[thesquirell]

Hey there guys,

I was just wondering what would be the procedure to edit GUI of Indigo Standalone? Would like to test out few of designs of my own, just to see how it looks, maybe to give it some freshness. Just a simple colour scheme change, icons, things like that.

[Zom-B]

I did a icon Set once too: http://www.indigorenderer.com/forum/vie ... =7&t=11557

You also can edit more then just changing Icons, there was a thread about this here in the forum somewhere afaik. fused does know best!

[thesquirell]

Nice cons, Zom-B! I am already loving it, and they are giving me some inspiration! Fist thing I wanna change: Blue gradient on buttons, drop-down menus, white background in the scene explorer. Need someone who can explain us how!

[Tramis]

Just go to Indigo program directory > C:\Program Files\Indigo Renderer\config\themes

Make a folder "MyAwesomeSkinTroLololol" copy the existing css file from other themes and there you go!

If you understand css it should be easy. But remember you won't be able to change theme completely (I mean layout and etc) only the visual looks (colors, padding etc).

Have fun.

PS. I'll share my theme when I finish. I'm trying to make dark theme better, cause the default dark theme doesn't look good to me

[thesquirell]

And just for that, I am going to name it ""MyAwesomeSkinTroLololol"! xD
I hear you, that blue gradient on buttons is just killing me...softly.

[thesquirell]

So, I was playing around a little bit with the dark theme, modding it to some extent, and I hit the brick wall of naming QWidgets, so if anyone could help me, I would be so grateful! Here are some attached images showing the look I achieved and wanting to achieve throughout (pic.1).

The pic.2 shows troublesome parts. The white parts need to be changed, and the selection in the list, as well as the background of the filter box should be transparent, or same as the background colour. I already know that code for those white parts goes something like : "QWidget#nameofthewidget {}, but I just can't figure their names out.

Oh, and I would be thrilled to use white icons, but then there is no difference in greyed out ones, and the available ones, could this be sorted out somehow?

Thank you in advance!


EDIT:

I got rid of the white color by adding "QWidget { background-color: rgb(60,60,60);} in most areas, now all I need is the background of text input box (QLineEdit not affecting filter input box, diffuse transmitter medium box, specular medium box), and few more. When adding that line, some overlapping occurred as shown in this pic:

. This was fixed by adding 10px padding from the top to the "CollapsableGroupBox". Now these questions remain:

[Oscar J]

That looks just great squirrel, make sure you give/sell it to the devs when you're done. Wouldn't hurt to give Indigo 4 a fresh new look. I think you could keep the search boxes, selections and those things in a lighter gray - the contrast will make the options stand out more and increase the usability.

Wouod this be compatible with Mac?

[thesquirell]

Thank you very much, Oscaj J! It would be my pleasure to give it to the devs, and community, free of charge of course! To be honest, I have no idea about Mac, but my guess is that those lines of code are perhaps universal, and that they can be applied on multiple platforms (Windows, Linux, Mac). I could give you theme.css file for you to try it out, if you wish!


Also, big thanks to Zom-B, for icons!

ADDITION:

Much better way of changing the white background of property window, render setting, etc. is through "QScrollArea QWidget {}, because it let's us customize other widgets even more, where QWidget {} changes all of the widgets, without the possibility to customize them further.

[thesquirell]

So, this is where I stop, and hand over the theme to our community here, so they can further improve it, because my lack of knowledge prevents me in doing anything more. I would love to see texture editor done, as well as all those remarks made in the previous pictures. Have fun!

[Oscar J]

Looks great, except for that the top panel looks funky on Mac. You don't happen to know which parameter to change in the theme.css file to get the normal colour back on those buttons? That would look better, me thinks.

[thesquirell]

Screenshot it, so we can see!

Try changing in this line [mac="false"] to [mac="true"], don't know if that's what it does. For the white border one, QMainFrame determines the colour, can't figure out how to specifically target him. Scratch that, mac=fasle/true does something with white border line, etc., dunno what exactly. Sorry, the first time I ever opened a css was two days ago! xD But your background colour should be in this code, too:

QToolBar[mac="false"] {
background-color: rgb(65, 65, 65);
border-bottom: 16px solid rgb(60, 60, 60);
}

[Oscar J]

Sorry, forgot to attach the screenshot. Here it is:

[thesquirell]

Here, I mixed somethig up, try this out now. You could also change this line:
QToolBar::separator {
background-color: rgb(250, 0, 0, 20);
}
to:
QToolBar::separator {
background-color: transparent;
}
See how that looks.

[Oscar J]

Excellent squirrel, that's much better.

[thesquirell]

add this line at the bottom:

QToolButton:disabled {
background-color: transparent;
color: rgb(210,210,210);
}

it will fix your button's background when disabled, so it gets transparent, and the font color will change to light white (210,210,210). If you wish something lighter you can go to (230,230,230).