Hi,Everyone.I'm Yosuke Suzuki.
This is my first time to ask question at this forum.
May I ask you something about custom UI?
This time I want to make my UI better.I want separate palette.
I tried to understand how to change side panel layout.
but I'm just a concept artist so it was so hard to understand for me...

So if you have any idea how to change layout like image ''ui_01.jpg'' to ''ui_02.jpg'' I'm sorry to bother you, but could you tell me a clue or an answer?
Thank you.
Yosuke Suzuki

hi YOYO426,
I do not believe it's possible to have all 'SidePane' tags open at once.
For that you have the 'Ext.scripts' button at the bottom

Hi Yosuke, welcome to the forum!

It is possible to modify the UI to separate the palettes like you're describing, but it requires editing the HTML code that defines the structure of the UI. This is done by editing the text file named SidePane.htm which is in the \ui sub-folder.

There are some descriptions on how to do this in these previous posts:

http://moi3d.com/forum/index.php?webtag=MOI&msg=7068.3
http://moi3d.com/forum/index.php?webtag=MOI&msg=8064.1

And see these posts for some attached already edited SidePane.htm files, make sure to back up your existing SidePane.htm before trying these ones, I'm not exactly sure which program versions they are for:

http://moi3d.com/forum/index.php?webtag=MOI&msg=6968.1
http://moi3d.com/forum/index.php?webtag=MOI&msg=6278.1
http://moi3d.com/forum/index.php?webtag=MOI&msg=8064.4

- Michael

Yosuke,
Please post the code if you figure it out - I think that's a great idea!

Wondering - is there a snippet of code so you can drag an OBJECT into the STYLES folder DIRECT?
Cheers,
Ced

In Honduras:

Hi Ced,

re:
> Wondering - is there a snippet of code so you can drag an OBJECT
> into the STYLES folder DIRECT?

Sorry no, there isn't any way for a script to respond to drag/drop like that.

But with your objects selected you can click on the color swatch in the Styles section of the scene browser to assign the style.

- Michael

Hi,all.I'm sorry to send you reply late.
Thank you for feedback everyone!
I used SidePane.htm from '' http://moi3d.com/forum/index.php?webtag=MOI&msg=6278.1 ''
And it was that I need.Now I could make ideal work space!

@MAYSKY
Thank you for your reply!
I tried to understand how to custom layout.It's so difficult...
I'll keep going.Thank you.

@Michael Gibson
Hi Michael.Thank you so much for your reply.
It makes my work space perfect!
I tried to understand and it makes little bit clear!

@Ced (FRACTIONALIST)
Hi Ced, Michael told me where I can find what I need.
If you want make your side panel like my space,You can find SidePane.htm at this forum ''http://moi3d.com/forum/index.php?webtag=MOI&msg=6278.1 ''
Now I can't make this kind of great works but I'll keep studying this kind of stuffs!

Guys - I tried the UI transformation code, however, and it wiped-out my current beautiful user interface - it transformed into a deathly pasta color. The idea of FOLDERS is ingenious, nevertheless, how would one go about EDITING the SidePane.html in order to arrive at this SIMPLE folder layout - without affecting (it was a complete disaster) the entire UI's appearance?

See illustration (below) of my current interface, and the wished-for interface. I really like the SIMPLE easy-on-your-eyes eloquent layout, with black & grey.
Cheers,
Lambert Marmaduke

Hi Ced,

re:
> how would one go about EDITING the SidePane.html in order to arrive at this SIMPLE folder layout - without
> affecting (it was a complete disaster) the entire UI's appearance?

The SidePane.htm file contains HTML and CSS code, using custom controls specific to MoI which are styled by entries in the moi.css file. Since you're looking for something different than the standard MoI setup, you'd need to replace the standard MoI HTML with your own HTML that is set up the way you want it. There are a lot of tutorials online about how to write HTML.

I'm sorry but I just do not have enough time available to do the work myself to make customized interfaces for one person, that's something that you would need to work on yourself.

- Michael

Alright - I know HTML and I can write that - no problem - now that I know WHAT & HOW TO change the interface.

This is the best mod GUI ever -
Cheers & thank you!
Ced

Alright - that worked!~
However - I don't like the 'eyebags' shadows under the buttons - and the font is wimpy -

1. Where do I change the 'button' behind the font & remove the '5 O'clock shadow?' (Can't find the property to change)

2. Where do I change the font style? (the CSS font style isn't apparent in DreamWeaver Properties)

The current buttons look unattractive IMO - and I don't like the label names either - instead of 'draw' curves, how about 'curves' only, and placed in this order, which appears more sensible to me... if I can find these controls (I spent 1/2 day looking for them in 88 html, js & css files) I'm good!

I'm very close to having a really pleasant work environment -

Hi Ced,

> 1. Where do I change the 'button' behind the font & remove the
> '5 O'clock shadow?' (Can't find the property to change)

You need to look in the SidePane.htm file in a text editor to see how it's structured.

The palettes are made up of 2 pieces, there's a <moi:PaletteHeader> that is the part that holds the tab buttons, and a <moi:PaletteBody> that holds the content of the tab. The buttons themselves are <moi:TabButton> elements inside the header.


> 2. Where do I change the font style? (the CSS font style isn't apparent in DreamWeaver Properties)

The main font is set on the body by the UI engine from a value which can be set in moi.ini, under [UI] UIFontName=

I really don't recommend making all these types of changes though, it will make things difficult for you once the V4 betas start up and there are new releases, you will need to reapply all your changes with every beta release.

- Michael

Michael -

Thank you for the 50 dollar tip - it worked.

I prefer the names on the labels as well as the order - just not the DROP SHADOWS!

How the heck do you get them out? I tried everything (I can write CSS & HTML - however - no luck).





Cheers,
Mortimer

Hi Ced, they aren't drop shadows, they are the <moi:PaletteBody> elements that contain the command buttons. When the palette is not active, the content is hidden and the <moi:PaletteBody> will be small. Basically it's the same thing with border and background that you see when you activate a palette, when a tab is activated the content inside the <moi:PaletteBody> is displayed and then the "drop shadow" grows larger.

If you want to get rid of those you'll need to modify the script code that handles clicking on a palette tab, it's the function HandleTabChange() inside the SidePaneTabs.js file.

- Michael

Hi Ced, now I remembered that the top part of the border is in the <moi:PaletteHeader> element and then the rest is in the <moi:PaletteBody> .

If you want to remove those, go to moi.css and find the style rules for moi\:PaletteHeader > .PaletteHeaderBackground and moi\:PaletteBody and remove the background-color and border attributes for those 2 things and then there won't be any borders for those things.

- Michael

Ha-ha~!

DISCLAIMER: If you're prone to panic attacks, dizziness, flatulence or have low self-esteem - please read at your own risk and/or seek medical advice:

BEGIN POST
Ladies & gentlemen, and thank you Michael - introducing sick software accompanied by the most lame GUI - gotta love it~

BEAUTIFUL~!



Cheers,
Mamadou Amado

Nice geometric perspective of the right menu!

Frenchy,
See? Only a cultured Frenchman has the capacity to appreciate true narcissist work!



Beauty~

At last~! The Moi3d GUI is now - PERFECT in all its glory:

Nevertheless - would like an OPTION CHECKBOX where, if I choose, the folders will ALL REMAIN OPEN instead of 'one-at-a-time' -

Yosuke, you may like to add TOOL TIPS to your command menu -