Coding Guild Layouts

Back in the days when Neopets Beta didn't exist, coding guild layouts was a breeze. Now it's extremely complicated and very hard to teach. So instead of asking everyone to rack their brains out with all the excess coding, I decided to provide an easy-to-use template instead.

This template is based on a small table layout and doesn't require any graphics programs at all *gasps*! People who only have programs like paint, never fear, you don't need fancy programs even if you do want to add your own images.

To begin, let's start off with a preview of what the guild layout will look like if I made it a disco theme:

Welcome to the Guild!
Welcome to the best guild in Neopia! ~Guild.Name~ offers the best in activities, services and helpful advice! We also have the most dedicated council and a bunch of awesome members who will make your time on Neopets the most worthwhile experience ever!

If you're new and don't know where to begin, feel free to contact any one of the council members or read up on the newbie info on the guild webbie :)


News and Updates
May 15th: Updated the guild webbie with our last contest winners. New contests will be up on the 20th =D

May 13th: The latest pet to be added to our Adoption Agency is Pet_Name the Disco Krawk! ^^

May 12th: Congratulations to our 5th council member Their_Name! S/he has now been placed in charge of the monthly guild newsletter and I can't wait to read the June issue!


Links
Activities
Guess the Petpet

I'm nice and soft,mostly white. Some people say that I look like a pillow but I'm only just water molecules.

Guess it right and win this petpet! Contest closes 26th May.

Treasure Hunt

Congratulations to Your_Name who was the first to finish the Treasure Hunt! S/he wins a Soup Faerie Plushie!


Looks pretty good for a layout that doesn't require any images, right? This style doesn't take much HTML knowledge to edit either, we will give you information about where to edit and what to edit with. Below is the coding of the above guild layout:

<table width="400" align="center" border="0"><tr><td bgcolor="#65D811" colspan="2">
<center><b><font color="white">Welcome to the Guild!</b></font></center>
</td></tr><tr><td width="150">
<center><img src="http://images.neopets.com/new_shopkeepers/t_1640.gif"></center>
</td><td width="300" valign="top"><div style="overflow:auto; width:250; height:150; padding:3px;">

Welcome to the best guild in Neopia! ~Guild.Name~ offers the best in activities, services and helpful advice! We also have the most dedicated council and a bunch of awesome members who will make your time on Neopets the most worthwhile experience ever!
<p>

If you're new and don't know where to begin, feel free to contact any one of the council members or read up on the newbie info on the guild webbie :)
<p>

</div></td></tr></table>
<br>

<table width="400" align="center" border="0"><tr><td bgcolor="#65D811" colspan="2">
<center><b><font color="white">News and Updates</b></font></center>
</td></tr><tr><td width="300" valign="top"><div style="overflow:auto; width:250; height:150;padding:3px;">

<b>May 15th:</b> Updated the guild webbie with our last contest winners. New contests will be up on the 20th =D
<p>

<b>May 13th:</b> The latest pet to be added to our Adoption Agency is Pet_Name the Disco Krawk! ^^
<p>

<b>May 12th:</b> Congratulations to our 5th council member Their_Name! S/he has now been placed in charge of the monthly guild newsletter and I can't wait to read the June issue!
<p>

</div></td><td width="150">
<center><img src="http://images.neopets.com/new_shopkeepers/t_1466.gif"></center>
</td></tr></table>
<br>

<table width="400" align="center" border="0"><tr><td bgcolor="#65D811" width="150">
<center><b><font color="white">Links</b></font></center>
</td><td bgcolor="#65D811" width="250">
<center><b><font color="white">Activities</b></font></center>
</td></tr><tr><td width="300" valign="top"><div style="overflow:auto; width:150; height:150;padding:3px;">

@ <a href="#">Guild Webbie</a><br>
@ <a href="#">1np Auctions</a><br>
@ <a href="#">Donation Shop</a><br>
@ <a href="#">Adoption Agency</a><br>
@ <a href="#">Guild Newsletter</a><br>
@ <a href="#">Guild Mall</a><br>

</div></td><td width="300" valign="top"><div style="overflow:auto; width:250; height:100;padding:3px;">

<b>Guess the Petpet</b>
<p>
<i>I'm nice and soft,mostly white. Some people say that I look like a pillow but I'm only just water molecules.</i>
<p>
Guess it right and win this petpet! Contest closes 26th May.
<p>

<b>Treasure Hunt</b>
<p>
Congratulations to Your_Name who was the first to finish the Treasure Hunt! S/he wins a Soup Faerie Plushie!
<p>
<center><img src="http://images.neopets.com/items/toy_soupfaerie_plushie.gif"></center>
<p>

</div></td></tr></table>
<br>

The words underlined are places where you replace what is there with your own text and headings. The only other things you have to take into consideration is the sizing and the colors of this template. All heading background colors are reqpresented with a hex color code and the actual heading text color is represented with a word color.

For images, make sure that you size your div and table cells to the right proportion. So for example, if your image had a width of 200 and height of 200, then the td width of the table cell that contained the image would be changed to 200 and the rest of the layout would be total width of table minus 200 [in this case, it will be 400-200=200]. The height of the div which contains your text next to that certain image will need to have its width changed to the td width containing the div and the height of the div will be the height of your image.

Confusing? You are always free to leave your template as is and just change the colors and pictures. Underneath the template, you can have other things like advertising codes etc. If you want more tables, just copy and paste one section from <table> to </table>. This will give you another row to work with.

We recommend that you use a CSS stylesheet along with this layout to achieve maximum effect. CSS tags such as scrollbar colors, link colors etc. will customize your layout better than HTML tags.

We would like to be acknowledged for our template coding, but we're not strict on crediting in this case. Just a simple text saying that you got the template from Neo-Reality or a link back button would be great. However, this template may not be redistributed, even with credit. It is for personal use only, not for mass production.

~Jen