How to Code Guild Layouts

Create a new image in your image editing program with a height of 600 and a width of 550.; , Find an image that you would like to use as your main background., Copy this image, and paste it wherever you'd like into the new 550x600 image you have...

9 Steps 2 min read Medium

Step-by-Step Guide

  1. Step 1: Create a new image in your image editing program with a height of 600 and a width of 550.;

    There are many sources for these images, including Google image search, the many neopets image contests, or even neopets itself. ,, Go crazy and customize the image as much as you'd like for a really unique guild layout.

    Once you are ready with your image, save it and post it to your image hosting site.

    Be sure to remember the URL code for you image once it is posted to your host site.

    You will need to enter it in the next code . , The first code you need to enter will tell your page what you what kind of colors, fonts and styles you want for the text you want to display.

    You start by inserting the following code: <style> BODY table, td, font, p, i, body, div {font-family:verdana;font-size:8pt;font-weight:normal;line-height:8pt;font-style:normal;color:black;}b{color:6BD22F;font-family:tahoma;} # Continue with the next code.

    You need to enter will tell your page what you what kind of colors and designs you want associated with your links and the textbox.

    Inserting the following code: #* BODY A:
    LINK { color:#44E6B9;font-size:8pt; text-decoration:none;} A:
    VISITED { color:#44E6B9;font-size:8pt; text-decoration:none;} A:
    HOVER {color:#6BD22F;font-family: tahoma;text-transform:line-through;background-color:#000000;border:0px;border-style:solid;border-color:#CCCCCC;}<br />#TEXTAREA{ border: 1px solid;font-size: 8pt;font-family: tahoma; font color:6BD22F; background-color: #; color: #; margin: 1px; style:solid;} </style> These codes will tell the computer what colors you want your text, your links and the designs for your text box.

    You can really be creative here and make a good theme for your site by adjust these colors and styles. , Use the following code to insert your image and the message you want to display in your text box. , You can change your layout at any time.

    The beauty of using CSS to customize your coding is that it is extremely versatile and you can do a great amount of unique designing to make your guild really stand out!
  2. Step 2: Find an image that you would like to use as your main background.

  3. Step 3: Copy this image

  4. Step 4: and paste it wherever you'd like into the new 550x600 image you have created.

  5. Step 5: Use your image editing software to add any words

  6. Step 6: images or boxes you would like included in your image.

  7. Step 7: Begin to code your site.

  8. Step 8: Finally you want to insert the designs you have made into the guild.

  9. Step 9: Save your changes and your layout should be up and running with your very own customized layout!

Detailed Guide

There are many sources for these images, including Google image search, the many neopets image contests, or even neopets itself. ,, Go crazy and customize the image as much as you'd like for a really unique guild layout.

Once you are ready with your image, save it and post it to your image hosting site.

Be sure to remember the URL code for you image once it is posted to your host site.

You will need to enter it in the next code . , The first code you need to enter will tell your page what you what kind of colors, fonts and styles you want for the text you want to display.

You start by inserting the following code: <style> BODY table, td, font, p, i, body, div {font-family:verdana;font-size:8pt;font-weight:normal;line-height:8pt;font-style:normal;color:black;}b{color:6BD22F;font-family:tahoma;} # Continue with the next code.

You need to enter will tell your page what you what kind of colors and designs you want associated with your links and the textbox.

Inserting the following code: #* BODY A:
LINK { color:#44E6B9;font-size:8pt; text-decoration:none;} A:
VISITED { color:#44E6B9;font-size:8pt; text-decoration:none;} A:
HOVER {color:#6BD22F;font-family: tahoma;text-transform:line-through;background-color:#000000;border:0px;border-style:solid;border-color:#CCCCCC;}<br />#TEXTAREA{ border: 1px solid;font-size: 8pt;font-family: tahoma; font color:6BD22F; background-color: #; color: #; margin: 1px; style:solid;} </style> These codes will tell the computer what colors you want your text, your links and the designs for your text box.

You can really be creative here and make a good theme for your site by adjust these colors and styles. , Use the following code to insert your image and the message you want to display in your text box. , You can change your layout at any time.

The beauty of using CSS to customize your coding is that it is extremely versatile and you can do a great amount of unique designing to make your guild really stand out!

About the Author

P

Peter Allen

Professional writer focused on creating easy-to-follow DIY projects tutorials.

45 articles
View all articles

Rate This Guide

--
Loading...
5
0
4
0
3
0
2
0
1
0

How helpful was this guide? Click to rate: