info
If you couldn't tell from the title of this guide, this page is here to help you add a little flair to your user lookup by changing your userinfo icons (trade, auctions, wishlist, neomail, neofriend), shield, & collection icons. If you are particular about browser compatability like me, then you should know that the code is now changed to be compatible with all browsers. Enjoy the guide and feel free to neomail me if you have any questions or comments (or suggestions!).

CONTACT

http://www.neopets.com/
neomessages.phtml?type=send&recipient=soggytacos
Copy & paste in your browser's address bar

LINK BACK

LISTED AT

STEP ONE

This is what you have right now or something close to it. The next part is something you are going to have to do on your own: customize your modules to how you want them to be. This portion of the guide will show you how to change those icons into your own images!

I will be using photoshop for my examples but you can probably do the same in any photo editing software you own! (even MS paint)

STEP TWO

There we go! Now we can move on to remove certain elements and creating our images.

If you were curious on how I coded my modules:
(this code is not required in order to edit your icons!)

STEP THREE

Now let's get rid of that grey line there. If you want that line there, ignore this code.

#userinfo table table table {
border: 0 !important;
}

STEP FOUR

This is the code to remove the images:

#userinfo a img {
visibility: hidden;
display: table-cell;
height: 65px;
}

1. visibility: hidden; hides the images.
2. display: table-cell; is necessary so that the links are still clickable (this code should work in all browsers. Positioning is slightly off on IE.
3. height: 65px; sets the height of the links. Play around with the height to get the right look for your lookup.

STEP FIVE

Take a screenshot of your module and paste onto your photo editing software. Using a screenshot allows you to position your images correctly! Keep in mind, if the width of your module changes you're going to have to change the position of your images again.

STEP SIX

Crop the image down and prepare to code it onto your user lookup. I like to have a transparent background on my image just in case I want the module background to be something other than white. But you can leave it white if you want :)

Save and upload the image onto an image hosting website.

STEP SEVEN

#userinfo table table table {
border: 0 !important;
}
Remember this code?
#userinfo table table table {
border: 0 !important;
background: url(IMAGEURL) no-repeat 6px 25px;
}
Change it to this.
1. The first number is horizontal positioning.
2. The second number is vertical positioning.
You are done coding! This is what your CSS should look like (without your own coding of course)

FINAL

This is what your module should look like when you are done!

STEP ONE

Was the above guide too complicated? Do you want a more simplistic approach to the userinfo icons? Well this part of the guide is just for you! All the icons will be the same image keeping a minimalistic style.

This is what you have now.

STEP TWO

Go ahead and customize your modules to your liking.

If you were curious on how I coded my modules:
(this code is not required in order to edit your icons!)

STEP THREE

Now let's get rid of that grey line there. If you want that line there, ignore this code.

#userinfo table table table {
border: 0 !important;
}

STEP FOUR

This is the code to remove the images:

#userinfo a img {
visibility: hidden;
display: table-cell;
height: 65px;
}

1. visibility: hidden; hides the images.
2. display: table-cell; is necessary so that the links are still clickable (this code should work in all browsers. Positioning is slightly off on IE.
3. height: 65px; sets the height of the links. Play around with the height to get the right look for your lookup.

STEP FIVE

You're going to go crazy when you see how easy this is :P

Go to your favorite photo editing software and create an image. You don't have to have a transparent background, but I like to just in case I change the module background color.

Save then upload onto an image hosting website.

STEP SIX

#userinfo td td td {
background: url(IMAGE URL) no-repeat center 20px;
}
Now the magic code.
1. center refers to your horizontal positioning.
2. 20px refers to your vertical positioning. Not necessary, but nice.
This is what your code should look like right now (minus your codes, of course)

FINAL

This is what your module should look like when you are done!

STEP ONE

The shield guide is designed to work with the userinfo code as well. First thing we are going to do is to remove the image:

#userinfo img {
visibility: hidden;
}

STEP TWO

Now it is time to create your shield! I made mine with a transparent background, but you don't have to.

Please follow neorules when creating your shield. Do NOT falsify your stats by creating an "older" shield. Changing your shield is only used for the purpose of matching the theme of your user lookup.

STEP THREE

#userinfo .contentModuleContent {
background: url(IMAGE URL) no-repeat 250px 30px;
}
Now for the code!

This is what you should have in your CSS to change your shield. Whether you changed your userinfo icons or not, this code works.

If you do NOT want to change your userinfo icons add this code:

#userinfo a img {
visibility: visible;
}

FINAL

This is what your module should look like when you are done!

back to the top
icons (full) - icons (single) - shield - collections

STEP ONE

I don't usually change my collections images, but it was a request from several people, so here it is!

First, removal code:

#usercollections img {
visibility: hidden;
}

Second, use this code so that your links will still work:

#usercollections a img {
display: table-cell;
height: 35px;
}

STEP TWO

Now to add the image to your collections module:

#usercollections .contentModuleContent {
background: url(IMAGE URL) no-repeat 45px 13px;
}

Keep in mind that when you change your avatar, you have to change it on your background image. It will not change automatically.

Also, for IE users, positioning is slightly off so you'll have to adjust the numbers to accomodate all browsers.

back to the top



Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions