Site hosted by Angelfire.com: Build your free website today!
navigation

- CSS/HTML Guide
- Banners
- Guild
- Guild Webpage
- A-Hit
- Neopet emotions

Quick links

- Backgrounds
- Color
- Links
- Text Areas
- Scroll Bars
- General Font Change
- Image change and filters
- Fade
- Cursor change
- Adding Pics
- Table
- Misc. changes
- Premade Lookups
- Trouble Shooting
- Link to this page

SpookGod the almighty

Beautify Neopia by using the CSS codes here to update your user lookups, pet lookups, pet pages, guilds and shops.

Get free blinkies from _space_freak_

Get your free bannerz from _space_freak_

Saving the Slorgs of Neopia

A-HIT Anti-Hacker Iniative

What should I work on next?
More games :)
A special council area
A HTML and CSS guide
Neopet game stratagies and help
Buying guild prizes
Other fun stuff (e.g. Crosswords)
Backgrounds
Banners
Other (neomail me)

View the results
... welcome ...

Hi, most of my codes here are actually using CSS but if you want the code in HTML format, Neomail me and i'll send it to you ASAP.

However any HTML needs or worries you may have should be answer by the Neopets HTML guide

As this page is big either use the quick links to the left or press ctrl+F and type in your specific need (e.g. "music" with out the "" will tell you how to put music into your shop/petpage).

Enjoy.

    Backgrounds

  1. How do I add a background?
    For your own background change this url http://images.neopets.com/backgrounds/tile2.gif to the url of your pic

  2. Where can I get a background from? Check out google.com find a pic you like and upload it to your own image host (Angelfire is good because unlike Geocities it allows you to use those pictures on a foreign site like Neopets)
  3. How do I make that background fixed?
  4. How can I get a solid colour for a background? See left column for a list of colours

  5. How can I stop my background from repeating? And, be centered?
  6. How can I stretch my background?
    As far as I know you can't unfortunately
  7. Color
    back to top

  8. Where can I find all of the colors that I can use without using a HEX code? And how to use them? (easy use of colors)
    I have made a useful chart with all the colors and their names for you. Go to my color table to find out what color you need
  9. Where can I find color HEX codes? And how do I use them? (harder use of colors)
    I have made a useful HEX color chart with all the colors and their codes for you. Go to my HEX color table to find out what color you need
  10. I need a color but your chart doesn't have it on, is there anyother way of finding out what the code for my color is?
    Yes there is. Just for you I have made a special toy whith which you should be able to find any color that you want. Go to my Color Wheel to be amazed
  11. Links
    back to top

  12. How can I change the colour and font of my links?
  13. How can I change the colour and font of my links in my guild?
  14. How can I change the background colour when I mouse over my links?
  15. How can I make the text CAPITALS when I mouse over my links?
  16. How can I get a (rainbow) background when I mouse over my links? The font colour is set to black but you can change that to whichever colour. The background colour is set to gold while the rainbow background loads.
  17. How can I get a border around my links when I mouse over them? 4px:- is the size, can be any number .... dotted:- can be solid,dashed,ridge ... red:- is the colour...
  18. How can I get both a border and a rainbow background around my links when I mouse over them?
  19. How can I get a rainbow background over the left side table when I mouse over them? You need to have faded images first - see fade section
  20. How can I get a rainbow background and border over the left side table when I mouse over them? You need to have faded images first - see fade section, also experiment with the border as not all bits may show
  21. How can I get a rainbow background and border over ALL my links, including the left side table when I mouse over them? You need to have faded images first - see fade section, also experiment with the border as not all bits may show
  22. Text Areas
    back to top

  23. How can I get a border around the text area .... and input (buttons)? 4px:- is the size, can be any number .... dotted:- can be solid,dashed,ridge ... red:- is the colour...
  24. How can I get a different background in my text area .... and input (buttons)? Defaults to a purple background until the rainbow.gif is loaded as the background
  25. How can I make my TEXTAREA transparent? Defaults to a purple background until the rainbow .gif is loaded as the background. Opacity=50:- can be any number between 0 and 100.

  26. How do I change the colour and size of my text in TEXTAREA? 9pt can be any size text like 10pt,12pt ...
  27. Scroll Bars
    back to top

  28. How can I have coloured scroll bars? Only works with Internet Explorer web browser at least IE5.5. I don't think this code works with Netscape.
  29. General Font Change
    back to top

  30. How can I change my font colour of my shop items? Neopets has disabled CSS in shops so you can only change the font colour
  31. How can I change my font and font size in my pet page, userlookup or any other web page?? Change verdana to whichever font you want, arial, courier, time; 9pt can be any size text like 10pt,12pt ...
  32. How can I change the font of the gender word "Female" or "Male".Change verdana to whichever font you want, arial, courier, time; 9pt can be any size text like 10pt,12pt ...
  33. How can I change my name or any word/sentence to a different colour? For your name add the following code to your full name in your user info, for a different word add it to the "about me" box. Change C000CC to the hex colour you want or named color eg lime and change "Your Name" to your name or any other word
  34. How can I make my font glow?
  35. How can I make my text centered?
  36. Image change and filters
    back to top

  37. How do you invert your user lookup? Changes it to blue, try other filters by replacing invert with gray or xray
  38. How can I get rid of the white stuff around my shield and trophies on my user lookup or get rid of the white stuff around my pet and petpet on my pet lookup?
  39. How can I get rid of the white stuff around my shop items?Neopets has disabled CSS in shops, so you can't now.
  40. How can I get rid of the box/border around my shop items? You can change #FFFFFF to any other colour
  41. How can I get rid of the white stuff in all my images on the page?
  42. Hey, how did you change the colour of your left hand side bar? The side bar will be transparent, so you'll see your background behind it.
  43. Here's a slightly different take on the transparent left side barIt's rather blue but the side bar will be transparent, so you'll see your background behind it. You can change invert to gray or xray. Try changing black to white also for different effects.
  44. Hey I've added the code above to make my left side bar transparent but I don't want that effect on my shield/trophies/pet or petpet etc what can I do? Just add this "get rid of white stuff" code underneath. If you want to access the neopets top banner change ... p img{ ... to ... p img,a img{ ... If you don't want to get rid of the white stuff then change ... filter:chroma(color=white)} ... to ... filter:none} ... Neopets has disabled CSS in shops.
  45. Fade
    back to top

  46. How can I make my pics faded? Opacity=60 - can be a number between 0 and 100 ; Style=1 for a right hand side fade; Style=2 for circular fade; Style=3 - for rectangular fade; remove xray if you want to keep the yellow colour
  47. How can I make my table background transparent?
  48. How can I make my GUILD faded? Opacity=90 - can be a number between 0 and 100
  49. How can I make my pics look transparent? To preserve the original colours remove xray

  50. Cursor change
    back to top

  51. How can I get a crosshair cursor? change crosshair to hand,e-resize,n-resize,sw-resize etc. For mouse over change body to a:hover
  52. Where can I get more cursors? Go to Soupfaerie.com to get 100s of cool cursors
  53. Adding Pics
    back to top

  54. How can I get a picture into my user lookup, like where the words are? (this has to be one of my favourite codes)Change the height and width values to the height and width of your pic. Put the code about where you'd like the pic to appear. For more than one pic, change all mypic to mypic2.
  55. How can I get a picture into my user lookup, like where the words are, but so it will take up the whole line and be centered? Change the height and width values to the height and width of the line, you may need too experiment. Change the url to the pic of your choice. Put the code about where you'd like the pic to appear. For more than one pic, change mypicline to mypicline2.
  56. How can I get a picture into my user lookup, and put it anywhere in my lookup? Change the height and width values to the height and width of your pic. For more than one pic, change all anypic1 to anypic2. To position it, change the left and top values, left=0 and top=0 would be the top lefthand corner.
  57. How can I get my own top banner? Change the height and width values to the height and width of your pic. To position it, change the left and top values, left=0 and top=0 would be the top lefthand corner. Want FREE top banners with code? _flaming_punch_'s free banners can help :)
  58. How can I get my own shield/badge/3 year thing in your lookup? The pic you use must be at least these dimensions, width=100 and height=221. This is because the shield changes positions slightly between viewing using random friend or the search bar. Make sure the height and width values are the height and width of your pic. To position it, change the left and top values, where left=0 and top=0 would be the top lefthand corner. Change https://www.angelfire.com/hero/spotty_bum_tia/meriwar6.gif to the url of your pic. Check out Bobbyroo's site for some great shields :) and also rvdv's shields
  59. How can I have a picture like a BLINKIE for my name on my user lookup? First change your full name to at your user info. Then add the following code to your chat profile. Change the height and width values to the height and width of your pic. You can leave in your name if you just want to add a pic. Change the "add your url here" to the url of your pic. Do you want a blinkie? For better help and for some blinkies go to sunshinejenny's
  60. How can I change my name to a different colour? Add the following code to your full name in your user info. Change "C000CC" to the hex colour you want and change "Your Name" to your name :P
  61. What's a dynamic blinkie? I can type whatever I want in this blinkie??

    This is a special blinkie where you can write in your own name! But you do need to follow these instructions! Want to see a working example? Click here
    To put this blinkie as your name in your user lookup first change your full name to exactly (and only) at your user info. Add the following CSS code into the about me box.

    You can change the words but you MUST use exactly 12 characters (because there are 12 blinkie blocks). The font MUST stay the same. You can change the text color, white, to any other color. To put this blinkie anywhere else (guild/shop) put this bit and the above CSS code wherever you want the blinkie to appear :)

    For great help with dynamic blinkies and loads of them go to blinkixi's homepage

  62. How can I position a pic in my pet lookup? You can use an external style sheet. Change this URL http://images.neopets.com/pets/hit/kougra_baby_right.gif to the URL of your pic. Works best if pics dimensions are 150x150. More info on external style sheets in trouble shooting section.
  63. Table, table
    back to top

  64. How can I get a cool table? Like the one on this page?? Wouldn't you like to know, Muahaahaahaa. Well if you ask nicely I might tell you...

    Also if you don't like asking politely you could check out the HTML table help at draac.com.

  65. How can I get my words in my user lookup to display, like, in a table? filter:alpha(opacity=60) makes it transparent. Make sure you scroll all the way to the bottom for all the instructions :P
  66. How can I get the rest of my lookup words in a similar table? filter:alpha(opacity=60) makes it transparent
  67. How can I get my own background in the left side bar? Use this code if you want tables around your lookup stats/trophies etc.
  68. How can I get my own background in the left side bar? Use this code if you don't want tables around your lookup stats/trophies etc.
  69. How can I get my shop items in an awesome table like yours????? Add this to the very end of your shop description
  70. How can I get my pet lookup in an awesome table like your pets????? Add this to the start of your pet lookup description
  71. How can I get rid of the box around my pets stats in my pets lookup?
  72. How can I position a table so I can make like a guild second council n stuff?? You may need to change the values of left and top to position the table properly. Change red and black to the colours of your guild. Change ALL occurences of spookie2 to your members names and guild leader in bottom case.
  73. I need to know about BLOG's? How can I have one in my guild or shop?

    The best place to go for premade ones especially shop ones and help is crazeydragon.com

    Misc. changes
    back to top

  74. How can I get music into my shop/pet lookup? Use this code and replace https://www.angelfire.com/hi3/dedicatedtomyboo/lenstealsunshine1.mid with the url of your music. Midi's work well in Neopets. Go to lauras midi heaven for a great selection
  75. How can I have spaces or paragraphs in my user lookup like yours?

    Ok add this bit of code You may need to change 530 to a bigger number if you have a smaller font or a smaller number if you have a larger font ... experiment

    Then add this bit of code EVERY place you want a space or carridge return.

  76. How can I put a cool counter up?

    Well that's pretty simple just go along to http://okcounter.com/index_english.html and join up! You can choose what sort the counter pic will look like and they will give you the HTML code!! - 10 Oct 02 - Unfortunately it looks like you have to pay if you want an okcounter counter ... or try boingdragon.com details below.

  77. But, but, how can I put a cool counter up in my user lookup?

    Well that's a bit more tricky but not too hard, you have to use CSS. So follow the same instructions above, get the HTML code, now you want the URL of the counter pic in the HTML code, it will look similar to this http://okcounter.com/count.html?id=999999 ... You may need to change the height and width values. Put the code where you want the counter to appear. You NEED to put that you got the counter from okcounter.com somewhere on the page, or else they may terminate your account.

  78. How can I put a cool free counter up?

    Well that's pretty simple just go along to http://boingdragon.com and sign up! You can choose what sort the counter pic will look like and they will give you the HTML code!!

  79. But, but, how can I put this cool free counter up in my user lookup?

    Well that's a bit more tricky but not too hard, you have to use CSS. So follow the same instructions above, get the HTML code, now you want the image URL of the counter pic in the HTML code, it will look similar to this http://cgi.boingdragon.com/count/yourusername/0.gif ... You may need to change the height and width values. Put the code where you want the counter to appear. You NEED to put that you got the counter from boingdragon.com somewhere on the page, or else they may terminate your account.

  80. How do you create (new battledome challenger) for your pets lookup? Change SpookGod to your pets name. Change scorchio_red to your pet species and colour eg aisha_faerie ... chia_tomato
  81. How do you create a "Something has happened" box?The example below is one I made up :)
  82. Ok, I want to learn more about this code, I want to understand how it works? Learn even more at W3School.

    Trouble Shooting
    back to top

  83. When I enter in some code I get this weird neoHTML error??? And how do I get a Sig, Siggy, Signature??

    If you update your chat profile without updating your default neoHTML, neopets will default a value of 'none' in for your neoHTML ... problem is that if you try to update your user lookup again you'll get a neoHTML error... i've reported it to Neopets :)

    SOLUTION:- (this gives you a siggy in the chat boards)Put in a default neoHTML code ... Enter the neoHTML in the "Default neoHTML" box on the chat page.

    [font s=2 c=lime f=courier]neoHTML[/font][sub]my sig[/sub]

    s=2 ... size of the font
    c=lime ... colour of the font
    f=courier ... font face (font name can only be one word eg script,arial,terminal,verdana)
    sub ... subscript
    my sig ... where you put your signature (short message posted after every message you write)

    [font c=hotpink][b][sup]neoHTML[/sup][/b][sub]neopets.com/~csshelp[/sub][/font]

    sup ... superscript
    b ... bold

    [glow s=3 c=indigo][b][font c=white]neoHTML[sub]*meep*[/sub][/font][/b][/glow]

    glow ... make it glow ... heh
    s=3 ... size of glow
    c=indigo ... glow color
    c=white ... font colour

    [shadow s=3 c=red][b][font s=2 c=black]neoHTML[/font][/shadow][sub]*ghost*[/sub]

    shadow ... drop shadow
    s=3 .. size of shadow
    c=red ... colour of shadow
    *ghost* ... puts a little ghost pic at the end of all your posts

    [sub]csshelp:[b][font s=3 c=violet]neoHTML[/font][/b][i]-PS ILOVEU!:P[/i][/sub]

    This neoHTML has a sig before and after!

  84. I put in your CSS code, but it didn't work?

    Ok, the problem with CSS code is that it can only appear once, if it appears more than once then the last bit of code is usually used. For example if you use this bit of code...

    Then the second picture error_back.gif would be the background not error_title.gif.

    SOLUTION:- Delete all former codes, add new codes ... or ... save all old codes ... then remove the old codes and add the old and new codes back one by one to see the effects

  85. I put in that mouseover code for a rainbow background but it doesn't work over the left side table like it does with your user lookup, why????

    Ok, this is a similar problem to the one above ... first off the left side bar MUST be in some way faded or the yellow bits removed (chroma). If you have done that and it still doesn't work then you may have defined the code like this...

    In this case the border will probably show, but the rainbow bit won't entirely ...

    SOLUTION:- you need to change the code to one line ... eg

  86. I copied the code correctly but my pic still doesn't show!!??

    Ok what usually happens is the website where the pic is doesn't allow remote image linking. So if you have your pic at geocities.com it won't show. However I think angelfire.com does allow it.

    SOLUTION:- You need to upload the pic to a place that does allow remote image linking, the best pace I had found was your guild's photo gallery (but Neopets has forbidden that now), more help at Garaneno's Graphic Tips page. The other places you have to pay unfortunately ...

    Once you've uploaded the pic right click it and choose properties to find the URL

  87. I copied the code correctly and my pic shows fine but other people have said they can't see it?? why??

    Ok you most probably have your pic stored on your home pc, it needs to be on the internet for people to see it. The other case is because the website doesn't allow remote image linking. So if you have your pic at geocities.com or angelfire.com it won't show.

    SOLUTION:- You need to upload the pic to a place that does allow remote image linking, the best pace I've found is your guild's photo gallery, more help at Garaneno's Graphic Tips page. The other places you have to pay unfortunately ...

    Once you've uploaded the pic right click it and choose properties to find the URL

  88. How can I have music in my user lookup?

    Sorry neopets changed it so you can't enter those html tags in anymore, so no you can't have music in your user lookup... some people used html before neopets changed it so that's why theirs has music :(

  89. How do you make the CSS and HTML code show up in those tables / boxes on this page??

    Use HTML - T E X T A R E A without the spaces see www.draac.com for more ... on pet pages you have to type T E X T _ A R E A without the spaces to make it work

  90. What's the code for disabling the right click so people can't steal my source code or pictures??

    This is javascript but I recommend that you don't use it because it is annoying and does not stop people from stealing anything. Anyone can copy your code unfortunately.

    To stop people from copying and using your pictures, it is best to cutomise it to you by writing your name on it some how. You can write on the page "Please don't steal my pics" etc and that can help but it won't stop everybody. It can be quite distressing when you see someone has stolen your pic, try asking them nicely to stop.

  91. What's the code for popups???

    Arrgggghhhh, popups are annoying, if i come across a page with popups i leave and never return!! No way am I giving anyone this code :P (see javafile.com if you really them want though)

  92. Why don't style tags or link tags work in shops anymore???

    Neopets have disabled it to stop scammers, sigh. Now we can only use HTML.

  93. How do you do an external style sheet?

    To learn how to use external style sheets ... Basically you put all your CSS code (except the style tags!) into a text file and save it as c.css or similar. Then upload this file to your website. Then link to that file using the code at w3schools.

    Link back to here
    back to top

  94. How can I link to this page from my user lookup???
    All I ask you to do is put this small picture somewhere on your page Spookie Team's HTML/CSS help.
  95. But I dont want a picture!!!
    Well then all you have to do is provide a text link back to this page :)