Navigation
Glossary of Terms
List of NeoHTML Tags
List of NeoHTML Fonts
List of Smiles
Hex Code Chart
Step-by-Step Guide
Removing/Changing Siggy Lines
Making Text Invisible
Making Rainbow Fonts
Hiding Your Active Pet
NeoBoard Pens
Getting Custom Colours
Example Font
Helpful Links
Link to Us
Legal Stuff

Introduction

Is your font bland? Is it one of those fonts you copy pasted from a website that everyone and their mother has? Or did you try to make your own font, only to have it turn out looking like a piece of dung? Well, this page can help! Learn how to make your own font, to your specifications. On this page I'll show you the basics of font making, the lingo to use, walk you through making a font, and get you in on some secret techniques. Now no one in Neopia has an excuse to have an ordinary font! What are you waiting for? Let's get started!

Glossary of Terms

Term
Definition
Avatar
Image to the left hand side of where you post on the NeoBoards
Chat Smile
Small image that can be used in a post; most are a different emotion
Font
A certain look of writing on a computer; the look of a text
Hex Code
A series of numbers and letters representing a certain colour
NeoHTML
Neopets special type of HTML used for the NeoBoards
NeoTitle
The short phrase under your username on the NeoBoards
Siggy
Any material following your message on the NeoBoards [The Neopets' staff does not support this term, they instead refer to it as a "signature"]
Siggy Line
Line between your message and your signature on the NeoBoards
Siggy Pet
Image formed by different characters, usually located in someone's siggy
Siggys
Plural form of any material following your message on the NeoBoards (notice it is not 'ies')
Tags
Usually a pair of 2 commands (enclosed in brackets in the case of NeoHTML) in which the text in between is affected by the type of command the tag uses


^ back to top ^

NeoHTML Tags

NeoHTML Tag Start
NeoHTML Tag End
NeoHTML Tag Use
[b]
[/b]
Makes font inside tags bold
[br]
-none-
Creates a line break
[center]
[/center]
Makes font inside the tags centered
[font]
[/font]
Base code for any font change
[i]
[/i]
Makes font inside the tags italicized
[p]
-none-
Creates two line breaks
[sub]
[/sub]
Makes font inside the tags into subtext
[sup]
[/sup]
Makes font inside the tags into superscript
[u]
[/u]
Makes font inside the tags underlined

Font Extension Extension Use
c={Colour Name or '# + Hex Code} Changes colour of text
s={Size} Changes size of text
f={font name} Changes font of text


^ back to top ^

NeoHTML Fonts
Some fonts may not work with certain computers, I'm currently doing some testing as to what the "Universal" fonts are.
Font Name
Font
Arial
NeoHTML
Castellar
NeoHTML
Fantasy
NeoHTML
Georgia
NeoHTML
Harrington
NeoHTML
Impact
NeoHTML
Jokerman
NeoHTML
Mistral
NeoHTML
Onyx
NeoHTML
Papyrus
NeoHTML
Patrick
NeoHTML
Rockwell
NeoHTML
Sydnie
NeoHTML
Stencil
NeoHTML
Storybook
NeoHTML
Sylfaen
NeoHTML
Symbol
NeoHTML
Tahoma
NeoHTML
Verdana
NeoHTML
Webdings
NeoHTML
Wingdings
NeoHTML


^ back to top ^

Smilie List

Neopets has a list of all the common smiles, listed here. Listed below are some smilies that aren't on the list. (I used to include the ones on Neopets' list, but I got complaints it made the page too hard to scroll)

Other Smiles
Chat Smile Image
Chat Smile Code
*dung*
*catfish*
♥
&hearts
♦
&diams
♣
&clubs
♠
&spades


^ back to top ^


Hex Code Chart



Note: In order to use hex codes in your font you must add '# before the code or else the colour will not work.

^ back to top ^

Step by Step Guide

Step 1: Choose Your Avatar and Colours
Go to your Chat Preferences and choose an avatar from the drop down list, if you need help finding avatars try avatar.starried.net. You'll probably notice each avatar is made up of several colours. NeoHTML allows you to change the colour of your font two ways: the English name of your font (Red, Blue, Darkblue) and the Hex Code of the colour. A Hex Code is just a 6-digit representation of a certain colour. To find what colours go with your avatar, you can check out our fancy-dancy Hex Chart or try a site like avatar.starried.net that supplies the Hex Codes for you. Remember, every Hex Code needs to be preceded by a '# for it to work, though English names of colours do not.

Step 2: Basic Font Skills
When I was revising this guide after seeing where people have the most problems, I decided to add a short tutorial about tags into this guide. Think about tags as bookends: if there isn't a bookend on both sides, the books fall. For instance [tag]TEXT will not affect the TEXT unless a closing tag is added like this: [tag]TEXT[/tag]. This will not affect your font: [tag][/tag]TEXT. You can add as many tags as you want to one block of text, like this: [tag1][tag2]TEXT1,2[/tag1]TEXT2[/tag2]. If you want to know what tags you can use in NeoHTML, try our List of NeoHTML Tags.

Step 3: Inserting Symbols
In order to create a good font, you'll need some symbols. No, not those mole petpets that live in that one hole in Meridell. I'm talking about these things: ◙☼░∆╩╞₪☺♫. You may be wondering how to insert these characters, since they don't correspond to a key on your keyboard. A lot of the more useless font help sites give you some complicated alt code list. Well, that's way too complicated, bothersome, and totally uncouth. The easiest way to add symbols is to open up a Microsoft Word document, click on INSERT, then on SYMBOL. Just insert them into the text of the document and copy paste them into your font code. Done. Easy, eh?

Step 4A: Creating Pretext
Neopets makes it pretty obvious of how to put text after your message (Siggy), but how about before your message? Just construct your pretext, and then use [br]'s or [p]'s to create space between this text and your post, if that's the look you're going for.

Step 4B: Creating Borders

An extension of using pretext partnered with your siggy is a border. To create a border, using some symbols we learned how to insert from Step 3. For this border here's our code:
[center]╔═○═○═○═╗[br]NEOHTML[br]╚═○═○═○═╝[/center]
╔═○═○═○═╗
NeoHTML
╚═○═○═○═╝


Step 5: Message Font
This is pretty straight forward, just decide what you want your message to look like and build from there. Keep in mind the 'NeoHTML' in your font code will be your message. Use my handy-dandy NeoHTML Tag list. Another thing to remember is that this: [center][/center]NeoHTML won't do anything to your message. You want something like this for it to work: [center]NeoHTML[/center]

Step 6: Siggy
Making a siggy is pretty much a combination of the skills we've learned in the previous steps: you'll be mixing colours, fonts, symbols and font codes to make your siggy. For the most part it's a lot like making your Message Font (see previous step) but with more control over the individual parts of your message. Want to get rid of that siggy line? Check out our guide!

Step 7: Compacting Your Font
Occasionally your code will exceed the limits set by Neopets for your font and siggy (120 characters each) and you'll need to remove things from your code. First off, check to make sure you aren't putting spaces between tags like this: [tag] [tag]. Also check if you really need to use a hex code if just using the English name would take less space. In your font tags, you don't need spaces, for instance this: [font c=#123456 s=3] can look like this: [fontc=#123456s=3]. Also see that you are only changing font faces where you really need to.

Now just verify and your off to font-coolness!

^ back to top ^

Getting Rid of that Siggy Line/Adding Your Own

To get rid of the siggy line, put a ' [ ' at the end of your font code, and a ' ] ' at the start of your siggy code.

To make your own siggy line, follow this template for your siggy/font code:

Font Code: PUT YOUR FONT CODE HERE [br][br]PUT YOUR SIGGY LINE HERE[

Siggy Code: ]PUT YOUR SIGGY HERE


^ back to top ^

Making Text Invisible

Making fonts invisible should only be used for siggy's or other, non-font applications. Using them to hide your text is a warnable offense! That said...

Neopets has blocked the code "#FFFFFF" and "White" for NeoHTML. What does this mean to you? It means you'll have to do some ninja-style sneaking to make text invisible. My favorite variety of sneaking? "#FFFFFE"

So here's an example of what an invisible text code would look like:

[fontc=#FFFFFE]this text would be invisible[/font]


Here's one of the most common applications of invisible font codes:

→ Highlight → [fontc=#FFFFFE]this text would be invisible[/font]




^ back to top ^

Making Rainbow Fonts

Ever seen people flip out over people's fonts that change colour?

Well, for this one, you won't need to do anything to your font code, rather, you'll be posting NeoHTML into your post, with your message broken up into different [font] codes, like this:

[fontc=#0000FF]Be[/font][fontc=#0000EE]ho[/font][fontc=#0000DD]ld[/font] [fontc=#0000CC]th[/font][fontc=#0000BB]e m[/font][fontc=#0000FF]ag[/font][fontc=#000099]ic[/font][fontc=#000088]al[/font] [fontc=#000077]fo[/font][fontc=#000066]nt[/font][fontc=#000055] of[/font][fontc=#000044] bl[/font][fontc=#000033]ue[/font] [fontc=#000022]fla[/font][fontc=#000011]me[/font]



Note On Rainbow Fonts: Using NeoHTML codes in your post will mess up whatever neoHTML code you have after your post, such as your siggy, and closing tags.
So the only way to keep your font intact is to post your font code with your message, replacing 'NeoHTML' with your rainbow code.

^ back to top ^

Hiding Your Active Pet's Picture

Ever since Neopets added a picture of your active pet to the space below your avatar, I've gotten a lot of requests from people wanting to get rid of this image from their posts--so here's my guide:

First off, head to the Quick Ref page. Now right click on one of your inactive pet's picture, and select "copy shortcut" or "copy link location." Paste this into your browser's URL bar. At the end of this URL should be your pets name, simply change the first letter of the name from upper to lowercase.

Or you could put your Pet's name in all lowercase into the following link:
http://www.neopets.com/process_changepet.phtml?new_active_pet=[your pets name]




^ back to top ^

NeoBoard Pens

These items, found in the Neopets Mall, give you extra room in your font code, signature code, and board posts along with giving you one saved set of board preferences (ie font code, avatar, signature code).

So, whipping out my abacus, that makes for 30 more characters in your signature and main font codes (a total of 150) and 100 more characters in your post (500 total). The Green NeoBoard Pen costs 300 NC or about $3 (US). NeoBoard Pens never expire and you can have multiple pens in effect at the same time (so you can have several saved preferences with the increased input size, sadly you can't have 10000 character posts...yet). Below are representations of how much room that would really mean:

Code Increase Example: [fontc=#123456s=3]w00t?[/font]


Post Increase Example: so lyk, i waz onlin yestersday and i sah sum1 wid da bonju averter!111! lyk dosnt dat ruk. lol rofls


^ back to top ^

Tutorial: Getting Custom Colours

Ever wanted to match the colours of a certain avatar or your active pet's picture? Here's a guide to find the hex code for any colour.
(Note: Uses Adobe Photoshop)



Step 1:
Right-click the image which contains the colour you want to match and copy the picture to your clipboard.
You may also screenshot the page.



Step 2:
Paste the image (or screenshot) into Adobe Photoshop. Click the colour palette (the two colour-swatch squares). With this new window open, click on the area of the image you want to lift the colours from.



Step 3:
You should see a small area of the window that looks something like the one pictured above containing a 6-digit code of numbers and letters. This is the hex-code equivalent of the colour you want! (Note: if you're having trouble with the colour, try selecting "use only web colours.")

^ back to top ^

Example Font w/ Explanations



Finished Font:


^ back to top ^

Helpful Links

Site
Usage
Avatar.Starried.Net
Avatar Guides; since LupePlains shut down, my main site for avatars!
MindlessInvalid.com
[very] Basic Font Codes; Avatar Guide
CssHelp
CSS Help


^ back to top ^

Link to Us















^ back to top ^

Legal Stuff
Copyright 2005-2008 Thomas Sumner (solardragon402) and Neopets, Inc. all rights reserved, baby. If you wish to use this content on your website, petpage, or for any other public usage, contact Thomas Sumner (SolarDragon402). Use only with written permission

^ back to top ^

visitors since June 15th, 2008
counter from BoingDragon.com



NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2013.
® 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