Hi Michael and everyone,

I'm currently testing out a custom v5 beta theme using blender GUI style and using their icons as base design.
I have a couple of questions I've been trying to find the answers to and I hope this image I made, which is also a work in progress preview for critique, might clarify my curiosity.
So far I tweaked 90-95% of the visual and made custom icons when required but there are some tidbits that I am confused about.
I hope to release this theme for everyone after I'm finished.

I hope and thank you in advance for any help or tips I can receive.

PS: The blender icons are from: https://ui.blender.org/icons



Here's a typed list for clarity:
1. Is there a way to change the style / color / icon of the window top part?
2. Is there a way to change the style / color / icon of the horizontal & vertical scroll bars?
3. Which does the progress bar color affects the GUI? Can’t seem to find it.
4. Can these icons be compacted into a group icon with a dropdown list of aligns options?
5. Can these icons be changed? Can’t seem to find it anywhere.
6. Is there a way to change the size and font style?

Hi aphaits,

For the first 3:

> 1. Is there a way to change the style / color / icon of the window top part?

That part is drawn by the operating system, there isn't anything set up in MoI to customize it.


> 2. Is there a way to change the style / color / icon of the horizontal & vertical scroll bars?

Most of the scroll bar pieces will use the PushButton colors. But there are a couple of scrollbar areas that don't have a theme symbol set up for them, they can be adjusted in the theme's moi.css . If your theme was based off the regular dark theme, there should be scroll bar stuff in your theme's moi.css , look for:

::-webkit-scrollbar-corner {
background-color:#444;
}

::-webkit-scrollbar-track-piece {
background-color:#777;
}


> 3. Which does the progress bar color affects the GUI? Can’t seem to find it.

It's shown in the upper right area of the window when loading in a large file.

Try this - type Tab so that keyboard focus goes into the XYZ control in the bottom toolbar and then paste in this:

script: moi.ui.sidePane.document.body.insertAdjacentHTML( 'afterBegin', '<moi:ProgressBar id="progress_test">'); moi.ui.findElement( 'progress_test' ).value = 25;

That will insert a progress bar element at the top of the side pane so you can see it.

Other answers to follow in a bit...

- Michael

Thank you for the help, Michael!

The progress bar and scrollbar looks great now!

Hi aphaits, for #4:

> 4. Can these icons be compacted into a group icon with a dropdown list of aligns options?

It would be difficult to do that with the theme mechanism, but you can do it by modifying the script that is generating that UI.

If you go to your appdata startup folder, there should be a script there named "Align Buttons.js" which is what makes those align buttons.

If you replace it with the attached version, it will instead make one "Align" menu button which will show the 6 align types in a popup menu.


For #5:
> 5. Can these icons be changed? Can’t seem to find it anywhere.

These are from the CustomUI mod which consists of script files inside the appdata startup folder.

The icons are set up as embedded data inside the script file.

See here for how to change it so it will get the icon from a .png file instead:
https://moi3d.com/forum/index.php?webtag=MOI&msg=11577.2

- Michael

Hi aphaits, re #6:

> 6. Is there a way to change the size and font style?

Do you mean just for the Scene Browser or do you mean for everything?

If you want to make just the Scene Browser text a little bit smaller than the regular text size, put this into your theme's moi.css :

moi\:SceneBrowser {
font-size:80%;
}

- Michael

perfect! the scene browser text is a bit too big sometimes when you have long titles for some objects names
The 80% setting you setup is great!

The align foldering works great!

one thing though, the spacing between the align button and the rest of the buttons seems oddly close

Hi aphaits,

re:
> one thing though, the spacing between the align button and the rest of the buttons seems oddly close

I've updated it so it puts in a spacer before the align button, please re-download it and see if it's better now.

- Michael

Perfect!

The icon replacement works like a charm!



Doing some final minor tweaks and I will upload the theme here when tweaks are done.

Thank you again Michael for the helpful directions!

Alright, been using this for a couple days and also had some nice holiday. So far no problems and emulates blender's look quite well.

Here's the theme files, try it out and let me know which parts is buggy or looks wrong. Enjoy!



PS: Additional icons are in another zip for several scripts and plugins not included in basic Moi 3D install.