How to Make a Neopets Guild Layout

Neopets is a free online world of virtual pets with over 1 million accounts as of June 2010. The game allows people to do create a guild. A guild is like a club, where users get together in order to help each other with the game or discuss topics of interest. Guilds that are appealing will naturally attract more visitors. Creating a guild layout that appeals to your visitors is quite simple once you get the hang of it.

Instructions

1. Open your image-editing/paint program and create a new image. Change the dimensions to 500 by 600 pixels. This is the size that will best fit inside of the premade template on Neopets.

2. Search for your background image on the Neopets website (see Resources). The backgrounds section has many great options. You also may draw a scene yourself or create a collage of different images to design your own unique background.

3. Right-click on the image(s) of your choice and paste it into the program. Position it however you would like. You may re-size the image if desired.

4. Create boxes for text directly on top of, beneath or above the background image. You may use circles, squares or rounded squares for the text areas. You may change the opacity to make the squares lighter than the rest of the image, keep them the same or change the color entirely. It's up to you.

5. Add images, if desired. For example, you may add a small Neopets faerie in the corner of a text box. Locate the image, copy it and paste it to your guild layout.

6. Place text on the layout. The text that you place will become part of the image, so be sure not to place text that you want to change later. The text that you add should consist of titles and sub-titles such as \"News\", \"Updates\", \"Contests\" and anything else that you would like to add. Do not add text to the text areas.

7. Click \"Save for Web\" in Adobe Photoshop and save as a JPEG in all other programs. Upload the image to an image hosting site like Photobucket or ImageShack.

8. Create the code for your layout. You will start with the following basic code (this code creates a table so that your image will appear on your guild page):<br /><br /><table width=500 height=600 border=\"0\" background=\"Your URL here\">

9. Change the dimensions of the table so that they are the same size as the image. Next, add the following code below the table code (this code changes the scroll bar and main text colors on your page–you may change the color codes and font-family value to fit your guild colors and layout image):<br /><br /><STYLE type=text/css><br />BODY{<br />scrollbar-arrow-color: black<br />GO<br /> scrollbar-track-color: black<br />GO<br /> scrollbar-face-color: white<br />GO<br /> scrollbar-highlight-color: black<br />GO<br /> scrollbar-3dlight-color: white<br />GO<br /> scrollbar-darkshadow-color: white<br />GO<br /> scrollbar-shadow-color: white<br />GO<br />font-family:value;Georgia;color:#70B7FE<br />GO<br />}<br /></style><br /><tr><br /><td>

10. Add the text box codes below the scroll bar and main text code. This code includes the following: 'top:555' which tells you how far the box is from the top (in pixels). 'Left: 290' means that the scroll box is 290 pixels from the left. The width and height sections tell how large your box is. If you have three text areas, you will need three text box codes. You will also need to adjust the 'top' and 'left' sections so that they align with your guild layout image. This may take some time, but if you continue refreshing after changing the attributes, you will be able to tell where the text box is and how far you need to move it. The text box code is as follows (enter your text where it says \"TEXT GOES HERE\" being sure not to delete any part of the code):<br /><br /><tr><br /><td><br /><div style=\"position:absolute; top:555; left: 290; overflow: auto; width: 290; height: 240;\"><br />TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT GOES HERE, TEXT <br /></div></table>

11. Paste the entire code together into your Guild Preferences page. Save the page and refresh in order to view your finished guild layout.

References

• Neopets: Teryla's Homepage
• Neopets: Mykenez Homepage - Full Page Guild Layout Tutorial
• Island Neo: Guild Layout Tutorial

Resources

• Neopets