Graphical User Interface playaround

General questions about Indigo, the scene format, rendering etc...
User avatar
thesquirell
Posts: 382
Joined: Fri Aug 29, 2014 3:49 am
Location: Novi Sad, Serbia

Graphical User Interface playaround

Post by thesquirell » Wed Jun 17, 2015 2:20 pm

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.

User avatar
Zom-B
1st Place 100
Posts: 4641
Joined: Tue Jul 04, 2006 4:18 pm
Location: ´'`\_(ò_Ó)_/´'`
Contact:

Re: Graphical User Interface playaround

Post by Zom-B » Wed Jun 17, 2015 6:45 pm

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!
polygonmanufaktur.de

User avatar
thesquirell
Posts: 382
Joined: Fri Aug 29, 2014 3:49 am
Location: Novi Sad, Serbia

Re: Graphical User Interface playaround

Post by thesquirell » Wed Jun 17, 2015 11:28 pm

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

User avatar
Tramis
Posts: 64
Joined: Fri Aug 08, 2014 11:52 am

Re: Graphical User Interface playaround

Post by Tramis » Thu Jun 18, 2015 1:03 am

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 :)

User avatar
thesquirell
Posts: 382
Joined: Fri Aug 29, 2014 3:49 am
Location: Novi Sad, Serbia

Re: Graphical User Interface playaround

Post by thesquirell » Thu Jun 18, 2015 2:25 am

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.

User avatar
thesquirell
Posts: 382
Joined: Fri Aug 29, 2014 3:49 am
Location: Novi Sad, Serbia

Re: Graphical User Interface playaround

Post by thesquirell » Fri Jun 19, 2015 11:44 am

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

User avatar
Oscar J
1st Place Winner
Posts: 2169
Joined: Sat Mar 31, 2012 3:47 am
Location: Gothenburg, Sweden
3D Software: Blender

Re: Graphical User Interface playaround

Post by Oscar J » Fri Jun 19, 2015 9:20 pm

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?

User avatar
thesquirell
Posts: 382
Joined: Fri Aug 29, 2014 3:49 am
Location: Novi Sad, Serbia

Re: Graphical User Interface playaround

Post by thesquirell » Fri Jun 19, 2015 9:56 pm

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.

User avatar
thesquirell
Posts: 382
Joined: Fri Aug 29, 2014 3:49 am
Location: Novi Sad, Serbia

Re: Graphical User Interface playaround

Post by thesquirell » Sat Jun 20, 2015 2:07 pm

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!
Attachments
MarsalaTheme.rar
(316.15 KiB) Downloaded 103 times

User avatar
Oscar J
1st Place Winner
Posts: 2169
Joined: Sat Mar 31, 2012 3:47 am
Location: Gothenburg, Sweden
3D Software: Blender

Re: Graphical User Interface playaround

Post by Oscar J » Sat Jun 20, 2015 11:20 pm

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.

User avatar
thesquirell
Posts: 382
Joined: Fri Aug 29, 2014 3:49 am
Location: Novi Sad, Serbia

Re: Graphical User Interface playaround

Post by thesquirell » Sun Jun 21, 2015 12:15 am

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

User avatar
Oscar J
1st Place Winner
Posts: 2169
Joined: Sat Mar 31, 2012 3:47 am
Location: Gothenburg, Sweden
3D Software: Blender

Re: Graphical User Interface playaround

Post by Oscar J » Sun Jun 21, 2015 3:00 am

Sorry, forgot to attach the screenshot. Here it is:
Attachments
Screen Shot 2015-06-20 at 13.12.38.jpg

User avatar
thesquirell
Posts: 382
Joined: Fri Aug 29, 2014 3:49 am
Location: Novi Sad, Serbia

Re: Graphical User Interface playaround

Post by thesquirell » Sun Jun 21, 2015 3:24 am

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.
Attachments
theme.rar
(3.16 KiB) Downloaded 109 times

User avatar
Oscar J
1st Place Winner
Posts: 2169
Joined: Sat Mar 31, 2012 3:47 am
Location: Gothenburg, Sweden
3D Software: Blender

Re: Graphical User Interface playaround

Post by Oscar J » Sun Jun 21, 2015 3:30 am

Excellent squirrel, that's much better. :)
Attachments
Screen Shot 2015-06-20 at 17.29.24.jpg

User avatar
thesquirell
Posts: 382
Joined: Fri Aug 29, 2014 3:49 am
Location: Novi Sad, Serbia

Re: Graphical User Interface playaround

Post by thesquirell » Sun Jun 21, 2015 3:37 am

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

Post Reply
30 posts

Who is online

Users browsing this forum: No registered users and 1 guest