h1,h2,h3 { font-family: verdana; text-decoration: none; padding: none; font-weight: lighter; border-bottom: none; color: royalblue; } h1 { font-size: 22px; letter-spacing: 5px; margin-bottom: 3 px; } h2 { font-size: 18px; letter-spacing: 2px; margin-bottom: 3 px; } h3 { font-size: 15px; letter-spacing: 1px; margin-bottom: 2px; } body { color: black; font-family: arial; font-size: 15px; background-color: white;} #leftie { position: absolute; top: 5%; left: 10%; width: 540px; } .leftiey { width: 550px; height: auto; text-align: left; border: 3px solid cloudblue; padding: 0px 3px 3px 3px; background-color: white; } #rightie { position: absolute; top: 0%; left: 120%; width: 200px; } .rightiey { width: 200px; height: auto; text-align: left; border: 3px solid cloudblue; padding: 0px 2px 2px 2px; background-color: white; } a:link, a:visited, a:active { color: lightblue; font-family: verdana; text-decoration: none; } a:hover { color: blue; } b { font: 11px tahoma; font-weight: bold; color: lightblue; } i { font: 11px tahoma; color: lightblue; font-style: italic; } u { font: 11px tahoma; color: lightblue; font-style: italic; } .clr {clear:both;} />

A do-it-yourself layout helper!

Just so you know, this works only in the guild, not userlookup, shop, or anywhere else, ONLY THE GUILD!

Step one, pick an image!

First, you need to pick an image for the background, or you can make your own one. You can resize an image, we will get to that later, so you don't have to worry about if your image is big/small enough. Heres an example of a background image:

And this is an example of a background you can make(This one is pretty plain, but you can add designs, you can make it by copying and pasting pictures):

Remember you can resize an image so you dont have to worry how big/small it is :-)
To upload an image, all you have to do is pick a image hosting website. I would recommend this site!

Step 2, make a blog in the background!

Now that you have your background, this is how you resize it(I recommend the width and the height around 600px):

After you resize it, put it in a random place, and right-click the image and save, so its the same thing, just bigger and more pixel-sized.
Then you have to make a blog on the bigger background(Im not using the bigger background, Im using the small one, but you have to use the bigger background), like this:
Im doing in MS Paint, I will have another tutorial on how to use it with gimp later :-)

Step 3, Coding!

I know this is the hardest part for you, so Ill just give you the code. I'll give you one code for normal, and one code for full page, its a normal full page, not the fancy like kind :)

Its not as easy though. You have to keep guessing the height of your blog, and the width after you determine the exact spot of where it is. So where it sais left, the higher it is- it moves right, right moves left, top moves down, you get it. If you dont keep experimenting, you'll understand. Code for normal:

This is how the final layout will possibly look:

TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!TEXT HERE!!

Awards

I do accept awards, I only made the tutorial on Febuary 23-09, so I would love to have some early awards!



NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions