Coding a Full Page Neopets Guild Layout

Here is a step by step process in making a guild layout. The code I will provide can be used to make your own guild layout for PERSONAL USE ONLY. Meaning, you cannot use these codes on your redistributable guild layouts. Anyone caught doing this will be in violation of our terms. The codes have been edited to work on the new Neopets layout!

1. Open your image editing software and create a 800x300 rectangle similar to the image below. Download the image below to use as a guide. Click on the image, right click and save to your computer.
   
   The image above will be the header for your guild layout. Make your necessary designs on that image. Next we need to do the background.
2. Once you have made your header save it as .gif or .jpg. A little advice --- please refrain from saving your images as PNG as this image takes a longer time to load and has a larger file size compared to GIF and JPG. Now open your saved header and cut a little bit of the lower part of your header as shown below. I've cut mine with a height of 4 pixels.:
   
   Now your background image should look similar to the one below:
   
   Save the image above as your background. Now, close your header image. Be sure not to save your header this time because if you do, your header will be 4 pixels short than the original height of 300 pixels.
3. Now it's time to code your guild layout! First we need to place your guild layout's style sheet. Start your layout with this code: <style> //{}followed by the codes below:
   Set your scroolbar colors. Copy and edit the hex colors to your prefrences.
   body{scrollbar-face-color: #F166A1; scrollbar-track-color: #FCDCEA; scrollbar-highlight-color: #FCDCEA; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #ffffff; scrollbar-darkshadow-color: #F166A1; scrollbar-arrow-color: #ffffff; }

   Now, set your link colors. Replace the hex colors with your preferences.
   A:link{COLOR:#471494;} A:visited{COLOR:#471494;} A:hover{COLOR:#ffffff;}

   To set your font style edit this code:
   td,p,body{color:#000000;font:10pt verdana}

   To hide everything and to position the guild links properly put this code:
   ul{padding-left:50px} #header, #footer, .sidebar, .nfw ,#ban{display:none} #n, td, table { background: transparent; } #main {border:none; background:none; width:500px; float:left; padding-top:90px; padding-left:135px;margin-top:0px;margin-left:0px;} .content {background:none; }

   Now close your style sheet with the following code: </style>.

   To set your background put this code and replace the "PUT BACKGROUND URL HERE" with your background url.
   <body background="PUT BACKGROUND URL HERE">

   Then, place the following code to position your header image.
   <div style="position:absolute; top:0px; left:0px;"><img src="PUT YOUR HEADER IMAGE URL HERE"></div>

   It's time to place your guild contents! Copy and paste the codes below:
   <div style="position:absolute; top:284px; left:338px; width:184px;"> <a href="linkhere">Link</a><br> <a href="linkhere">Link</a><br> <a href="linkhere">Link</a><br> <a href="linkhere">Link</a><br> <a href="linkhere">Link</a><br> </div> <div style="position:absolute; top:284px; left:538px; width:399px;"> put text here!put text here!put text here!put text here!put text here!put text here!put text here! <p> <center><b>CREDITS</b><br> <a href="http://petpages.neopets.com/~_saellys592_78" target="_blank"><img border=0 src="http://i90.photobucket.com/albums/k260/neofaeriewings/NEOBUTTON88X311.gif"></a> </center> </div>

   Congratulations! You just made your first fullpage guild layout. It's time to place your codes on your guild. Just click on Guild Layout=>Modify Guild Preferences=>then paste your codes on the welcome message! I hope this tutorial was helpful! :)

   By the way, there are times when your images don't appear on the layout. When one or two of the images don't appear (the header image and the background) just change their file names!

   NOTE: This code is for your personal use only and is not meant to code your redistributable or pre-made graphics. And if you use this code a credit to neo-faerie wings must be visible on your layout. Any violation found will directly be placed on our WALL OF SHAME without warning!!!

Tutorial updated Aug. 5, 2010

Share |

Full Page Guild Layout with MS Paint

Choose an image you want to use for your layout. Open it on MS paint. Now cut a portion of the image you like to use. Be sure the height is smaller or exactly 300px. You can see the height of your selection by looking at the bottom right hand corner of your screen while you're holding down your mouse. Mine looks like so:

Where 800 is my width and 269 is my height.

Now, cut that part you selcted and paste it on your MS Window. But before that, adjust your page orientation so it can accomodate your 800px width image. On your MS Word, click on File=>Page Setup=>Orientation=>Landscape! Now, paste your image.

Next, right click on your image and click on Show picture toolbar. This little tool should appear.

Start clicking on the options in the red box and see what happens to your image. Click it until you get the look you desire! Mine turned out like this so far!

Now, look at your bottom left hand corner of the screen. Can you see these options?

Click on the option on the red box and make a rectangle on your image.

Right click on your rectangle and click on Format Autoshape. A window should appear. Similar to this one:

Now, click on Colors and lines=>color=>Fill Effects!

This window should pop-up:

Choose a pattern you like for your layout and choose the colors you fancy!

Now, click OK. Then go back to your Format Auto Shape window (which should still be open at this point) and adjust the transparency!

Now, click OK. This is how my image looks so far!

Time to add our text. Look at the left hand corner of your screen and click on the Word Art tool.

This window should appear. Choose a style you want. I chose the first one.

Now, click OK and another window should pop-up where you type in your text! Once you've typed in your text and clicked on OK, your text will probably ruin the whole layout! Don't worry just right click on your text click on Format word art=>Layout=>Square and click OK! Just to be safe do this to your rectangle and image too!

Now, to edit our text, right click on it and click on format word art. A window will pop up. Choose a color for your text and don't forget to edit the border too!

Add as many text as you want!

After you've made your design, press print screen on your keyboard and paste it on your MS Paint window.

Open another window of MS Paint. Copy the guild template below and paste it on your MS Paint.

Now, click on your bucket tool and choose a background color you want. Then click on the white space on your template. Then choose another color for your text boxes and click on the green part of your template. This is how my template looks so far!

You can add more stuff on it for art's sake! ^^ This is how my image looks like after I added some stuff!

Now go back to the other MS Paint window where you placed your design. Cut it and paste it on your template! Now just save your image as JPG or PNG to retain color quality! Now, here is my design!

All you have to do now is to code your design. Just click HERE for the codes and for further instructions!

Share |