Dark Gray Theme

 From:  Cody (ECHOLOCATING)
9242.11 In reply to 9242.10 
((( 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: