Basic
The Basics
Typefaces/Fonts
Editing for color, size, font
Getting rid of the siggy line
Advanced
Decorating your text (easy)
Other decorations (still easy)
Borders (a tiny bit harder)
Make a siggy pet
Colorful Fonts
Rainbow Text
Invisible Text
Multi-colored Text
About Us
F.A.Q
wordmaiden
Jemeni_none the Mutant Kougra
Link to Us:
If you'd like to link to us using this image:
Copy this code:
-blocked-
Links |
| My sister's page: is under contruction and will be available soon
Help the Font Page.
If you have a font page and would like me to link to you, neomail
me. I will only link to neopets pages.
I prefer text links or standard size (88 x31) buttons.
|
|
Hello,guest. I'm Jemeni_none, but you can call me Jem. My person, wordmaiden, asked me to write a simple tutorial on font making for all the people that visit my page. She said I should start simple and work my way up. So that's what I'm going to do. If you've never made a font on your own, you might want to start right at the beginning. If you've done this before, and are looking for something special, use the navigation links to find what you need.
|
|
| To change your font and signature just go to Chat
Preferences. There, you can put in some new neoHTML (the neoboards
version of HTML) and create new fonts. In neoHTML, you have to use
these brackets [ ] to begin and end your codes. A simple font code
would look something like this:
[font c=orange ] neoHTML [/font] in
the input box.
and on the boards it would look like this: neoHTML.
The word neoHTML must be part of your code and must not be inside
the brackets. Try to make your fonts look like the one above, with
the beginning of the font code in front of the word neoHTML and the
ending of the code behind it. Of course there are variations and exceptions,
but that's in the next few sections.
When you are done making your code on the chat preferences page,
hit the submit button and you'll get a preview of your new font.
Along with color, you can also edit for font, size, and do a little text decorating.
The codes might seem hard to get at first, but once you have the basics, the
rest falls into place pretty easily.
|
|
| Let's start with the kinds of fonts, as in typefaces, you can use.
The good news is, you can use any one word font on the neoboards.
Here are a few examples:
Fixedys; Impact; Monospace
; Fantasy; Roman; Cursive.
If you are seeing any of these as regular typeface, it's
because you don't have them downloaded onto your computer.
That's the bad news. It's kind
of sad to have a neat new typeface that no one else can see. Of
course, you can do a search on the internet to find a site that
allows you to download free fonts, but remember, BE CAREFUL
when downloading anything from the internet.
Top
|
|
|
Here we get down to the actual nitty-gritty of font making. The basic
coding that will make your font different than every other font out
there.
First some basic codes:
[b] bold [/b]
[i] Italics [/i]
[u] underline [/u]
[sub]under text [/sub]
[sup] over text [/sup]
[center] center [/center]
(To center your signature, as well, place the first part of the code
[center] before your neoHTML font codes and the ending part
of the code [/center] at the very end
of your signature.)
The following codes come after the word font in you neoHTML.
font: [font f=impact] neoHTML [/font]
size: [font s=7] neoHTML [/font]
color: [font c=red] Red [/font]
Of course, the fun part is mixing them up:
[font f=impact c=orangered s=4][i] neoHTML[/i][/font] in my code will look
like this : neoHTML
on the board.
Another code that works well with neoHTML is [br] for break. It's
responsible for all those three and four line fonts with the fancy
borders on them. It's also how you can make a pet for your signature:
__
{o,o}
/)__)
-"-"-
2 notes about color:
1.)There is a limited amount of space available to write your code and I suggest
you don't use long names for colors. For these colors, it's better
to use the hex codes. Red, blue, and green are fine, but lightgoldenrodyellow
takes up more than three times the space #fafad2 (its hex code) does.
There is a color chart available here
that has both hex codes and color names on it.
2.) I have always used the British spelling for the color Grey.
I have no idea why since I'm from Indiana, but I got in the habit
and still use it since most spell checkers accept it. But when using
it for coding it has to be spelled G-R-A-Y.
Top
|
|
| The default setting for the neoboards contains a line between the
message and the signature. Regular board posters call this a signature
(or siggy) line. So, how do you get rid of that line? Lets use my
last font code as an example:
If I don't mind the line, I might input this into
the neoHTML box in my chat preferences:
[font f=impact c=orangered s=4][i] neoHTML[/i][/font]
and this into my signature box:
[font f=impact c=orangered s=4] I don't mind
the line.[/font]
My message will come out something like this:
Whatever I type.
------------------------
I don't mind the line.
If I want to get rid of that line, I will make two small changes
(the brown brackets.)My neoHTML will
be:
[font f=impact c=orangered s=4][i] neoHTML[/i][/font][
and my signature code will be:
][font f=impact
c=orangered s=4] I hate the line.[/font]
It will look like this:
Whatever I type.
I hate the line.
As long as the line is trapped between the two brackets [] it won't
be seen on the board.
note:
When you hit submit to preview your neoHTML the brackets will be
visible:
neohtml: neoHTML
[
Siggy:] I hate the line.
But it will not be visible on the boards.
Top
|
|
| Once you have a handle on the basics you might
want to move on to more advanced fonts. With these codes you can decorate
your text, make a siggy pet, and make classy borders for your font.
Once you know a few tricks, you'll find that these codes really aren't
that hard to master. However, they do take up more space than the
basic codes so there is a limit to how much you can do.
Three Easy Ways to Decorate Your Text
Borders and siggy pets will be covered in the following sections.
For now, lets deal with decorating the text itself. Why decorate?
To make your message unique, to match your avatar, and simply because
it looks great.
The first way to decorate your text is to use symbols already on your keyboard.
Normally the only thing that should be outside your brackets is the word neoHTML,
because anything you type there will be seen as part of your text. In this case,
you want that to happen.
Say, for instance, you have a nice faerie avatar and you want a font to match
it. What do you think of when you think of faeries? Wings maybe? Try this code:
[font c=#003366] })i({ neoHTML })i({[/font]
The little butterflies will bracket your message and will look like this on
the boards:
})i({ I
love faeries })i({
Be creative. Try different symbols on the keyboard to make your message stand
out.
Another way to decorate your text is to add words to your code. Because they
become part of your neoHTML, they will be on every message. Be creative.
Use different colors, fonts, and sizes for these words. Here's an
example:
[font c=black]I said: [/font][font c=blue]neoHTML[/font][font
c=black] and then I laughed.[/font]
Your message should look something like this:
I said: Hello,
I'm wordmaiden and then I laughed.
Using the [sup] and [sub] codes I can make it look better. This:
[font c=black][sup]I said:[/sup] [/font][font
c=blue]neoHTML[/font][font c=black][sub] and then I laughed.[/sub][/font]
Will look like this:
I said:
Hello, I'm wordmaiden and
then I laughed.
Again, be creative. Try to come up with your own tricks.
The last way to decorate your text uses the two most common symbol fonts: wingdings
and webdings. These are both sold commercially, but chances are you
have one, or both installed on your computer already. Better yet,
most other people have them too, so they will be able to see them.
To use these fonts just complete the following codes. Replace the
word letter by typing a letter or number
on your keyboard:
[font f=webdings]letter
[/font][font c=brown] neoHTML[/font]
[font f=wingdings]letter
[/font][font c=brown] neoHTML[/font]
To save space, I'm not going to type all the symbols here. If you
have the fonts on your computer simply go to C:WINDOWS/Fonts,
find the font files, and open them for the complete list.
Top
|
|
I have always called the following codes symbols, but I've also seen
them listed as ALT. codes, because you can get them to show up on
your text editor by holding down the Alt button and typing a series
of numbers.
You have probably already seen ? on
the boards somewhere.
But you don't have to know any of that to use them on the boards.
All you have to know how to do is copy and paste. Try it. Copy the
pound symbol below. (Hold down the right button on your mouse and
go over the symbol to highlight , left click, choose copy.)
£
Now open up your notepad program and copy the symbol onto it. Easy,
huh? You can now add that to any font code you use. You can even save
it in notepad, but only as a unicode file. (Saving it in the default
ANSI will result in gibberish.)
Just as before, you can use these symbols as decorations for your
neoHTML:
[font c=#CCCC66 s=5]µ
neoHTMLµ[/font]
results in:
µ Like my symbol?µ
Blumie_Boo's
Fonts has a really nice collection of these little pictures and
symbols for you to copy and paste into your code.
Top
|
|
| Now, for the fun part. Using the symbols (ALT codes) you can make
a nifty little border for your text. To do this, it's necessary to
understand how a break works. Placing a break in your code [br]
means ending a line of text or in this case symbols. There is no need
to add an ending to this code, the [br] is
the beginning and the end.
A simple font border code would look like this:
[center][font c=##330000 s=5]=========[/font][br][font
c=#CCCC66 s=5] neoHTML[/font][br][font c=#330000 s=5]========[/font][/center]
Your message will look like this:
=========
Look at my new border!
=========
I used the center code because borders don't look as
good smashed up against the left side of the message board.And notice
where I placed my [br] codes; before
and after the text, exactly how it shows up on the boards.
Of course, this border is a little boring. It's really
just lines, so let's spice it up a bit with the two symbols I used
earlier.
[center][font c=##330000 s=5]=£========[/font][br][font
c=#CCCC66 s=5] neoHTML[/font][br][font c=#330000 s=5]=====µ===[/font][/center]
Now my message will look like this:
=£========
Now my border looks fancy!
=====µ===
These, of course, are very simple examples. There is
no end to the complicated borders you can make using these symbols.
A note about these symbols:
When using these symbols, you might occasionally find that your border
has been replaced with :??????. I'm not sure if this is caused by
the neoboards or if it's something to do with the browsers people
use. Usually refreshing the page will eliminate the problem and you
will see your border again. If not, try going to chat
preferences and submitting your code again.
Top
|
|
Siggy Pets have always been popular on message boards. They can be
fun, or cute, or silly, but they always draw attention. Best of all,
they are easy to make once you get the hang of using the [br]
command. For an example, I'm going to include the code for the all
time most popular siggy pet.
A bunny:
(Y)
(..)
(")-(")
Cool, ain't he? Know why he's nice and centered like
that? Because if I don't center him, he looks like this:
(Y)
(..)
(")-(")
So remember to add the [center][/center]
command to your code. Here's a code with some color and a message
added:
[center][fontc=#330066f=verdana][b](Y)[br](..)[br](")-(")[br][/font]What's
up doc?[/b][/center]
(Y)
(..)
(")-(")
What's up doc?
There really isn't much else to siggy pets. Just try different designs
using the [br] command until you come
up with something you like.
Top
|
|
|
There really is no true rainbow text, one that will change every
word (or letter) of your message to a different color. To do that,
you would have to manually enter every message. This would take a
long time and would, likely, not be worth the effort.
However, a type of rainbow text can be used for signatures. Simply
pick a color for each word, or letter, and input that into your signature
box. Here's an example:
[font c=orange ] r [/font][font c=blue ] a
[/font][font c=red ] t[/font]
The signature will look like this:
rat
Or you could make each word a different color:
[font c=orange ] I [/font][font c=blue ] smell
[/font][font c=red ] a [/font][font c=purple] rat[/font]
and it will look like this:
I smell
a rat
While these might be fun to use as a signature, it really isn't practical
to type the code in for every message.
Top
|
|
Sadly, there really isn't an invisble text, either. It's really just
a trick. Since the background of the message board is white, choosing
that color for your font makes it seem to disapear. In order to see
the message, you have to highlight the text. You could use
this for your regular neoHTML font, but not many people are willing
to highlight every message you post. It's annoying and
time consuming.
Still it might be useful for some signatures, as in this example:
This is my code:
I have a secret:[font c=white] Today is my
birthday![/font] (Highlight to see.)
It will show up on the message boards like this:
| I have a secret: Today is my birthday!
(Highlight to see.) |
Again, I would recommend only using this for signatures and not for
entire messages.
Top
|
|
At last, a text trick that can be used for messages. Actually, this
isn't a trick at all. It's just a new way of using the things we've
alreay learned about neoHTML. This doesn't work for the text itself,
unless you'd want to input the code every time you type something,
but it does work for the parts of our code that we want to stay the
same. (Like the borders and decorations.)
The best example of this is using a word or phrase to border our
text, rather than using symbols. (It will work with symbols also,
I just think it looks more impressive with text.)
Here is one example:
[center][fontc=1967D7]I'm[/font][fontc=154FB3]
word[/font][fontc=18504B]maid [/font][fontc=266521]en[/font][br][fontc=orange]neoHTML[/font][/center]
On the boards my message will look like this:
I'm wordmaiden
This is my message.
Of course, it does work with borders, or even with our
cute bunny:
[center][fontc=#01FC10][b](Y)[br][/font][fontc=#B48FE6](..)[br][/font][fontc=#89B0D1]
(")-(")[br][/font][fontc=#01FC10]What's u[/font][fontc=#B48FE6]p
doc?[/font][/b][/center]
The result is a very colorful siggy pet:
(Y)
(..)
(")-(")
What's up
doc?
But do you see how very long the code is? You have to
choose which parts of your message you want to stand out. How it stands
out is up to you. You could choose various shades of the same color
to make it appear to fade: wordmaiden.
You could pick contrasting colors to make it stand out: wordmaiden.Or
you could just stick to primary colors: wordmaiden.
As always, be creative and different to make your text stand out.
I'm going to end my little tutorial here as I think
I have covered a bit of everything. I hope it has been helpful
to you. If you still have a question, take a look at our FAQ (below)
to see if wordmaiden already answered it. If not, visit her lookup:
wordmaiden and drop her a neomail. She likes neomail.
|
|
~by wordmaiden~
Since this is our new page, I'm starting with the questions I
got most often on the old page. Oddly, I got more questions from
people wanting to know how I made my page than how to make fonts.
Css_help
is the best place to learn how to make a page/lookup/shop/guild.
Personally, I'm still learning and I don't know all the answers.
Here are a few though.
What did you use to make your page? A
text editor, dreamweaver MX, CSS, HTML, photoshop, IconCoolEditor,
a word program, photoshop, notepad, and anything else I could get
my hands on.
Where can I learn CSS? Css_help
Not only is it neopets related, it's the best CSS page I've ever read.
Did you make the background, cursor, banner,
button, etc for your lookup, pages, petpags, etc.? Yes,
except when I use a clip art or a neopets background. I mess with
my photoshop program almost as much as I play neopets.
Non-page questions I've gotten.
Will you make me a font? Probably not.
Maybe if I see you on the boards, but I'm not really someone who makes
pre-made fonts. I will give you tips, and then direct you here, or
to a pre-made font site.
I neomailed you, why haven't you linked to
my page, yet? Either, I've been too busy, or your page isn't
part of neopets. I won't link to outside pages from my neopets page.
As a mother, I'm very careful where I send young people on the internet.
With so many minors on neopets, I won't link to any page not on neopets.
If you want me to link to you, I will link to
your pet page only. I have 3 "outside" web pages myself.
I'm not linking to them, either.
I need help finding avatars!!! Quick
CLICK
HERE!!!
These were the most questions from my last site. I'm sure there will
be more coming soon!
Top
|
|
Jemeni_none the Mutant Kougra is
the host of this page. Someone very silly put him in the pound
not long after I started neopets. I, of course, snatched him up
and gave him a good home. He visited the lab ray and got good
and strong. On occasion, the ray would turn him into another species.
(He has asked me not to mention the times it made him a girl.)
When this would happen we'd grab a morphing potion, which were
much cheaper in those days, to change him back. Finally, I used
a trans. potion on him to mutate him. He likes being a mutant,
and he hated the lab ray, so these days we train at the academy.
We would like to thank you for visitng our page, and we hope
we have been of some help to you.
Top
|
|
