User Lookup Tutorial
1. Open Paint Shop Pro, Photoshop, Paint, or another image editing program.
2. Right click on the background template and choose Copy.
3. If using Photoshop, go to File > New and then Edit > Paste. If using Paint Shop Pro, go to Edit > Paste.
4. Edit the background image however you like, change the colour, add pictures, etc. This background image will be repeated. You can change the width of the image, but some users with a low screen resolution will not be able to see anything you add on the far right. You can change the height without consequence.
5. Right click on the header template and choose Copy.
6. If using Photoshop, go to File > New and then Edit > Paste. If using Paint Shop Pro, go to Edit > Paste.
7. Edit the header image however you like, change the colour, add pictures, etc. You can change the height or width, but you will need to edit parts of the code, which will be discussed in step 10.
8. Upload both images to the internet. Try Image Cave or 2and2 for an image host.
9. Replace BACKGROUNDURLHERE and HEADERURLHERE with the links to your images and put the code into your lookup.
body { background: url(BACKGROUNDURLHERE) repeat-y; }
#topimage { background: url(HEADERURLHERE); width: 745px; height: 400px; position: absolute; top: 0px; left: 0px; }
#stats { position: absolute; top: 400px; left: 140px; width: 595px; }
.medText { background: none; }
#main { background: none; border: 0px; }
.contentModule, .contentModuleTable { border: 0px; }
#header, #footer, hr { display: none; }
#userneopets img { height: 100px; width: 100px; }
#usertrophies img { height: 35px; width: 35px; }
#usertrophies .trophy_cell b { font-weight: normal; }
#usertrophies .medText { font-size: 0.6em; }
</style>
<div id="topimage"></div>
<div id="stats"><table></i>
10. If you changed the height of the header, change the part that says "height: 400px;" to the correct height on the "#header" line. Then, change the part that says "top: 400px;" to the same number on the "#stats" line. If you changed the width of the header, change "width: 745px;" to the correct widthon the "#header".
11. If you want to add text to your lookup, add it after the </i>.
Common Problems
Lookup repeats/resized/too small
1. If you uploaded the image to Photobucket, upload it somewhere else instead (eg. Image Cave). Photobucket resizes large images.
2. You might have the height and/or width wrong in the code. To find the correct height, right click on the image and choose Properties. Beside Dimensions is the width x height.
Text italicized/slanted
Add </i> before your text. You may need to add it before each section of text.