Full Menubar Alignment Tutorial

里挖耳朵

The first thing is to open up the xml file called "global panels" in the panels folder that is next to your graphics folder in the directory of your skin. This is the XML file that the alignment for all of the panels is controlled in. Scroll down slightly to where you can see a label containing

-----------------
"Menubar Panel"
-----------------

and just below that you can see a line of script saying

<widget kind="cmmp" id="menu">

it is important to notice the id of the Menubar panel being "menu" because this is referenced to later on when aligning other panels. The next line of code is an important one:

<layout kind="stks" algn="left,top,bottom" inse="-1"/>

The section of the above line that is most important is:

algn="left,top,bottom" inse"-1"

To break this line down:

algn = alignment

"left,top,bottom" = aligns the menubar to the left of the screen and then stretches it out to the top and bottom to fill the screen. This is where those middle sections of the graphics are used. The tops and bottoms of the menubar are lined up first then the gap is tiled with the middle section.

inse"-1" = this is the inset value. When set to a negative value the menubar is offset one pixel to the right along the x-axis according to the screen geometry.

The only thing that is necessary to change is the "left" to "right".

So now that the menu bar is set to the left, the other panels have to be aligned to it.

里挖耳朵

The next section is the title bar, look for:

------------------------------------------------
normal titlebar
------------------------------------------------

The first line of script that helps align the title bar is:

<layout kind="stko" targ="menu" gets="right" sets="left" offs="-4"/>

I'm afraid i cant tell you what "stko" means but its in one of ters tutorials above. The way that i understand this line is:

targ="menu" --- This panel targets the panel "menu" as the panel it is going to attach to. Remember that "menu" is the menubar above.

gets="right" --- This tells this panel to align itself with respect to the right side of the "menu" panel.

sets="left" --- This tells this panel to align the left side of itself to the menu bar.

offs="-4" -- This tells the panel that once it is aligned, to shift itself 4 pixels right. This can be altered if you wanted to blend the graphics of a panel into another panel to make it look like one piece.

To make this panel line up correctly you have to change the gets to left, the sets to right and change the offset to 4.

The next line:

<layout kind="stks" algn="top" inse="-9"/>

Now you tell the panel to align to the top of the screen using algn"top". This is used because at the moment effectively the panel could be anywhere up or down the screen.

inse="-9" is used to drop the panel down 9 pixels from the top of the screen.

The next line:

<layout kind="stks" algn="left"/>

This simply aligns the panel to the left.

I hope now u are able to align the other panels in this XML file as they are supposed to be.