Coding Neopets User Lookups

Here are the codes to edit your user lookups to your liking!

Before everything else, we all know how our user lookups look but for this tutorial, here's a preview of the unedited user lookup for reference! Once you get lost of which part of the lookup we're referring to, you can always click on the image below. (it opens on a pop-up window)

Putting Backgrounds

Changing your outer background:

<style> //{} body {background-color:#ffffff; background: url(your background url here); } </style>

Changing your inner background:

<style> //{} #main {background:#cccccc url(your background url here);} </style>
Note: Do not remove the hex colour on the code because if you do, the code will not work. You can change the hex colour if you like BUT do not remove it entirely!

Editing the Specific Parts of the User Lookup

Changing the contentModuleHeader
This is the header of your User Info with the black background.

To change the background and text color use this code. Just replace the hex colours to your preferences!
<style> //{} .contentModuleHeader {background-color:#FF99CC; color:#CC0066; } </style>

Remove the background with this code.
<style> //{} .contentModuleHeader {background:none; color:#CC0066; } </style>

Changing the contentModuleHeaderAlt
This is the header of your collections, shop & gallery, neopets, neohome and, games and trophies with the red background.

To change the background and text colours like the one above, use the following codes.
<style> //{} .contentModuleHeaderAlt{background-color:#FF99CC; color:#CC0066; } </style>

To remove the background as shown above, use this code:
<style> //{} .contentModuleHeaderAlt{background:none; color:#CC0066; } </style>

Changing the contentModuleContent
These are the white tables that contain all your specific information.

To change the background and text colour. Use the code below:
<style> //{} .contentModuleContent {background-color:#FF99CC; color:#CC0066; } </style>

If you wish to remove the background use this code:
<style> //{} .contentModuleContent {background:none; color:#CC0066; } </style>

Editing contentModule and contentModuleTable
These are the borders around our tables!

To change the border colours and size, use the code below:
<style> //{} .contentModule {border: 2px solid #000000;} .contentModuleTable {border: 5px solid #CC66FF;} </style>

To remove them use this:
<style> //{} .contentModule, .contentModuleTable {border:none;} </style>

Editing the Header
This is where your banner and links are.

To edit the image background on our header use the code below.
<style> //{} #header {background-color: #FFFFFF;background-image: url("your background url here");border-bottom: 2px solid #000000; width:996px; height:77px;} </style>
If you want to make a banner of your own, you can use the image below as a guide. Click on the thumbnail for full view.

If you want a banner with a bigger height so you can add more of your designs, you are free to do so!

The code is the same, you just need to change the height attribute of the code to the height of your banner. In this case, the banner height is 200px! You can download the image below as a guide for your banner.

To remove the header, use this code.
<style> //{} #header {display:none;} </style>

Editing the Footer
This can be found at the end of your layout.

You can change the footer background by using this code:
<style> //{} #footer {background: url("your background url here");width: 996px; height: 150px;} </style>
Again, just like the header you can edit the height of your footer. Just change the height attribute number! If you need a template for the footer background, download the image below.

To remove the footer, use this code:
<style> //{} #footer {display:none;} </style>

Editing Main
Main is the table that holds all of the contents together.

You can edit the background colour and the border size and colour of your main by using the codes below:
<style> //{} #main {background-color:#FF99CC; border: 5px solid #CC0066;} </style>
You can remove the background and border with this code:
<style> //{} #main {background:none; border:none;} </style>

Now, you have the basic knowledge of editng your user lookup. You now have the ability to make your own layout theme. But I know, you want to learn more. How do you make full page user lookup. Now, that's easy. you just need to remove everything except for your account information ofcourse.

Here's the code to remove everything and turn your user lookup into the grey image above!
<style> //{} #footer, #header,#ban {display:none;} #main {background:none; border:none;margin-top:0px;} .contentModuleHeader, .contentModuleHeaderAlt, .contentModuleContent {background:none; color:#000000; } .contentModule, .contentModuleTable {border:none; } </style>

Of course, you wouldn't want your layout looking like that. This is why we have CSS where you can add your background colours and images, edit your scrollbar colours and stuff like that! To make it short, edit the code below to your preferences!
<style> //{} body{background: #ffffff url(your image url here!); 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; } A:link{COLOR:#471494;} A:visited{COLOR:#471494;} A:hover{COLOR:#ffffff;} td,p,body{color:#000000;font:10pt verdana} </style>

Now, here's where your designing skills are put to the test! Sorry, I can't teach you on that one, but you can easily place your information on a division layout.

It's not much, but as you can see, you can place your info anywhere you want on the page! The exact codes I used above are the ones below. Feel free to edit them and use them to your liking!
<style> //{} #footer, #header,#ban {display:none;} #main {background:none; border:none;margin-top:0px;margin-left:0px;} .contentModuleHeader, .contentModuleHeaderAlt, .contentModuleContent {background:none; color:#000000; } .contentModule, .contentModuleTable {border:none; } body{background: #ffffff url(http://i27.photobucket.com/albums/c194/the_pit_stop01/zafarashop4.gif); scrollbar-face-color: #62B1EC; scrollbar-track-color: #C8E3F9; scrollbar-highlight-color: #C8E3F9; scrollbar-shadow-color: #62B1EC; scrollbar-3dlight-color: #ffffff; scrollbar-darkshadow-color: #000000; scrollbar-arrow-color: #C8E3F9; } A:link{COLOR:#471494;} A:visited{COLOR:#471494;} A:hover{COLOR:#ffffff;} td,p,body{color:#000000;font:10pt verdana} </style> <div style="position:absolute; top:100px; left:200px; width:650px; height: 500px; border:5px solid #FF6699; background-color:#FFDFEA; overflow:auto;"> Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! Put your text here! Put your text here! Put your text here! Put your text here!Put your text here! <p> <table>

Note: You can use the codes above for your redistributable graphics. If you think this tutorial was helpful please link back to our site to spread the love! :)

Share |