For the purpose of loading JubbyJubJack's guide faster, coding stuff has been moved here.
That way the original page contains only relevant content for those in search of dailies and NP.

Jump to: Step By Step Image Tutorial / Copy Paste Codes / neoHTML and Color Chart














How to Add Pictures: Step-by-Step

If you struggle with basic HTML and want to know how to put a picture on your page, I have created a basic walkthrough.
Just follow this guide and you should understand how to do it without signing up for anything or getting frustrated.

WARNING: You cannot put personal photos or inappropriate images on Neopets!
Make sure your picture is within the rules before beginning this tutorial.



Step One: You must find a place to put your picture. Images must be stored somewhere on the web in order to post them on Neopets. You cannot simply have them in your computer and expect to link to them from Neopets without any kind of host. Since mentioning outside links is against the rules, all I can tell you for this step is to use a search engine to find a free image hosting site. You should see something the picture to the left on any free image hosting site.

Step Two: Upload your picture and copy the link. Click 'browse' to get the picture from your computer. The screen shown below will pop up; simply find the file in your documents and hit "Open" to upload it.


Click "Host It" to upload your image. You will now see some textboxes with copy/paste codes for different things.

Step Three: Find the Direct Link code. Only use the direct link, no others! Keep this page up and open the page you want the code on.



Step Four: Copy, combine, and paste. Don't worry, this step isn't as hard as it sounds.



Copy the code above and paste it into the box to edit your lookup, or wherever you want the picture. IMG SRC is the HTML code for an image; it tells a computer the source of the image, or the place where it is stored. Border="0" means that the image will have no border. For my example, I will use a lookup. The box to paste information in looks like the screenshot below. Once you have pasted the code into your box, find IMAGEHERE.jpg. Go back to the image host page and copy the direct link code. Paste the entire direct link code in place of IMAGEHERE.jpg inside the quotes.




Click the "update" button and you should now have the image where you wanted it.
I hope this tutorial was helpful and clear.



Copy/Paste HTML Codes

A lot of people have questions about HTML and CSS. It is what you use to customize pages on Neopets. This section will not go too in depth, but it will provide codes and answers to common questions. All of these codes can be copied and pasted into shops, lookups, petpages, and pretty much any place on Neopets. It should be pretty easy to play around with these codes and make them the way you want them.

If you copy a code and change it and it does not work, read this before Neomailing me: Make sure you have replaced exactly what it says and nothing more. Make sure you have things inside quotes and have not accidentally erased anything. If there is an image in your code, make sure the image link works by copying it into your browser's URL bar. If you are copying an image link from an image-hosting site, make sure you are using the DIRECT link code. The codes should all work, but if you are having trouble and have read everything you can Neomail me.


Images
Use the following code:



What to Replace:
urlofimage with the image you want.
border=0 with number for a border.
.jpg with the file type of your image.
Links
Use the following code:



What to Replace:
link with the link location.
text with the text being linked.
You can only link to Neopets pages.
Linked Images
Use the following code:



What to Replace:
urlofimage with the image you want.
border=0 with a border number.
.jpg with the file type of your image.
link with the link location.
text with the text being linked.
HTML Background Image
Use the following code:



What to Replace:
urlofimage with the image you want.
.jpg with the file type of your image.
Put the code before everything else.

CSS Background Image
Use the following code:



What to Replace:
urlofimage with the image you want.
.jpg with the file type of your image.
Put the code before everything else.
Inlaid (Inner Table) Background
Use the following code:



What to Replace:
urlofimage with the image you want.
.jpg with the file type of your image.
This code works well in shops.
Put the code before everything else.
HTML Background Color
Use the following code:



What to Replace:
color with a color or hex code.
Put the code before everything else.
CSS Background Color
Use the following code:



What to Replace:
color with a color or hex code.
Put the code before everything else.
Inlaid Solid Color Background
Use the following code:



What to Replace:
color with a color or hex code.
Put the code before everything else.
Change Some Font Color/Style
Use the following code:



What to Replace:
color with a color or hex code.
face with the name of a font.
1 with a number from 1-7.
text is where your words go.
Change ALL Font Color/Style
Use the following code:



What to Replace:
color1 with a color or hex code.
font1 with the name of a font.
# with any number. Play around.
10 or 11 is a good size font.
For a basic font, try 'Verdana'.
Put the code before everything else.
Making Scrolling Text
Use the following code:



What to Replace:
text with your words.





Tables: One Cell
Use the following code for this:

cell 1



What to Replace: (In Order)
0 with a number for the border.
0 with a number padding.
0 with a number for spacing.
color with a background color.
content with everything inside table.
Tables: Two Cells Vertical
Use the following code for this:

cell 1
cell 2



What to Replace: (In Order)
0 with a number for the border.
0 with a number padding.
0 with a number for spacing.
color with a background color.
content 1 with stuff inside cell 1.
content 2 with stuff inside cell 2.
Tables: Two Cells Horizontal
Use the following code for this:

cell 1 cell 2



What to Replace: (In Order)
0 with a number for the border.
0 with a number padding.
0 with a number for spacing.
color with a background color.
content 1 with stuff inside cell 1.
content 2 with stuff inside cell 2.
Textboxes: For Petpages
Use the following code:



What to Replace:
Replace all [] with html brackets.
Change TEXTAREA to text_area.
Change /TEXTAREA to /text_area.
Just put your code imbetween tags.

Petpages mess up without _s!
Be sure to add them.
Textboxes: For Anywhere Else
Use the following code:



What to Replace:
Replace all [] with html brackets.
Just put your code imbetween tags.

No _s on non-petpages!
Be sure to not to add them.
Textboxes: With Colors
Use the following code:



What to Replace: (In Order)
80 with a # for width, if you want.
31 with a # for height, if you want.
color1 with the background color.
color2 with the text color.
color3 with the border color.
1 with a number for border.
solid can also be dashed or dotted.
font with a font name.
10 with a font size, if you want.
Replace all [] with html brackets.

On a petpage, add _s like before.
Making a Scrolling Div Box
Use the following code:



What to Replace: (In Order)
# with the width of the box.
# with the height of the box.
color1 with background color.
# for the width of the border.
solid with solid, dashed, or dotted.
color2 with the border color.
color3 with the color of text.
font with a font name.
# for size of the font. (Try 11.)
Making Vertical Space
Use the following code:



What to Replace:
Nothing needs replacing.
Put this where you want space to be.
Centering Things
Use the following code:



What to Replace:
Nothing needs replacing.
Just put EVERYTHING inside.



NeoHTML and Font Codes

This section should hopefully give you a decent understanding of how to make and edit fonts for the Neoboards. First of all, know that fonts are made using NeoHTML, which is COMPLETELY DIFFERENT from HTML used in lookups, etc. NeoHTML starts and ends all tags with [] brackets, not the carrots that normal HTML uses.

Every command for NeoHTML is called a tag. [b][/b], for example, is the tag to make font bold. NeoHTML is just like HTML in that you have to "sandwich" your tags when you use more than one. Tags must be closed.

Here is an example. This code, when pasted into NeoHTML, will give you bold, purple font.
[b][font c=purple]neoHTML[/font][/b]

NeoHTML must be put inbetween all your tags. It is where your text would go if you were writing out your font. See how the tag for bold font encompasses the tag for font color? This is what I mean by sandwiching. All the tags start and end, but tags are within each other to give more than one effect.

This can be pretty confusing, so of I will also offer a list of copy/paste codes for those who don't understand. All of these codes can be pasted into neoHTML or signature boxes. Signature appears underneath neoHTML.

Go here to edit your Neoboards font preferences!


Copy/Paste Font Basics

Make Font a New Color
[font c=purple]neoHTML[/font]
(Replace purple with your color.)		 Make Font a New Size
[font s=1]neoHTML[/font]
(1 is for tiny font; replace if you want.)		 Use Another Font Name
[font f=verdana]neoHTML[/font]
(Replace verdana with your font.)
Remember to only use basic color names!
Use a hex code if you want a specific color. 		Put Three Codes Together to Save Space:
[font c=purple s=1 f=verdana]neoHTML[/font]
(Replace all three things, like above.)
Align Font in Center
[center]neoHTML[/center]
(Nothing needs to be replaced here.)		 Combine Everything: Centered, Colored, Sized Font
[center][font c=purple s=1 f=verdana]neoHTML[/font][/center]
(Replace everything as in the previous examples.)


Getting Rid of the Dashed Line

This is a very common question! Learn how to do it.
-------------------------
So you want to get rid of that thing, right?
It's actually very simple.

Put [ after everything in your neoHTML box.
Put ] before everything in your signature box.

Hex Code Color Chart

Some premade colors for you to use. Hex codes are arrangements of numbers and letters that tell a computer the hue of a color.
Hex codes can be pasted after where it says c= in fonts. I have a few up here for you to use.

#FFFFFF #D1D1D1 #C0C0C0 #909090 #575757 #000000
#FFE3EF #FFBBD8 #FF8BBC #FF519B #FF056F #C00051
#FFCBCB #FF8181 #FF0000 #C00000 #860000 #560000
#FFD9C5 #FFAB7D #FF8949 #FA5800 #B23F00 #6A2500
#FFF2CB #FFE491 #FFC71D #DEA700 #A47B00 #684F02
#FEFFCF #FEFF95 #FFFF40 #DEE101 #A6A800 #656600
#E5FFBB #CEFF81 #B6FF43 #91EC00 #6DB200 #477400
#CBFFD6 #95FFAB #13FF45 #00CE2C #00901E #006014
#DDFFF5 #B3FFE9 #57FFCE #09FFB7 #00C68C #007855
#CBF8FF #B3F5FF #6FECFF #00C8E6 #009BB2 #006978
#D9DAFF #CBCDFF #9194FF #0000FF #0005CA #00037E
#E4CFFF #D4ADFF #BA7DFF #9239FF #6500E2 #45009A
#F4D9FF #EBBBFF #D97DFF #C539FF #9800D8 #63008C



NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions