Page 1 of 2

Graphical User Interface playaround

Posted: Wed Jun 17, 2015 2:20 pm
by 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. :D Just a simple colour scheme change, icons, things like that.

Re: Graphical User Interface playaround

Posted: Wed Jun 17, 2015 6:45 pm
by 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!

Re: Graphical User Interface playaround

Posted: Wed Jun 17, 2015 11:28 pm
by 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! :D

Re: Graphical User Interface playaround

Posted: Thu Jun 18, 2015 1:03 am
by 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 :)

Re: Graphical User Interface playaround

Posted: Thu Jun 18, 2015 2:25 am
by 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.

Re: Graphical User Interface playaround

Posted: Fri Jun 19, 2015 11:44 am
by 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).
goal.jpg
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.
GUI questions.jpg
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:
overlap.jpg
. This was fixed by adding 10px padding from the top to the "CollapsableGroupBox". Now these questions remain:
NewQuestions.jpg

Re: Graphical User Interface playaround

Posted: Fri Jun 19, 2015 9:20 pm
by 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?

Re: Graphical User Interface playaround

Posted: Fri Jun 19, 2015 9:56 pm
by 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! :D

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.

Re: Graphical User Interface playaround

Posted: Sat Jun 20, 2015 2:07 pm
by 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!

Re: Graphical User Interface playaround

Posted: Sat Jun 20, 2015 11:20 pm
by 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.

Re: Graphical User Interface playaround

Posted: Sun Jun 21, 2015 12:15 am
by thesquirell
Screenshot it, so we can see! :D

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);
}

Re: Graphical User Interface playaround

Posted: Sun Jun 21, 2015 3:00 am
by Oscar J
Sorry, forgot to attach the screenshot. Here it is:

Re: Graphical User Interface playaround

Posted: Sun Jun 21, 2015 3:24 am
by 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.

Re: Graphical User Interface playaround

Posted: Sun Jun 21, 2015 3:30 am
by Oscar J
Excellent squirrel, that's much better. :)

Re: Graphical User Interface playaround

Posted: Sun Jun 21, 2015 3:37 am
by 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).