Customising Pet Lookups.
by: oddhatterFirstly, many thanks to bshaunae, who to my best knowledge, first thought of this idea.
First, we'll start with a nice, clean generic pet page. For the purposes of the tutorial, I'm using my Mutant Buzz'a StarzFaery's page.
A blank slate! (ignore the top of the picture)
You will need a plain text editor like Notepad or Araneae (do NOT use MS Word!). You should be able to find Notepad under programs>accessories on Windows operating systems. For the image replacement section, you will also need a customised picture of your pet, preferably at 150x150 pixels, though you can easily make other sizes work as well. You can get the blank round things from tazl.com. (note: her larger round circle is 200x200 pixels.) For this, you will also need a web host that will allow remote linking of pictures.=)
StarzFaery's customised lookup pic!
Since this is probably what most of you want out of this tutorial, let's start with the image replacement issue. First open a new, empty text file in Notepad and insert the following code into it.
The "img.a" refers to an selector, and "position", "top" and "left" are attributes, things that you don't NEED to know, but hey, it never hurts. =) You will then need to save it as a .css file. Just type the file name as whatevernameyouchoose.css when you save it. It will be automatically saved as a .css file.
Upload both the custom image and the .css file that you have to your server.
Then, it's on to edit your pet description! Insert the following code into your pet's description. Obviously, replace cssfile.css and custompicture.jpg with the respective URL's of your .css file and your custom picture.
Then, go look at your pet's lookup.=) If it doesn't work, check your URL's and whether your server allows remote linking. If your custom image was exactly 150x150 pixels, the size that the pictures Neopets uses are, it should line up fairly well. If your image was larger, you'll have to play around with the "top" and "left" attributes set in your .css file, as bshaunae did. This is the trial and error part. If you change your font and text sizes, you may have to change the orientation of your picture too.
Now...on to changing text colours and so on. A goodly number of people already know this from customising their user lookups, but in this case, we're not using embedded stylesheets(stylesheets used within the main HTML file) but external ones (stylesheets linked to from the HTML page, your .css file!). As such, you no longer need your "style" tags.
Go back to your .css file. The code I'm using for StarzFaery's page makes the text a dark grey, with an Arial, 11 px font. This is how it looks like. By the way, it goes into the .css file.
The "td" selector means that everything covered by the "td"(a table tag) tag will have grey text, in 11px Arial. You may have noticed that I added "helvetica, sans-serif" in. 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.
To change my link colours to varying shades of green, I used the following code.(again, placed in my .css file.)
For colour changes while hovering: (I think the "put in .css file" is a given by now=)) . My hover colour is a dark brown. (yes, I do like earthtones.) It also underlines, if you don't want it to, replace it with "none".
You can change the colours to whatever colours you want, it's a fairly self explanatory code.
Anyway, that's the basics for now. You can alter the code to replace your "neomail owner", "visit pet page" and battledome and petpet pics too; I'll add the codes for that a bit later.
StarzFaery's .css file!