Welcome
[scene] You are sitting at your computer desk staring at your awesome pets/stats. You ponder, "How can I enhance the awesomeness of my userlookup?
Well, that's easy. Just read this guide! Coding userlookups can be difficult at first, but all you need to know is your coding basics and an understanding of all the elements on the layout.
I've been making userlookups for approximately 6 years now, so I have established a thorough understanding of coding them. After going on hiatus and coming back, I thought to myself, "Why don't I share the knowledge I have with others who would probably love to learn?". So here we are, a guide dedicated to userlookups!
Rules
Before we start the guide, you must know the rules involved in editing your userlookup.Things you can remove
- Header/Footer (navigation required)
- Shop/Gallery (links required)
- Neohome (link required)
- Habitarium
- NC Mall
Other Rules
- All your stats must be shown with the exception of what is posted above
- Do not put anything offensive on your userlookup (religious, adult, violent, etc.)
- Do not post off site links/urls
- For your safety, do not post any personal information
- You can cover your shield but as long as it is original artwork/graphics (ie, you cannot replace a 3 month shield for a 9 year one)
- You cannot steal artwork/graphics and claim them as your own
- You cannot post personal pictures of yourself or others
- No fake and misleading items or random events
Basic
You didn't think I would make an ultimate userlookup without giving you a crash course on CSS/HTML, didya? I didn't think so. Feel free to skip this section if you are a little more advanced in your coding skills, but you probably can't read this sentence because you have done so already.Here is the break down of this section: Basic HTML, Basic CSS, DIVs/IDs, Modules, Links.
Basic HTML
Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Italic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Underline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Links
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Lists
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Tables
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Colors
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Basic CSS
Backgrounds
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Font/Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Borders
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Margin/Padding
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Positioning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
DIVs/IDs
Header/Footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Main
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Other
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Modules
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
body {
background: #000;
}
background: #000;
}
Removal
Header/Footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Userlookup: Username (?)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Horizontal Rule in Trophies/Neopets
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Grey Line in Userinfo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Neohome/Habitarium/NCmall
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Advanced
Neopets Navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
List Navigation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Change Shield/Userinfo Icons/Collections
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Neopets Hover Effect
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Cropping Neopets Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Adding DIVs/IDs & Positioning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Positioning All Modules
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In libero mauris, dictum et consectetur at, vehicula eget lorem. Integer vel ligula in magna congue commodo. Nulla nec nibh in ligula semper malesuada. Nulla at ipsum sit amet est porttitor porta. Vivamus laoreet, quam sed aliquet ullamcorper, tellus velit dictum nunc, vitae ornare sapien sapien at nisi. Morbi ornare libero ac sapien faucibus interdum. Phasellus sit amet nunc metus, nec faucibus lorem. Etiam fermentum, lacus vel fermentum tincidunt, urna dolor auctor dolor, a rhoncus est lectus nec dui.
Premade Userlookups
CSS
Simplicity at its best! Although there is a small graphic on here, I think I'll categorize it under CSS since it is mostly designed that way. These layouts are a nice and simple way to show off your userlookup and stats. This person also has a request option on their site (please make sure their requests are open before neomailing them!)
In the general population of Neopia, this is probably one of the most popular sites to go to for CSS premades (and a few graphic premades). There is a reason for that! Great layouts, great colors. The name of the site is easy to recognize and the site has a very fun layout :)
I wasn't sure whether to put this under CSS or Graphics, so I just chose CSS to even things out :X Great simple CSS layouts.. and the best part is that Trapeze even has some layouts with custom userinfo icons and shield! Although, to make it work in Chrome and get rid of the gray line, *cough* check this site out.
These CSS lookups are so cool and original. I definitely recommend these :) Although, make sure you change {style} and {/style} with the appropriate tags. That confused me for a second when I previewed the layouts lol.
Morgan's CSS showcases seven different userlookup styles with various color palettes. All of them unique, simple and aesthetically pleasing! Like most CSS based layouts, these layouts give you the opportunity to edit and change the colors to your liking. Don't forget to leave credit if you do.
Yay, more CSS userlookups! One important thing to showcase on this site is the neo-popular code to crop your neopets. Don't forget to check out the other layouts this site offers!
.
Graphics
This site has probably the best graphics so far for premades. The best thing about the graphics is that they are not overpowering the rest of the layout. Not only is this site good for userlookups but also petpages, petlookups & guild layouts!
I'm pretty ignorant when it comes to anime but I know good and beautiful design when I see it. The images and colors used are stunning! They have a couple neo-related lookups but nothing compared to their anime themed lookups.
Are you looking for high quality neo-related lookups? This is a site to check out. Not only is the site itself nicely designed, all of their premades are as well! My favorite part about this site are the themed layouts based on avatars :)
Lets take it way back with these old school sidebar layouts! Just make sure you follow the instructions on the site or the layout will not work properly.
I put this site up here because it is rare to find premade lookups that are a full page design. Modules are moved around and every premade is different! Make sure you follow the instructions on the top of the page for the lookup to work properly.
I picked this site because their layouts are so unique! I really enjoy the links on the right tying to the image.
.
Sitely
Sister Sites
Affiliates
Linked @
Link Back