Don't forget the start tags and end tags. All the codes on this page go in between these two tags!

Start Tag <style>

End Tag </style>

Use this menu to navigate the sections of the page.

Backgrounds | Header | Images | Modules | Navigation | Remove Stuff | Text

Backgrounds

Outer Background
This code will let you set the outer background to the image of your choice. The outer background is the one displayed with the disco-ish background in the picture below.



And this is the code for it. Just put the URL of your background image into the code, and, in case your image doesn't load, or where it doesn't load, put the hex code of the color you want to fill the page.

body {background: url(URL); background-color: #FFFFFF;}

If you just want to set a background color, with no image, use this code.

body {background-color: #FFFFFF;}


Inner Background
This code will let you set the inner background to the image of your choice. The inner background is the one displayed with the disco-ish background in the picture below.



And this is the code for it. Just put the URL of your background image into the code, and, in case your image doesn't load, or where it doesn't load, put the hex code of the color you want to fill the page.

#main {background: url(URL); background-color: #FFFFFF;}

If you just want to set a background color, with no image, use this code.

#main {background-color: #FFFFFF;}


One Complete Background
This code gets rid of the 'main' portion of the code and makes your background image or color spread across the entire page, like this.



And this is the code for it. Just put the URL of your background image into the code, and, in case your image doesn't load, or where it doesn't load, put the hex code of the color you want to fill the page.

body {background: url("http://www.casualdistortion.com/neo/graphics/bgs/neopets/21.gif");background-color: #FFFFFF;}
#main {background: none;border: 0px;}

If you just want to set a background color, with no image, use this code.

body {background-color: #FFFFFF;}
#main {background: none;border: 0px;}


Background Properties
These are the elements you can add into your background codes to define them the way you want them to be. Just copy the code and paste it into the background code you're already using. If you're not sure how to do that, you can look below the properties for an example of what the code might look like when you're done.




And here's an example of how your total background code may look, including style tags.

<style>
body {
background: url("http://www.casualdistortion.com/image.jpg");
background-color: #FFFFFF;
background-attachment: fixed;
background-position: top left;
background-repeat: repeat;
}
</style>

Header

Change Header Image
Use this code to add your own image into the header space in your userlookup. Change the URL to your image's distinct URL, and add the dimensions for the height of your image to the code. If you want your header image to have a border, change the 0 to how thick you want the border to be.

#header {background: url('YOUR URL HERE');height:100px;border:0px;}


Change Footer Image
Use this code to add your own image into the footer space in your userlookup. Change the URL to your image's distinct URL, and add the dimensions for the height of your image to the code. If you want your footer image to have a border, change the 0 to how thick you want the border to be.

#footer {background: url('YOUR URL HERE');height:100px;border:0px;}

Images

There are certain image codes you may be looking for, like how to add a blinkie, but I've decided not to add or advertise any codes that are only compatible with Internet Explorer. It's an obsolete browser (and a huge security risk) and there's no point in decorating a userlookup if the vast majority of users aren't going to see your decorations. I advise focusing on images and codes that are cross browser friendly.


Add an Image
Use this code to add a normal image to your userlookup. Change the URL to the URL of your image. This code does NOT go inside style tags. You simply add it where you would add your words! And, if you're using a .png image, you need to define height and width properties or the image won't show up in Internet Explorer. Use the next code if you're using a .png.

<img src="YOUR URL HERE" />


Add a PNG Image

<img src="YOUR URL HERE" height="100px" width="100px"/>


Add a Centered Image
This simply adds an image that is centered to the page. This does NOT go into style tags!

<center><img src="YOUR URL HERE" /></center>


Replace Shield
This code will replace your userlookup shield. You are allowed to replace it, providing you aren't deliberately trying to mislead other players by convincing them you're new when you're not, or that you've been around longer than you have.

#userinfo .contentModuleContent{
background: url('IMAGE URL') top right no-repeat;
}
#userinfo .medText img {
visibility: hidden;
}
#userinfo .medText table table img {
visibility: visible;
}

Modules

Module Header Colour
This will change the background colour of all the module headers in your userlookup. Change the background color to what colour you want the background to be, and changet he color value to which colour you want the text to be.

.contentModuleHeader, .contentModuleHeaderAlt {background-color: #FFFFFF; color: #000000;}


Module Background Colour
This will change the background colour of the userlookup modules. Change the hex code within the code to whatever colour you want the background to be.

.contentModuleContent {background-color:COLOR;}


Module Background Image
This will change the background of your userlookup modules to a background image instead of a solid colour. Just add the URL of your background image into the code.

.contentModuleContent {background: url(YOUR URL HERE);}


Module Table Borders
There are three distinct borders around each module in your userlookup. See the following image for an example.



In the previous picture, there is the inner border, which is purple in the image, the middle border, which is light blue in the image, and the outer border, which is dark blue in the image.
Inner Border - purple
Middle Border - light blue
Outer Border - dark blue

With those pointed out, here are the codes to change the properties for those borders.

Inner Border
contentModuleContent {border: 10px solid purple;}

Middle Border
.contentModuleTable {border: 10px solid lightblue;}

Outer Border
.contentModule {border: 10px solid darkblue;}


Position Modules
Sometimes it's necessary for your layout to move the modules around. Use this code, and substitute the individual name of the module you want to move. The names can be found in the sections below, but here's a quick list of all the module names.

• #userinfo .contentModuleTable
• #usercollections .contentModuleTable
• #usershop .contentModuleTable
• #userneopets .contentModuleTable
• #usertrophies .contentModuleTable
• #userneohome .contentModuleTable
• #habitarium

And the code to position the modules is here. Substitute #userinfo for the name of the module you want to move.

#userinfo .contentModuleTable {
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 200px;
}


Userinfo Module Settings
This module's class name is #userinfo .contentModuleTable

To change the text in this module, use this code.

#userinfo .medText {
font-size: 8pt;
color: #000000;
font-family: arial;
}


To remove the horizontal divider above the icons, use this code.

table {
border-top: 0px !important;
}


To add your own shield replacement, use this code.

#userinfo .contentModuleContent{
background: url('IMAGE URL') top right no-repeat;
}
#userinfo .medText img {
visibility: hidden;
}
#userinfo .medText table table img {
visibility: visible;
}


Collections Module Settings
This module's class name is #usercollections .contentModuleTable

To change the text in this module, use this code.

#usercollections .medText {
font-size: 8pt;
color: #000000;
font-family: arial;
}


To change the size of the images in your collections box, use this code.

#usercollections img {
width: 50px;
height: 50px;
}


Shop Module Settings
This module's class name is #usershop .contentModuleTable

To change the text in this module, use this code.

#usershop .medText {
font-size: 8pt;
color: #000000;
font-family: arial;
}


To change the size of the images in your shop box, use this code.

#usershop img {
width: 50px;
height: 50px;
}


Pets Module Settings
This module's class name is #userneopets .contentModuleTable

To change the text in this module, use this code.

#userneopets .medText {
font-size: 8pt;
color: #000000;
font-family: arial;
}


To change the size of the images in your neopets box, use this code.

#userneopets img {
width: 50px;
height: 50px;
}


To reverse the order your pets appear, use this code.

#userneopets {
direction: rtl;
}


Trophy Module Settings
This module's class name is #usertrophies .contentModuleTable

To change the text in this module, use this code.

#usertrophies .medText {
font-size: 8pt;
color: #000000;
font-family: arial;
}


To change the size of the images in your trophies box, use this code.

#usertrophies img {
width: 50px;
height: 50px;
}


To make your trophies module into a scrolled box, use this code.

#usertrophies {
width: 300px;
height: 200px !important;
overflow: auto;
}


Neohome Module Settings
This module's class name is #userneohome .contentModuleTable

To change the text in this module, use this code.

#userneohome .medText {
font-size: 8pt;
color: #000000;
font-family: arial;
}


To change the size of the images in your neohomes box, use this code.

#userneohome img {
width: 50px;
height: 50px;
}


To remove this module, use this code.

#userneohome {
display: none;
}


Habitarium Module Settings
This module's class name is #habitarium

To change the text in this module, use this code.

#habitarium .medText {
font-size: 8pt;
color: #000000;
font-family: arial;
}


To change the size of the images in your habitarium box, use this code.

#habitarium img {
width: 50px;
height: 50px;
}


To remove this module, use this code.

#habitarium {
display: none;
}


NC Mall Module Settings
This module's class name is #ncmall

To change the text in this module, use this code.

#ncmall .medText {
font-size: 8pt;
color: #000000;
font-family: arial;
}


To change the size of the images in your habitarium box, use this code.

#ncmall img {
width: 50px;
height: 50px;
}


To remove this module, use this code.

#ncmall {
display: none;
}

Navigation

Default Navigation Bar Colours
To change the link colours on the default Neopets navigation bar, use this code, changing out the attributes to the ones you prefer.

ul.dropdown {border: 1px solid #000000;background-color: #FFFFFF;}
li:hover ul.dropdown a, li.over ul.dropdown a {color: #000000;}
li:hover ul.dropdown a:Hover, li.over ul.dropdown a:hover {color: #FFCCFF;}



Navigation Link Padding
This will change the space between each of the Neopets default navigation links, making the bar shorter, or longer, if you prefer it that way.

li.nav_image {margin-left: 5px}


Position Navigation Bar
This code allows you to move the navigation bar to another position on the page. Change the top and left attributes to place it where you want it.

#template_nav{margin-left:-125px;margin-top:-40px;}


Remove Navigation Bar
Use this code to completely remove the navigation bar. If you do this, you need to add substitute links to all the links that are currently on the navigation bar.

.nav_image {display:none;}


Replacement Links
These are the basic links you'll need to add to the page if you decide to remove the navigation bar.

<a href="/myaccount.phtml">My Account</a>
<a href="/customise/">Customize</a>
<a href="/games/arcade.phtml">Games Room</a>
<a href="/explore.phtml">Explore</a>
<a href="/nf.phtml">New</a>
<a href="/petcentral.phtml">Pet Central</a>
<a href="/neoboards/index.phtml">Boards</a>
<a href="/mall/index.phtml">NC Mall</a>
<a href="http://nc.neopets.com/membership/">Premium</a>

Remove Stuff

Remove Header

#header {display:none;}


Remove Header, Leave Navigation

#header {visibility:hidden;}
#template_nav {visibility:visible;}


Remove Footer

#footer {display:none;}


Remove Header & Footer

#header, #footer {display:none;}


Remove Header & Footer, Leave Navigation

#header {visibility:hidden;}
#template_nav {visibility:visible;}
#footer {display:none;}


Remove Inner Background & Border

#main {background:none; border: 0px;}


Remove Horizontal Line

hr {display:none;}


Remove Banners

#ban, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .slug, .footOverlay {display:none;}
#main {margin-top: 0px;}


Remove New Events

.sf {display:none;}


Remove "Userlookup:Username"

.content div a img, .content div b {visibility:hidden;} .contentModule div a img, .contentModule div b {visibility:visible;}


Remove Nickelodeon Bar

.brand-mamabar {display: none;}

Text

These are the codes to change the font and link colors in your userlookup. Don't forget to check the bottom of the page for the individual properties you can use within these codes to define them more, so they're exactly what you want for your userlookup.


Link Changes



Font Changes



Specialty Font Changes



Module Text Changes



Now you can utilize the following properties by putting them into the code. After this properties list, you can see a completed, decked out text code!




And, at the end of playing around with the codes, you may have something that looks like this: