Customising User Lookups.

by: oddhatter

There are lots of user lookups out there that look somehow...different. How did they do that?...well, here's the basic tutorial. It will cover font and colour changes, and banner replacement and the such. Hope it helps.

The Neopet user lookups have HTML disabled, which means that you'll have to use stylesheets. A mistake that most people make with them is continually repeating the style tag, which is really quite unnecessary. For instance, have a look at the following code.

<style type="text/css"> body { background-color : #fff; background : url("http://www.catwatson.com/shing/neopets/me.jpg"); background-attachment: fixed; margin : 0px; padding : 0px; } A:link { color : #50720A; } A:active { color : #699410; } A:visited { color : #699410; } A:hover { background-color : transparent; color : #8C8900; text-decoration : underline; } td { color : 515151; font : 11px arial, helvetica, sans-serif; } </style>

Notice that the < style > tag only appears once. However, that code changes font and font colours, and background image and colour. To make it easier to understand, I'll break it down...

To make things easier, insert the line <style type="text/css"> into your user description. The following snippets of code go BETWEEN that tag and its closing tag. (which is </style> )

To change your background image, insert this into the description (like I said, between your style tags)

td { color : #515151; font : 11px arial, helvetica, sans-serif; }

The "td" selector means that everything covered by the "td"(a table tag) tag will have these colour and font attributes. In this case, #515151 is a dark grey and the font size and type is 11 point Arial. For future reference, using decorative fonts like Comic Sans, is NOT conducive to making your text readable. It is easiest and best to stick to a simple, clear font. You may have noticed that I added "helvetica, sans-serif in the font category. In case Arial is not present on a visitor computer, it'll use Helvetica, a close match. If neither is present, it will look for a sans-serif font, the font class that Arial belongs to. Replace the colour and font type/sizes with whatever you wish.

Now, your text colours have been changed...but what about the links? Here goes. I hope you haven't forgetton that all these go between the <style type="text/css"> and </style> tags.

A:link { color : #50720A; } A:active { color : #699410; } A:visited { color : #699410; } A:hover { background-color : transparent; color : #8C8900; text-decoration : underline; }

"A.link" refers to a link colour, "A.visited" a visited link's colour...and so on. Fairly self explanatory. You can change the settings in "A:hover" to make links look different when a mouse pointer is held over them. (if you're curious, the following code changed my links to varying shades of green.

To change my link colours to varying shades of green, I used the following code.(again, placed in my .css file.)

A:link { color : #50720A; } A:active { color : #699410; } A:visited { color : #699410; }

That does it for the very basic customisation of a user lookup. For more on customising your lookup, why not read the intermediate tutorial?