Well, ladies and gentlemen, the tutorial you have all been waiting for is here! I've figured out some really useful things this morning in regards to moving around account lists (or anything else for that matter and I knew you'd love for me to share it with you.

Let's start off with the basics. This tutorial is written with the assumption that you have a general idea of how to use ResHacker to make a login screen. If not, please start off by reading this tutorial (it's four pages long ) to get accustomed on how to create login screens.

After you have done this, you will be asking yourself, "Well how do I move those account lists around?". That is what this tutorial will help you to learn.

The easiest and best thing to do here would be to start with a login that has the account lists already positioned where you would like them in your login!

This isn't mandatory and would defeat the purpose of this tutorial...I'm just letting you know off the top that you can save yourself a lot of headache time by just starting off with the account lists where you'd like them in your final login. I have made several logins with the accountlists positioned differently...feel free to use any of mine as a base for your login. If you want a challenge, however, read on....


What frame are you in?

The most important aspect of placing your account lists where you want them is what frame they are located in. There are 4 main frames....top, bottom, left and right. If your account lists are in the right frame you will not be able to make them show up on the left hand side of the screen.

You can find out what frame the account lists are in at the bottom of the UIFILE in the elements section. It will look like this:






Notice that the second line shows that we are in id=atom(rightpanel). This means that we are in the right-hand frame. Also notice that the account lists are inside of the scollbar. That is important so that if you have several account lists, the scrollbar will come into play (and also so that the scrollbar won't display if there aren't several accounts).

If you had to move this to the left frame, for example, you would want to move:





(just select this text and cut it right out of the right-panel) and place it as so within the left panel:


Notice how I moved the scrollviewer to include the rest of the left hand side of the screen? That is important...


This is the tricky part of moving account lists around. If you get the account lists to show up on the correct side of the screen (or the top or bottom as desired) then you have made the major hurdle and are ready to fine-tune the positioning..

FlowLayout

After much testing and tinkering, I've narrowed down the functionality of flowlayout quite a bit. First, this is how you use it in reference to the account lists:



Do you see the layout=flowlayout(#,#,#,#) line?
You will see this all over the element section, and the functionality is the same everywhere, however in this tutorial we are concentrating on how to move the account lists, so I will be talking about this specifically.

Flowlayout has 4 attributes...and here they are:

The first number	0= account list will display left to right (horizontally) 1= account list will display top to bottom (vertically)
The second number	0= the account list will show up at the top of the panel 1= the account lists will show up at the bottom of the panel 2= the account list will show up in the middle of the panel 3= the account list will be separated...1 will be near the top and 1 will be near the bottom
The third number	0 + 3= don't seem to do much 1 + 2= when you click an account, that account alone will move a few pixels to the left...when unclicked will position itself back properly
The fourth number	Doesn't seem to make any difference

Using this attribute properly you can drastically change how your account lists work. Most important is the first number...you can make the account lists display horizontal or vertical with this attribute. Also, a fun one (though impractical) is the second number...by using "3" for that number, you can have one account display at the top of the screen, and one display near the bottom (separated). This is really neat, but you should avoid using it for finished products due to the fact that some users have 3, 4, or even more accounts and this would cause them problems.

VerticalFlowLayout

This is essentially the same thing as flowlayout, except that you can only make account lists display vertically (makes sense, huh?) and the numbers have slightly different meanings...

Verticalflowlayout has 4 attributes...and here they are:

The first number	Doesn't seem to make much difference
The second number	0 + 3= don't seem to do much 1 + 2= when you click an account, your account list will move a few pixels to the left...when unclicked will position itself back properly
The third number	0 + 3= don't seem to do much 1 + 2= when you click an account, that account alone will move a few pixels to the left...when unclicked will position itself back properly
The fourth number	0= the account list will show up at the top of the panel 1= the account lists will show up at the bottom of the panel 2= the account list will show up in the middle of the panel 3= the account list will be separated...1 will be near the top and 1 will be near the bottom

NOTE: that fun little trick in separating the account lists works with verticalflowlayout as well, however when you click on an account to login the password panel will move down several lines. In other words, if you want to separate the account lists as discussed previously, use flowlayout rather than verticalflowlayout.

Padding

This is the best little trick I picked up on today that will help you to move your account lists around.

Padding works like so:



The "rp" stands for right position and is important (this doesn't work without those there). Also, there are NO spaces between the numbers!

To use padding, it formats like so:



What is meant by this, is that if you add a number to the padding in the associated position, this will move the account list that many pixels in that direction! This is VERY useful!!

For example, you want to move the account lists 50 pixels to the right and 100 pixels down, so you would add this:



to the account list line like so:



And it's that easy!! Now keep in mind, if you are all the way at the left hand side of the frame, you won't be able to "push" it over to the next frame merely using padding...however, you can easily move around within the frame you are in using this handy little trick.


I hope this will help you in your ventures making login screens for XP. I know it has for me...

Any questions or requests for help should be placed in this forum.