Hyper Text Mark-up Language and Cascading Style Sheets Help Page.. or HTML/CSS Help Page | Go Straight to Quick Links for HTML/CSS Help |

Why look here instead of the Neopets HTML Guide? This webpage does not have the HTML codes you can learn in the Neopets HTML guide, for example, loading images, adding links, changing images into links and vice versa. Instead, we solve unsolved problems that some Neopians face, like having the text not aligned properly with the image, how to load a blinkie into your userlookup, and so on.

Quick Links Align your pictures with text - Fix it so that your text appears at near the top beside the image, not near the bottom. Change your font color and size - You can do this for your petpage, shop, userlookup, etc. Change your cursor - Instead of that pointy thinggy change your cursor to a more interesting one. Insert tables - Put tables on a page to make everything neat (like on this page) Something has happened! - Fool your webpage visitors with a fake Neopets "Something has happened! Fade the Borders of Your Images - Make the borders around the images go fuzzy Change the color of the scrollbar - Your scrollbar is that gray/blue thingamajig on the right --no html comments- that allows you to move up and down the page. Fixed Background - Fix it so that when you scroll up and down the page, your background stays in place (like on this webpage). Textboxes - How to make your own text boxes ******************************************* Align your pictures with text Use the code below and adjust accordingly. Back to Top <img src="http://www.mypage.com/myimage.gif" align="left"> Hello, this image should align to the left of the text! ******************************************* Change your font color, type, and size To change your font color, type and size for the whole page and not just a word or paragraph, use the code below. The color can be customised to whatever you like, the font size doesn't have to be 8pt, it can be 9pt, 10pt, 11pt... the font type is up to you. Back to Top <style type="text/css"> td,p { color:black;font:8pt arial } </style> ******************************************* Change your cursor (that thing you point with your mouse) If you don't want to have your normal cursor, you can change it to different types. Other types besides crosshair (the one in the code box) are e-resize, n-resize,sw-resize, hand and hourglass, but those are all the ones I know. There are probably more. Back to Top <style type="text/css"> body { cursor:crosshair } </style> ******************************************* Insert Tables on a Webpage I think this is taught in the Neopets HTML Guide, but I'll provide the code anyway. The table width, alignment (left, right, center), border size, border color and background color can be customised. Back to Top <table width="400" align="center" border="3" bordercolor="#000000" bgcolor="#FFFFFF"> <tr><td align="center"> Any content you type here will be inside the table. </td></tr></table> Any content here will not be in the table. ******************************************* Something has happened! Ever saw one of those prank "Something has happened" in a shop and thought "Wow, that's pretty cool, but NO ONE would fall for that! If I could make one of those, I would fool even the Neopets Team!"? You have? Well, if you don't know how to make one yet, here is one I came up with! ^_^ You can change the image source to suit your "something has happened" and the words, too, or just use the one I came up with, if you like. Back to Top <p><table align="center" width="400"><tr><td bgcolor="#ffffcc" width="400" align="center" colspan="2" cellpadding="3"><b>Something has happened!</b></td></tr><tr><td width="80"><img src="http://images.neopets.com/items/toy_kacheekpink.gif" border="1" height="80" width="80"></td><td width="320">You just found a MAGICAL red Kacheek Plushie! It's very rare, keep hold of it!<br></td></tr></table> ******************************************* Fade the borders of your images Do you want the borders of your images to become fuzzy and blurry? Use the code below - I think it will work for both your shop and userlookup. Back to Top <style type="text/css">p img{filter:Alpha( Opacity=90, FinishOpacity=1, Style=2, StartX=0, FinishX=100, StartY=0, FinishY=100)progid:DXImageTransform.Microsoft.glow (color=green,strength=7)}</style> The opacity levels, color and strength levels can be customised to suit what you would like it to be. ******************************************* Change the color of your scroll bar from plain gray to wacky colors Ever wondered how some people make their scrollbars colorful rather than that plain gray/blue one? They use this code: Back to Top <style type="text/css">body {scrollbar-face-color:green; scrollbar-arrow-color:white; scrollbar-track-color:white; scrollbar-shadow-color:green; scrollbar-highlight-color:gray; scrollbar-3dlight-color:white; scrollbar-darkshadow-color:green;} </style> The colors can be customised, of course. I'm not sure how the code I provided will turn out with the color combination of green, white and gray, because I didn't actually try it... you can have a look at my userlookup to see how MY scrollbar looks like. ******************************************* Have a "fixed" background To have your background stay in place while you scroll up and down the webpage (like on this webpage), add the line "bgproperties=fixed" after your background code. Code A is a HTML code for a fixed background (you can use it in your shop or petpage), and Code B is a CSS code for a fixed background (for use on a userlookup). Back to Top Code A: <body background="http://www.mysite.com/mybackgroundimage.gif" bgproperties="fixed"> Code B: <STYLE TYPE="text/css"> BODY {background-image: url(http://www.mysite.com/mybackground.gif); background-repeat: repeat; background-position: 1px 1px; background-attachment: fixed;} </STYLE> ******************************************* Make a Text Box If you want to make textboxes like the ones I use to put the codes on this site, you'll need to go to my brother's site! He explains it in full! Just click here, it'll open in a new window/tab! Back to Top *******************************************

Awards! Yay! Thank you so much to PrincessPooglies! We love the award!

This page was done up by ticketytock2kay to help her fellow Neopians. To link back to this page, feel free to use the code below! Copy this code onto your webpage: <br><div align="center"> <a href="http://neopets.com/~Keepsaker"><img src="http://i13.tinypic.com/2r2byna.gif" border="0"></a></div><br> More buttons and banners coming soon! Click on this Baby Lupe to return to Neopia!

Credits and Thank Yous Thank you to Pizzaroo, for their lovely line of delicious pizzas which ChubbyKacheeko has devoured day and night. Thank you to icey_diamond for her support... aheheheheh... I mentioned you, didn't I?