I will try and explain everything as best I can, but it's hard and I sometimes forget that some people aren't as code savvy as others.
If something doesn't make sense to you, feel free to pm me and I will clear it up.
This tutorial will insure even the newest/dumbest of members can manage to make a font. That means you.
Lesson 1: Getting to the Correct Page
GO HERE:
Top Bar - Boards - Prefrences
This will take you to the correct page, scroll down and you shall see this:
Given, you haven't already tried to make a font and all fields are left blank that is.
Congratulations!
You have just finished Lesson the First!
Lesson 2: Tag Definitions
Neoboards use brackets, [ and ] , instead of the < and > that are used in general HTML and CSS. We are just trying to make a font so I won't go into detail about those.
[b] - this bolds text
[i] - this italicizes text
[u] - this underlines text
[sub] - this makes text smaller and lower
[sup] - this makes text smaller and higher
[center] - this centers text, duh!
[br] - this moves text down a line, it does NOT NEED A CLOSER. No [/br] is needed!
[p] - think of this as an ultra [br], it moves text down a few lines. DOES NOT NEED A CLOSER. No [/p] is needed!
[font] - this will indicate all the changes to the text between the tags
You add these to it:
[fontf=verdana] - this will change the font face to Verdana, the 'F' stands for face. More on faces later.
[fontc=#000000] - this changes the color fo the font, in this case (#000000), black. the 'C' stands for color. Colors should always be in hexadecimal code.
To find a chart, search 'hexadecimal color chart'.
[fonts=1] - this changes the size of the font. The 'S' stands for size.
You can combine these changes like so:
[fontc=#000000f=verdanas=1] Your text would look like this.
Lesson 3: Closing and Opening Tags
Every Tag you open, MUST be closed!
Besides [br] and [p] that is.
This means:
Start a tag.
[b] The text you want bold, will be here.
Then to close the tag and indicate where you want the bold text to stop you would add this: [/b]
It's just the tag with a '/' in front of it.
The result will look like this:
[b] The text you want bold, will be here. [/b]
Simple!
Got it?
Lesson 4: Font Faces and Size
When choosing a font, keep in mind the fonts that come preinstalled on a computer and ones that you have to manually install.
Most people dont bother downloading and installing fonts at all, so i'm going to show you the most commonly used fonts.
Arial
Tahoma
Georgia
Verdana
Times
Terminal
Impact
century
Bookman
Garamond
Others you can try are Vivaldi, Terminal, Vrinda, Papyrus, Modern and Mistral.
I think I've covered the popular ones, I won't explain Wingdings because they dont work in FF and look like stupid squares/randomness.
Lesson 5: Colors
I HIGHLY recommend finding a color picker that integrates its self into Firefox. There is not a day that goes by that I don't use mine.
It makes choosing colors so much easier. A good one (I use ColorZilla) will enable an in-window color picker that lets you select any color on the page.
I've seen a few that just open up a slider, these are no good when it comes to matching avatar colors.
Make sure it also gives you the HEXADECIMAL number. NOT the RGB number. This will always start with a ' # ' followed by 6 numbers.
If you aren't using Firefox, find a nice hexadecimal color chart that you like. Make sure you bookmark it
Lesson 6: Creating a Simple Font
When making a font, I recommend typing it up in WordPad because it enables you to see the code as a whole and lets you move things around alot easier.
Here I am going to show you how to make the simplest of fonts.
On the Preferences page-
You see a box for NeoHTML and one for your NeoSignature, the NeoHTML box must always include the word 'NeoHTML'. this stands for your message.
The NeoSignature deals with everything below your message.
I usually always center my font, it just makes it alot nicer looking, in my opinion.
So, for the sake of this tut, we will center. :3
Open your first tag:
Start the font modification tag:
In this case, I just used #000000 (black), Verdana, and size 1.
Then you add 'neoHTML' right after the font tag to take the place of your message.
Now you close the font tag.
If you save the font as it is, without closing the center tag, it wont center. It will look like this:
See that pesky '-----' thing? Thats the line that would be inbetween your message and siggy. No good.
To get rid of it add the open bracket, [
Then in the signature box, add the other one, ]
Now its gone!
Close your center tag in the signature box, and your ultra basic font is complete!
Lesson 7: Adding on to the Simple Font
Not happy with a plain font?
Thats okay, pretty soon you will (hopefully) be able to make amazing fonts after finishing this tut
So you want to add something above your message, right?
The lovely thing is, you can add as many tags as you want! Unless you run out of room but thats TNTs fault, not mine.
So......
Lets start another [font] tag AND add the closer, like so:
The reason I add the closing tag already is because now I just have to type what I want the text to say.
After the closer, [/font], I'm going to add [p]
This will give me space between the new text and my message.
NOW. Lets apply this to your signature too!
Add the [fontc=#000000f=verdanas=1][/font] after the ]
Now add either a [br] or a [p] right before the [font] to create a break between your message and siggy.
Add some text, like lyrics, a quote, or something equally stupid.
You can change the hexadecimal code, font face, and font size. LIKE SO:
Lesson 8: More Advanced
Since people are never happy with being plain, I'll show you some more things you can add and customize.
Alot of people like to use special characters and symbols, you are going to have to find these on a website by searching for 'special characters'.
Some special characters work on all fonts and some don't. Your just going to have to play around with this.
Copy and Paste is the only way to bring these into your font.
This is how people get Trademarks, Stars, Blocks, Hearts, Spades, Diamonds, Clubs, and well, everything else that isnt a number or letter.
Lesson 9: Saving Space or Making Space
Alot of the time, you will run out of room to add anything else or even finish closing a tag.
There are a few tips and tricks I use that can give you a little more space.
Instead of [br], use [p]
If a font color is #000000, completely get rid of "color=#000000" in the code. The default font color is black anyways.
If your font is size one and your using [sub] or [sup], you can get rid of "s=1" in the font tag.
You cant remove the '# in front of the hex code though
Try removing spaces and see if everything is still legible
Buy a neoboard pen!
I vowed never to spend money on neopets again after stopping Premium, but I'm big into customizing fonts and lookups so I invested in a Neoboard pen.
These give you more space for your font and even more space for your message.
Edited by Twink, 07 September 2010 - 12:34 PM.