| Fade | Adding Pics | Table|

Backgrounds

1. How do I add a background? For your own background change this url http://images.neopets.com/backgrounds/tile4.gif to the url of your pic
   
   <style type="text/css"> body{background:url(http://images.neopets.com/backgrounds/tile4.gif)} </style>
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... Also check out the links on the right :)
3. How do I make that background fixed?
   <style type="text/css"> body{background:url(http://images.neopets.com/backgrounds/tile4.gif) fixed} </style>
4. How can I get a solid colour for a background? See left column for a list of colours
   
   <style type="text/css"> body{background:pink} </style>
5. How can I stop my background from repeating? And, and, be centered?
   <style type="text/css"> body{background:#ffffff url(http://images.neopets.com/backgrounds/sketch/800_chia.jpg) no-repeat center} </style>
6. How can I stretch my background?
   As far as I know you can't unfortunately

Links
back to top

7. How can I change the colour and font of my links?
   <style type="text/css"> a:link,a:visited{color:gold;font:9pt verdana} a:active{color:red;font:9pt verdana} </style>
8. How can I change the colour and font of my links in my guild?
   <style type="text/css"> a font,a:link,a:visited{color:gold;font:9pt verdana} a:active{color:red;font:9pt verdana} </style>
9. How can I change the background colour when I mouse over my links?
   <style type="text/css"> a:hover{background:gold} </style>
10. How can I make the text CAPITALS when I mouse over my links?
    <style type="text/css"> a:hover{text-transform:uppercase} </style>
11. 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 pink while the rainbow background loads.
    <style type="text/css"> a:hover{color:black;background:pink url(http://www.boomspeed.com/spacefreak/bg/rainbow.gif)} </style>
12. 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...
    <style type="text/css"> a:hover{border:4px dotted red} </style>
13. How can I get both a border and a rainbow background around my links when I mouse over them?
    <style type="text/css"> a:hover{background:url(http://www.boomspeed.com/spacefreak/bg/rainbow.gif);border:1px solid red} </style>
14. 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
    <style type="text/css"> #ol{background:hotpink url(http://www.boomspeed.com/spacefreak/bg/rainbow.gif)} </style>
15. 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
    <style type="text/css"> #ol{background:hotpink url(http://www.boomspeed.com/spacefreak/bg/rainbow.gif);border:2pt ridged pink} </style>
16. 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
    <style type="text/css"> #ol,a:hover{background:hotpink url(http://www.boomspeed.com/spacefreak/bg/rainbow.gif);border:2pt ridged pink;color:black;font:9pt courier} </style>

Text Areas
back to top

17. 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...
    <style type="text/css"> TEXTAREA,input{border:4px dotted red} </style>
18. 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
    <style type="text/css"> TEXTAREA,input{background:purple url(http://www.boomspeed.com/spacefreak/bg/rainbow.gif)} </style>
19. 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.
    
    <style type="text/css"> TEXTAREA{background:purple url(http://www.boomspeed.com/spacefreak/bg/rainbow.gif);filter:alpha(opacity=50)} </style>
20. How do I change the colour and size of my text in TEXTAREA? 9pt can be any size text like 10pt,12pt ...
    <style type="text/css"> TEXTAREA{color:hotpink;font:9pt verdana} </style>

Scroll Bars
back to top

21. 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.
    <style type="text/css"> body{scrollbar-face-color:red;scrollbar-shadow-color:gold; scrollbar-highlight-color:gold;scrollbar-3dlight-color:gold; scrollbar-darkshadow-color:gold;scrollbar-track-color:gold; scrollbar-arrow-color:black;} </style>

General Font Change
back to top

22. How can I change my font colour of my shop items? Neopets has disabled CSS in shops so can only change the font colour
    <body text=gold>
23. 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 ...
    <style type="text/css"> td,p,body{color:hotpink;font:9pt verdana} </style>
24. 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 ...
    <style type="text/css"> font{color:orange;font:9pt verdana} </style>
25. 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
    <b style=color:C000CC>Your Name</b>
26. How can I make my font glow?
    <style type="text/css"> td,p{filter:glow(color=red,strength=2)} </style>
27. How can I make my text centered?
    <style type="text/css"> p table{text-align:center} </style>

Image change and filters
back to top

28. How do you make your images glow on the edges?
    <style type="text/css"> img{filter:glow(color=hotpink,strength=2)} </style>
29. How do you invert your user lookup? Changes it to blue, try other filters by replacing invert with gray or xray
    <style type="text/css"> IMG{filter:invert} </style>
30. 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?
    <style type="text/css"> p img{filter:chroma(color=white)} </style>
31. How can I get rid of the white stuff around my shop items?Neopets has disabled CSS in shops, so you can't now.
32. How can I get rid of the box/border around my shop items? You can change #FFFFFF to any other colour
    <body link=#FFFFFF>
33. How can I get rid of the white stuff in all my images on the page?
    <style type="text/css"> img{filter:chroma(color=white)} </style>
34. 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.
    <style type="text/css"> TABLE{background:transparent} IMG{filter:chroma(color=#FFCC00) chroma(color=#F8FC60) chroma(color=#F8FC95) chroma(color=#FFFFFF) chroma(color=#F6EB69) chroma(color=#F2F054) chroma(color=#F8EC3C) chroma(color=#F8DC28) chroma(color=#F8AC40) chroma(color=#FFFF66) chroma(color=#C8CC50) chroma(color=#B8BC4E) chroma(color=#CAA100) chroma(color=#AC8B00) chroma(color=#FFCE00) chroma(color=#F7F7F7) chroma(color=#EFEFEF)} </style>
35. 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.
    <style type="text/css"> img{filter:chroma(color=#FFCC00) invert() chroma(color=black)} table{background:transparent} </style>
36. 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.
    <style type="text/css"> p img{filter:chroma(color=white)} </style>

Fade
back to top

37. 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
    <style type="text/css"> table{background:transparent} img{filter:xray alpha(Opacity=60, FinishOpacity=1, Style=3, StartX=0, FinishX=80, StartY=0, FinishY=80)} </style>
38. How can I make my table background transparent?
    <style type="text/css"> table{background:transparent} </style>
39. How can I make my GUILD faded? Opacity=90 - can be a number between 0 and 100
    <style type="text/css"> td table{filter:alpha(opacity=90)} </style>
40. How can I make my pics look transparent? To preserve the original colours remove xray
    
    <style type="text/css"> table{background:transparent} img{filter:alpha(Opacity=40) xray} </style>

Cursor change
back to top

41. 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
    <style type="text/css"> body{cursor:crosshair} </style>
42. How can I show my own cursor? make sure the pic is actually a cursor (you need an icon editor graphics program) and you have uploaded to the internet
    <style type="text/css"> body{cursor:url(http://www.boomspeed.com/spacefreak/cursors/illusen.cur)} </style>

Adding Pics
back to top

43. How can I get a picture into my user lookup, like where the words are? 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.
    <style type="text/css"> i.mypic{background:url(http://images.neopets.com/items/faeriepntbrush.gif);height:80;width:80} </style> <i class="mypic"> </i>
44. 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. Put the code about where you'd like the pic to appear. For more than one pic, change mypicline to mypicline2.
    <style type="text/css"> i.mypicline{background:url(http://images.neopets.com/items/faeriepntbrush.gif) no-repeat center;height:80;width:530} </style> <i class="mypicline"> </i>
45. 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.
    <style type="text/css"> i.anypic1{background:url(http://images.neopets.com/images/brush3.gif);height:80;width:80;position:absolute;top:200;left:300} </style> <i class="anypic1"> </i>
46. 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 :)
    <style type="text/css"> i.topbanner{background:url(http://www.boomspeed.com/spacefreak/bannerz/firescorchio.jpg); height:62;width:480;position:absolute;top:35;left:220} </style> <i class="topbanner"> </i>
47. 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 http://www.boomspeed.com/spacefreak/shieldz/redshield.gif to the url of your pic. Check out Bobbyroo's site for some great shields :)
    <style type="text/css"> i.shield{background:url(http://www.boomspeed.com/spacefreak/shieldz/redshield.gif);height:221;width:100;position:absolute;top:360;left:596} </style> <i class="shield"> </i>
48. How can I have a picture like a BLINKIE for my name on my user lookup? First change your full name to <u> </u> at your user info. Then add the following code to the 'About Me' box. 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 url http://jaynay.homestead.com/files/jaynayblinkie3.gif to the url of your pic. Do you want your own blinkie? Then check out blinkixi's pet page
    <style type="text/css"> u{background:url(http://jaynay.homestead.com/files/jaynayblinkie3.gif); height:60;width:110;text-decoration:none} </style>
49. 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
    <b style=color:C000CC>Your Name</b>
50. 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? Check out CssHelp's lookup!
    To put this blinkie as your name in your user lookup first change your full name to exactly (and only) <u>_Your**Name_</u> at your user info. Add the following CSS code into the 'About Me' box.
    <style type="text/css"> u{background:url(http://www.boomspeed.com/spacefreak/blinkies/queenfaeriedynamic2.gif) no-repeat;height:80;width:242;text-decoration:none;color:white;font:10pt courier;text-align:center} </style>

    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 <u>_Your**Name_</u> and the above CSS code wherever you want the blinkie to appear :)

51. 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/happy/kougra_plushie_baby.gif to the URL of your pic. Works best if pics dimensions are 150x150. More info on external style sheets in trouble shooting section.
    <link rel="stylesheet" type="text/css" href="https://www.angelfire.com/crazy/spacefreak/q.css"> I wish I was a kougra :) want to position a pic on your pet lookup? Then check out http://www.neopets.com/~csshelp - adding pic section :) <p> <img class=c src=http://images.neopets.com/pets/happy/kougra_plushie_baby.gif>

Table, table
back to top

52. How can I get a cool table? Like the one on this page?? Ah ha that's my secret I'll never tell!!

    Heh, actually you should check out the HTML table help at draac.com ... or maybe SpongieCutie's pet page :) ...

53. 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
    <style type="text/css"> b.tabledesc{width:530;border:1px solid purple;background:pink;filter:alpha(opacity=60)} </style> Also add this must be at the start of your user lookup <b class="tabledesc"> and this must be at the end </b>
54. How can I get the rest of my lookup words in a similar table? filter:alpha(opacity=60) makes it transparent
    <style type="text/css"> p table{width:530;border:1px solid purple;background:pink;filter:alpha(opacity=60)} </style>
55. 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.
    <style type="text/css"> td table{background:url(http://www.boomspeed.com/spacefreak/bg/purplebar.jpg) repeat-y right} img{filter:chroma(color=#FFCC00) chroma(color=#FFCE00) gray} p img,a img{filter:chroma(color=white)} p table{width:530;border:1px solid purple;background:pink;filter:alpha(opacity=60)} </style>
56. 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.
    <style type="text/css"> td table{background:url(http://www.boomspeed.com/spacefreak/bg/purplebar.jpg) repeat-y right} img{filter:chroma(color=#FFCC00) chroma(color=#FFCE00) gray} p img,a img{filter:chroma(color=white)} p table{background:transparent} </style>
57. How can I get my shop items in an awesome table like yours????? Add this to the very end of your shop description
    <center><body link=FFFFFF> <p><table cellpadding="20" cellspacing="20" border="1" background="http://www.boomspeed.com/spacefreak/bg/rainbow.gif"><tr><td bgcolor="white" align="center" valign="middle" colspan="2">