Full Version: Dark Gray Theme

Show messages:  1-20  21-40  41-60  61-62

I just wanted to first say that MoI has been an absolute pleasure to use. The blend of simplicity and utility is unrivaled. I also really appreciate all the extra effort by the community. The custom commands have been invaluable to me. With that said, this is my Dark Gray Theme to share with the community here.

I've included some examples of the interface in action for those that might be curious. It's really easy to install and instructions are included in the ZIP file. I've also included an Inkscape SVG file with all the icons. Each icon is very close to the original style, so everything feels familiar.





And here's a screenshot of the Dark Gray Theme for the Beta 4.0 (Oct. 17, 2018) release. This version of the theme seems to be working properly, but I have not tested it as extensively as the 3.0 version. It also features more custom icons and an updated SVG file for those that want to change the icons further.



And finally, here's a cropped screenshot to illustrate how the Max Smirnov's Custom UI 2.0 beta 2 mod works with the optional Dark Gray Theme Custom UI Bar add-on for MoI 4.0 beta. You must install the Dark Gray Theme first, then install this add-on. With all the command buttons in the Max's default Custom UI installation, this Custom UI Bar add-on makes it much more manageable on the screen.



And... and now the Custom UI Bar add-on has been implemented for MoI 3.0 to work with Max's Custom UI 1.03 mod. Make sure you have the v1.1 Dark Gray Theme and Max's Custom UI mod installed first and then install the "Dark Gray Theme (MoI 3.0) - Custom UI Bar.zip" file. You can turn on all the buttons and add your own without interfering with MoI's native buttons.

If someone has any questions about further modifying this theme, feel free to post in this thread. I've done my best to fine-tune the interface throughout the application, but if I've missed something, let me know and I'll try to fix it in a timely manner.

Thank you so much, Michael, for making this amazing 3D modelling software and thanks to the community that supports it.

Attachments:
Dark Gray Theme (MoI 3.0) - Custom UI Bar.zip
Dark Gray Theme (MoI 3.0) v1.1.zip
Dark Gray Theme (MoI 4.0 beta) - Custom UI Bar.zip
Dark Gray Theme (MoI 4.0 beta) v1.1.1.zip

Image Attachments:
beta4-screenshot.png  commands+inspector.gif  custom-ui-add-on.png  screenshot.png  snap+flyouts.gif 

---

Thanks for sharing your work Cody!

- Michael

---

This looks super polished and very easy on the eyes. And the icons are beautiful!

I wish there was a version for the current beta :<

---

I've updated the original post with a screenshot and ZIP file for the MoI beta 4.0 (Oct. 17, 2018) release.

There were a few tricky things to figure out, but I believe the user interface should be good to go. I tested it briefly on Windows 8. It also features more new icons than before and an updated Inkscape SVG file.

Enjoy!

---

Hi Cody!

Thank you so much for all your hard work and for the v4 beta implementation! It looks so sleek! :)

I am using Smirnov's custom UI and I am having multiple script errors at launch. Just for the sake of feedback and testing!

---

Thank you for sharing this!! It looks like a charm and works like a charm. Really nicely made!

Cheers,

Axel

---

Hey, nameless. I installed Max's CustomUI.2.0.beta2.zip file on a clean install of MoI 4.0 beta. The buttons showed up, but I did get script errors. I then installed some required scripts from separate downloads (there's a lot to track down) and the errors went away. I then installed the Dark Gray Theme and nothing changed. Missing scripts produced errors and installed scripts worked fine. Here's a screenshot of the "Subdiv / Bridge / Split / Scale" scripts installed, but I omitted the "ImpObj" and it produced an error.



I don't think the Dark Gray Theme is interfering with anything, as far as I can tell. If you remove the Dark Gray Theme and the errors go away, give me a specific example.

----------

Axel, you're welcome. I'm glad you like it. I'll tinker with it further as time goes on and keep sharing.

I just prefer a clean, subtle, dark interface to my programs and want the content that I'm creating to stand out and be the focus of my attention.

Image Attachments:
beta4-custom-ui.gif 

---

You are absolutely correct. I copied my installation and run Moi without the startup contents of the AppData folder and it run fine with your theme. I then added startup and it run fine again.

I had all the scripts to begin with, I am not sure what happened in my previous run. The errors I got were before the program even launched and then got me into a black screen. But everything seems to be working fine now. Congrats.

The only minor problem I have is that the icons on the bottom bar reserve too much width and I end up seeing very few of them. I am not sure why this happens. I normally do not have a scroll bar at the bottom, I get to see everything.

Image Attachments:
Dark.jpg 

---

Hey, nameless. Thanks for the feedback. Glad you got the script problem figured out.

I don't use the Custom UI much, but I've changed the "moi.css" file back to the default spacer styles that control the gap between icons. Everything should be peachy again. ;-) You only have to overwrite the "moi.css" file, if you want.

When I first started changing MoI, I didn't know what anything was and it had been a over a decade since I last did any serious HTML/CSS/JS stuff. When MoI 4.0 makes it's official release, I'll be doing a clean up of everything and making sure my changes are minimal to the code.

----------

That said, I've updated the top post with the new v1.1 Dark Gray Themes for both MoI 3.0 and 4.0 beta. This change fixes the spacing problems experienced with Max Smirnov's Custom UI. And it updates the installation instructions for the beta version, in that it removes any mention of installing the Custom UI. I understand how Michael made it work automatically now. He's a smart cookie. I takes me a while to catch on.

And, of course, feel free to comment on any issues or concerns with this theme and I'll do my best to address them.

-- Cody

---

Yay! Thanks for the update! It looks amazing.

What was the parameter you reverted to normal in moi.css? I was curious!

Also, now that you are a moi customization veteran, do you know if I could ditch the help button from my personal setup? (of course it's a must have for your release!!! I am just in the mood for destruction now ^^)

---

((( in case anybody else is reading this, these tips pertain to MoI 4.0 beta (October 17, 2018) with Max Smirnov's Custom UI 2.0 beta 2 )))

Hey nameless,

In the "ui" folder, you'll find the "CommandBar.htm" file. Open it up and scroll down to near the bottom (line 174-ish). You'll find a line of code that looks like...

<moi:CommandSplitButton icon="icons/HelpIcon.png" menu="HelpMenu.htm" onclick="moi.launchHelp();"><moi:Text textid="Help"></moi:CommandSplitButton>

I don't recommend removing any code if you don't have to. Simply add HTML comment tags around it.

<!-- <moi:CommandSplitButton icon="icons/HelpIcon.png" menu="HelpMenu.htm" onclick="moi.launchHelp();"><moi:Text textid="Help"></moi:CommandSplitButton> -->

This should hide the button and keep the code still available for future consideration.

There are spacers used through out the Custom UI that control the gaps between icons. If you want to tighten up the buttons further or make them looked more grouped, you can open up the "startup" folder, for example, and open the "05 Select Buttons.js" file. Again, you can modify the code to remove or add extra spacers...

var html='<moi:Spacer>'; can become var html='<!-- <moi:Spacer> -->';

...and that removes the first spacer from the Custom UI and will tuck the first "Sel all" button a little closer to the 3 "snap" buttons. You could comment out all the spacers in that file to tighten up everything even more. Like, how the "undo" and "redo" button have no gap between them. This would allow you to increase the UI size further in the Options window in MoI.

You can also alter the "moi.css" file around line 986 and change the width of the spacer, but I wouldn't recommend doing that as these spacers are used in other places, I believe. There are tricks to targeting specific spacers in the bottom command bar, but it's not worth it, I feel (these were the parameters that I had changed before and then reverted back to the default values). Instead I would use a combination of altering the "CommandBar.htm" file and the JS files in the "startup" folder with commenting out (basically removing) spacer tags and adding combinations of <moi:Spacer> at 0.5 units wide and it's little buddy <moi:SmallSpacer> at 0.2 units wide as declared in the CSS file. These units are relative to the UI Size set in the Options window.

My mind reading abilities tell me that you might be interested in removing the clock I added to the right of the "Options" button. I commented out 3 lines of code to disable the clock and attached the file. You'll have to comment out the help button yourself though.

----------

I didn't realize how busy the Custom UI can get. Because I've already edited the "CommandBar.htm" file in my theme, I might as well carry on. I'll look into making the Custom UI appear nicely below the regular buttons at the very bottom. They'll have their own dedicated bar that won't interfere with the default buttons. I'm pretty busy this week, but It's on my radar. This is what I enjoy doing, by the way. I've always loved web application design.

I think I've melted my own brain now. ;-)

-- Cody

Attachments:
Clock Disabled.zip

---

Well, sir you are a rockstar. I am sure people will find this information very helpful. I really appreciate the time to give such a thorough reply... Brain melted but mind reading abilities, on point...

Respect!!!

---

Thanks to nameless for bringing Max Smirnov's Custom UI to my full attention. I've created a Dark Gray Theme optional add-on. Now Max's Custom UI will appear in it's own horizontally scrolling bar at the very bottom of the MoI 4.0 beta application. No more scrolling back and forth between MoI's default command buttons and the Custom UI buttons.

Here's a picture to show what I'm describing.



To install this add-on, please install the "Dark Gray Theme (MoI 4.0 beta) v1.1.zip" first and then the "Dark Gray Theme (MoI 4.0 beta) - Custom UI Bar.zip".

For those with a bit more technical knowledge, I've briefly described the process in the installation text file to achieve this result with any other theme or even the default MoI 4.0 beta installation.

Enjoy!

---

This is great stuff. Now one can set icons at optimal size without losing anything other than a little vertical real estate, which is totally acceptable. And it's much easier to see snaps and view toggles, with them being more separated. Even in smaller monitors you have more access.

It really shows that you love UI design Cody :)

---

Very nice! Thanks for all of your work.

---

Thanks, nameless and shane. I do appreciate the encouragement and it's always good to get feedback.

----------

I just wanted to let everyone know that I've now included a Custom UI Bar add-on for the MoI 3.0 version of the Dark Gray Theme. You'll find it in the first post of this thread. You must have the full v1.1 theme installed first as well as Max Smirnov's Custom UI 1.03 mod. This add-on requires both.

If you don't have the need for a lot of extra command bar buttons, don't worry about this add-on. However, if you have to scroll your bottom command buttons horizontally back and forth or are holding back increasing the UI size in MoI to avoid scrolling, then this is the add-on for you. It works just like the MoI 4.0 beta add-on and the top post shows you how it's implemented in the last screenshot.

-- Cody

---

Maybe you will like my icons for your theme:

https://moi3d.com/forum/index.php?webtag=MOI&msg=9138.1

---

This looks so good (color scheme/icons...) that Michael should consider that dark Theme to be default for MOI v4 FINAL.

---

Those are really nice icons, van. Thanks for sharing the link. Very inspirational! I love UI design.

----------

Hey, Lewis3D. Thanks for the compliment, man.

This is what mods are all about; optional changes. Not everybody likes a dark theme. However, I am thinking about offering a light version too or a way to easily change the color scheme.

The funny thing about this Dark Gray theme is that it all sparked from my first day using MoI. When I was navigating the Construct/Transform and the Curve/Solid tabs, I didn't know which tab was the active tab. One was blue and the other was white. Consequently, the white one looked more "active" to me so I'd click on the blue one to switch, and then the whole pane would frustratingly collapse. It didn't take long before I had the entire application turned inside out. ;-)

----------

I just wanted to let people know that there is a very minor graphical fix to the MoI 4.0 Beta version of this theme. The browser tabs now have the same look as the 3.0 version of this theme. They look the way they are supposed to now. Feel free to download the new Dark Gray Theme (MoI 4.0 beta) v1.1.1.zip file at your leisure.

If you use the optional UI bar add-on for Max Smirnov's CustomUI, you'll need to re-apply the Dark Gray Theme (MoI 4.0 beta) - Custom UI Bar.zip file after the v1.1.1 installation.



Once MoI 4.0 is out of beta, I'll be releasing a final version. (This theme was originally built for MoI 3.0.)

Note: If you've changed the Dark Gray Theme yourself and are concerned with overwriting your changes with this patch, you can manually apply this fix by finding line #631 in the moi.css file...

border-left:1px solid #444 !important; border-right:1px solid #444 !important;

...!important overrides any conflicting styles declared throughout the application. If you find yourself wanting to change something, but nothing you do seems to be working properly, this is the best way to override all of Michael's hard work. ;-)

-- Cody

Image Attachments:
browser-tab-fix.png 

---

Very nice UI .... can you maybe add a kind of tooltips - like here tooltip.js
https://popper.js.org/tooltip-examples.html

would be nice, if on mousehoover you will see the shortcuts as a small tooltip/popup (like in Photoshop e.g.) - Or is this better a task for michael gibson? ;)

As default UI I would like see it also very much.

---

Show messages:  1-20  21-40  41-60  61-62