Hi,

It's been a while since last time I wrote in the forum (2007?) and even since last time I have used Moi. For different reasons I've never found the time to get into it and add it to my tool set. I've always liked the software and I've been looking for a chance to really use it, which could be now, so I've started testing it again. First thing I needed to do though was to tweak the UI, since it was too bright for me to be staring at it for too long, and also I thought that since modo is the main package I'm going to use it with it would be good to keep a kind of 'familiar' environment ;).

So I did a quick customization and I thought of sharing it just in case anybody else might enjoy it. They are not exactly the same colors (I eyeballed it), just in the same range. I don't know if something similar has been posted already, so I hope I'm not double posting.

Moi3d modo like UI

– Installation:
1.- Backup your ‘ui’ folder inside Moi3D installation folder
2.- Open Moi and go to 'Options'. From there, change the parameters specified in the ‘options.txt’ file included in the ZIP and then close Moi.
3.- Extract ‘ui’ folder content from the ZIP file inside your Moi’s installation ‘ui’ folder and overwrite existing ones
4.- Open Moi and you should see something like this:

That looks very cool. I doubt I will be using it myself but it looks great. Well done.

Nice work, jacobo!

At some point here for v3 I would like to make it a bit easier to tweak colors, I'll probably be trying to put all the different colors that are used in one color definition file so you would be able to edit just that file to make a new color scheme. But that's not set up yet though.

- Michael

That would be great! When I was doing this I was thinking about writing a tool to help customizing the UI, but then I read something in the forum about this going to change in v3. Having the color definition in one single file would be really helpful.

By the way, I wasn't able to find where to change Browser's button text and background color. Is it in the CSS file?

Thanks!

Hi jacobo,

> By the way, I wasn't able to find where to change Browser's
> button text and background color. Is it in the CSS file?

Are you talking about for v2 or v3 ?

In v3 it's in the CSS file, look for the section that starts with moi\:SceneBrowser, that's the outermost parent element of the scene browser, then the different sections use the .SceneBrowserSection css class and items within each section use the .SceneBrowserItem css class. So changing the various properties inside of that CSS will alter how the scene browser is displayed.

- Michael

Hey Michael,

I should have specified. I'm talking about v2. In v2 CSS file, this is what I have about the SceneBrowser, on which I've modified the colors:

moi\:SceneBrowser
{
behavior:url(#default#SceneBrowser);
padding:0.1em 0;
display:block;
text-align:left;
width:100%;
overflow-y:auto;
}

moi\:SceneBrowserItem
{
padding:0.15em 0;
display:block;
width:100%;
white-space:nowrap;
overflow:hidden;
highlightcolor:#FFFFFF;
noobjectscolor:#555555;
oddrowbackgroundcolor:#9098a0;
evenrowbackgroundcolor:#a0a8b0;
highlightrowbackgroundcolor:#384048;
}

.SceneBrowserSection
{
padding:0.28em 0;
margin:0.50em 0 0.2em 0;
backImagePadding:0em 0.55em;
}

.SceneBrowserContent
{
padding-left:1.5em;
}

What I couldn't find how to change was the actual button that displays the scene browser:



Thanks!!

Hi jacobo - for v2 the button that shows or hides the browser is in SidePaneFooter.htm - it's the <moi:ShowHideStateButton> element that's the only actual UI element in that particular file.

The button colors come from the images listed in the class there, they're: ShowHideStateButton_highlight.png and ShowHideStateButton_on.png , and the button's text color is inherited from the body so set a color: property on the body to adjust it regular text color, and the mouseover text color of blue comes from the color:blue part of the moi\:ShowHideStateButton css entry in that file.

This is all set up quite differently in v3, in v3 images are not used to draw these controls, instead it specifies things like border radius and gradient fill values in the CSS itself.

- Michael

Thanks a lot for your help Michael! Man, you probably hear this quite often, but it's very impressive and much appreciated the way you deal with users (and that other thing... what was it... oh, yes, develop the software).

Yeah, I've read in some other post that in v3 you weren't using images anymore for most parts of the UI including buttons. I think that's great (at least for me, that I like pretty simple shapes and a more '2D look' in the UI and I'm more concerned about the color) and it makes it easier to change color schemes.

Looking forward to being able to test v3!