Graphical User Interface playaround
- thesquirell
- Posts: 428
- Joined: Fri Aug 29, 2014 3:49 am
- Location: Novi Sad, Serbia
Graphical User Interface playaround
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.
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.
Re: Graphical User Interface playaround
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!
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
- thesquirell
- Posts: 428
- Joined: Fri Aug 29, 2014 3:49 am
- Location: Novi Sad, Serbia
Re: Graphical User Interface playaround
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!
Re: Graphical User Interface playaround
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
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
- Posts: 428
- Joined: Fri Aug 29, 2014 3:49 am
- Location: Novi Sad, Serbia
Re: Graphical User Interface playaround
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.
I hear you, that blue gradient on buttons is just killing me...softly.
- thesquirell
- Posts: 428
- Joined: Fri Aug 29, 2014 3:49 am
- Location: Novi Sad, Serbia
Re: Graphical User Interface playaround
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:
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
- Posts: 2204
- Joined: Sat Mar 31, 2012 3:47 am
- Location: Gothenburg, Sweden
- 3D Software: Blender
Re: Graphical User Interface playaround
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?
Wouod this be compatible with Mac?
- thesquirell
- Posts: 428
- Joined: Fri Aug 29, 2014 3:49 am
- Location: Novi Sad, Serbia
Re: Graphical User Interface playaround
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.
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
- Posts: 428
- Joined: Fri Aug 29, 2014 3:49 am
- Location: Novi Sad, Serbia
Re: Graphical User Interface playaround
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 202 times
- Oscar J
- Posts: 2204
- Joined: Sat Mar 31, 2012 3:47 am
- Location: Gothenburg, Sweden
- 3D Software: Blender
Re: Graphical User Interface playaround
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
- Posts: 428
- Joined: Fri Aug 29, 2014 3:49 am
- Location: Novi Sad, Serbia
Re: Graphical User Interface playaround
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);
}
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
- Posts: 2204
- Joined: Sat Mar 31, 2012 3:47 am
- Location: Gothenburg, Sweden
- 3D Software: Blender
Re: Graphical User Interface playaround
Sorry, forgot to attach the screenshot. Here it is:
- thesquirell
- Posts: 428
- Joined: Fri Aug 29, 2014 3:49 am
- Location: Novi Sad, Serbia
Re: Graphical User Interface playaround
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.
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 222 times
- thesquirell
- Posts: 428
- Joined: Fri Aug 29, 2014 3:49 am
- Location: Novi Sad, Serbia
Re: Graphical User Interface playaround
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).
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).
Who is online
Users browsing this forum: No registered users and 37 guests