goodly designs for the average tasteful chapThis is a tutorial on how to make a full page guild layout. A fullpage layout typically hides the sidebar, topbar, and everything in between, demolishing anything that isn't your layout and content.
A fullpage layout has a few parts that you should recognize.
- A background image. The image is normally around 1000 by 900 pixels, but you could make your larger or smaller. It contains stuff like an image, box where text will go, and the title of a guild You can see an example of one here.
- A text box. A layout should have at least one text box. This is where everything you write will show up. Two text boxes are fine, but over three and the layout gets messy and ugly, not to mention a lot of work to make. This tutorial shows you how to make a layout with one text box.
- A background color. There's going to be some space around the edge of your background image, unless your fills the whole screen, which I don't recommend. See in the example image how I cut off the image in a cool way to give way to a solid color? Thats a good idea to do if you don't want there to be a sudden line where your image ends and a solid color begins.
- Coding. This is where you write where you want your textbox to be, what color you want the font to be, what size, etc. Its hard, but some parts can be fun if you get good at it.
- Your content. After your coding comes where you write stuff like "Welcome to my guild, we're awesome."
The first thing you have to do is make a background image. Use an image editting program to make one with fairly large dimensions (around 900x1000). Throw in some images, fancy text, and make a box where you want your words to go. Try to keep to a color scheme. All cool colors, all warm colors, or colors that match whatever images you've included.
Once you're done, save it as a gif, jpg, or png, and upload it with an image hosting site like imageshack.. While it uploads, open a word or textediting document and paste in the following stuff.
<style />
#header, #footer, .sidebar{display:none;width:100px}
#n, td, table{background: transparent;}
#main{border:none; width:500px; float:left; padding-top:10px; padding-left:0px;}
.content, #main{background:none;}
body,font,td,p,{
color:-a-;
font-size: -b-px;
font-family:-c-;
}
body{
background-color:-d-;
}
A:link, a:active, a:visited
{color:-e-;
}
A:hover{
color:-f-;
}
#image{left:0px;top:0px;}
#textbox{left:-g-px;top:-h-px;
width:-i-px;height:-j-px;overflow:auto;}
</style />
<div id="image" style="position:absolute;"><img src="-k-"></div>
<div id="textbox" style="position:absolute;">
Type stuff here after you're done coding this. Type stuff here after you're done coding this. Type stuff here after you're done coding this. Type stuff here after you're done coding this. Type stuff here after you're done coding this. Type stuff here after you're done coding this. Type stuff here after you're done coding this. Type stuff here after you're done coding this. Type stuff here after you're done coding this. Type stuff here after you're done coding this. Type stuff here after you're done coding this. Type stuff here after you're done coding this.
</div>
Different parts of the code have been replace with letters between hypehns, like so: -a-. Replace each letter and the hyphens with the information that should be there. Refer to the table below.
| a | color you want your text to be |
| b | size of the text (12 is standard) |
| c | name of font the main text should be |
| d | background color of layout |
| e | color links should be |
| f | color links should be whe you mouse over them |
| g | number of pixels between the left side of the text box and left side of webpage |
| h | number of pixels the top of your textbox is from the top of the page (not including the URL bar, etc). |
| i | number of pixels wide your textbox is |
| j | number of pixels tall your textbox is |
| k | URL(address) of the background image you uploaded |
If you're confused about g through k, refer to this image and it should clarify a bit.
If you don't know how big a pixel is, look at your guild logo for reference. It is 100 pixels wide and 100 pixels tall. If you're really having trouble, the company Iconfactory makes an application called XScope that is for measuring things on a screen. It costs about 25 dollars, but you can download a free trial that will last you a while.
When you've got all your values put in correctly, you're done! If you enjoyed this tutorial, please link back to Figmint with one of our buttons.
