***Dee's Guide to Coding

You have noticed that in many threads there have been wonderful colours that show the difference between when a character is talking and when there is a narration. You notice that some people like to have the words in the center, some have it spread out, and some have margins. Text size can range from small to regular to ridiculously huge.

So what is the meaning of all this? How does it work? How does everyone have it and not you? Do they have some superpower to control all of this? Rest assured, everyone’s just as normal as you. Or let’s put it this way: this guide will be giving you the awesome superpower of coding.

First off, what is coding? Have you ever noticed when you click on the button for Bold letters, it always comes out with a [b]-text-[/b] That is what a code is. It’s the “tags” that you use in order to change up your post however you want to.

Warning: Codes do change from site to site so this will be the very basic for this site. After all, in order to have a pretty post here, you just need to know the codes for here.

So, let’s go through codes, shall we?

---

Bold: What is the point in bold, you might say? Well, several uses actually. When you use [b]-text-[/b] you could be placing emphasis on what you are saying.

Example: “If you want to find the book, you might want to try looking through the bookcase.”

What do you see here? Well, for one thing, you can see how the emphasis is placed on “looking through the bookcase.” You can also detect a hint of exasperation in the quote as well. So just by writing that one sentence and adding the bold, you can assume that the speaker has a bit of a sarcastic tone, possibly annoyed by the person he/she is talking to. Now let’s take out the bold to see the difference it makes.

Example: “If you want to find the book, you might want to try looking through the bookcase.”

Did you see the difference there? When I read through this one, I always think of a nurturing figure which deeply contrasts with the annoyed figure in the first example. Look at what the marvelous bold code can do for you!

A side note: Bolding can also be used to distinguish between when a person is speaking or not.

---

Italics: Honestly, bolds and italics can be used semi-interchangeably in RP posts. I’ll explain what I mean by “semi-interchangeably”. This code [i]-text-[/i] has several purposes, making it one of the most common codes used in the RP world (possibly the posting world as well).

This guide will go through the two main (and very important) uses of italics.


1 – The Emphasis

As we went over when we were going through the bold code, emphasis can be pretty dang important when it comes to posting. In italics, it is the same thing. Have you ever noticed that while you are reading a book, you might spot a word or several words that are italicised? If not, let’s go through it right now.

Example: “She is hot.”

Can you read the insistent tone right there? This person is trying to argue the fact that the girl he/she is talking about is indeed hot. Let’s see what happens if we take out the italics.

Example: “She is hot.”

Now it sounds more declarative, a simple statement. See the difference? Just by adding italics, you can change the whole tone of the speaker.


2 – Thoughts, Memories, Dreams

Have you ever noticed that when you’re having a thought, it’s not quite the same as when you are speaking? Of course, sometimes we think out loud but come on, it’s pretty much all in our minds. With RP-ing, it’s much more difficult to distinguish which is which since you are juggling narrative with dialogue and thoughts as well. Italics come into play here.

Example: “Bob was running through the forest, gasping for breath. Where am I? he thought. Looking around, he wasn’t sure. Trees were everywhere, and they all looked the same. If only I had brought a map.”

Now before you all murder me for writing such a horrible example, let me explain myself. This is without italics, proving to you how messy a post can be without this wonderful code. Here, let’s clean it up.

Example: “Bob was running through the forest, gasping for breath. Where am I? he thought. Looking around, he wasn’t sure. Trees were everywhere, and they all looked the same. If only I had brought a map.”

Yes, it’s still a very fail post, and I’m sure the staff would be at my throat if I ever did create a character named Bob and made him lost in a forest. But do you see the magic that the italics worked? Just by adding that code, I managed to set apart which section was the narrative and which section was the thought.

Anything that’s pretty much going on in the mind would also use italics. Let’s take dreams.

Example: “Running, spinning, Sara was lost. Everywhere she looked, everything she saw; all were a blur to her. If only I had more time, if I wasn’t chased, maybe I could survive this thing. A deep growl brought Sara’s attention back to what she had been running from. The dark, beady eyes were so close…too close. A snarl and then—

Sara woke up, sweating and wide-eyed. It took her a few minutes, but soon her heart rate started to slow down. She ran a hand through her hair, contemplating on what had just happened. Nightmare…just a nightmare.”

Double-whammy! Alright, let’s go over this last example. The first paragraph, as you could probably see, was a nightmare. Did you also notice that there was a section of the nightmare that was not italicised? It’s a thought within a dream. I’ll be going over that in just a little bit. The point of using the italics for the dream is so that the reader understands that the whole running around part is not what Sara’s actually doing. She is actually sleeping (and will later be waking up).

About the thought within a dream thing: If you ever feel the need to italicise italics (ie thought within dream, emphasis with a thought), don’t italicise it. Just think of it as using the italics button. If you push it twice, what happens? You don’t have italics anymore! So to make it simple, just leave those words alone and italicise the rest.

Phew, that was long. Ready to move on?

---

Underline and Strikethrough: I’m clumping these two together since they’re not really necessary for RP posts. Typically you wouldn’t need to use them in an RP post unless you reference a book (underline) or you’re just trying to be funny (strikethrough).

The codes for these are:

Strikethrough – [s]-text-[/s]
Underline – [u]-text-[/u]

Let’s go through some examples so you would know an appropriate use for these codes:

Example (Underline): “Hearing her mother’s call, Mary put The Hunger Games on her bed.”

Example (Strikethrough): “I shall make you my slave best friend!”

---

“Align Left”, “Align Center”, “Align Right”, “Blockquote”, and “Justify”: All of these five codes are formatting codes. The point of them is to “style” your posts. You can have it be like a standard school paper with the “Align Left”, make it look like a cute little poem or list with “Align Center”, or transform your post entirely with an “Align Right”. “Blockquote” would create the little margins you see in many posts around here, and “Justify” makes it look even better. The codes for these would be…

Align Left = [left]-text-[/left]
Align Center = [center]-text-[/center]
Align Right = [right]-text-[/right]
Blockquote = [blockquote]-text-[/blockquote]
Justify (take out the *) = [justify*]-text-[*/justify]

For formatting, please regard Skylar’s Guide to Gradients and Formatting.

---

The Horizontal Line: If you ever feel the need to separate two (or more) parts of your post, this would be a good tool to use. This code would include half a post box line, dividing two parts of the post. The code for this would be [hr]

Example: “Thomas was so tired at night, when he arrived home, he crashed on his bed.

---

The next morning…”

Did you see what I just did there? I created two different scenes, but I made sure to separate them with the line. Of course, for the sake of flow, the usage of this code probably would not be likely but it’s a good thing to keep under your belt.

---

Font size: So this might have grabbed your attention when you first looked through threads. Most of the time, the font was kept nice and small so that the post looked much more professional. However, sometimes a larger size is used as well (most likely to show excitement, emphasis). Standard for RP-ing is to not go above two (unless you’re writing the character name); otherwise, the font size would simply be too large. The code for font size is [size=#]-text-[/size]

In the case that you do use the size code, you would substitute the “#” with the number size text you want. It would be good to note that the numbers range from 1-7. Everything above seven, the code will only read as a size 7 text (I played around with it so I would know ).

Here is the whole range for your reference: Size 1, Size 2, Size 3, Size 4, Size 5, Size 6, Size 7

---

Font Face (aka Font type): If you want to change up your font, this is where you would do that. Amazingly enough, the code is a simple [font=(insert font)]-text-[/font] Just be aware that there might be some fonts you may like that this site will not support. Just a heads-up. =)

EDIT: In case anyone was curious, here is a list of all the fonts proboards supports.
Luna also has another list of fonts you can use.

Right, so I have been told by Aya that any font installed onto the computer works, but try to keep it a universal font. If it is a font that only you have, the font will not be seen and the words will go straight to the default font. *Please note that this has not been tested yet so the results are only speculative.

---

Font color: Ever randomly selected a thread and said, “Oh, look at all the pretty colours”? Well now you can have it too (<--lame advertisement)! So what does the font color do? For one thing, it can make your post all pretty-ful. Another means of using it to is to differ between the narrative and the dialogue.

Example: “Eric stood along the white line, waiting for the race to start. ‘I can do this,’ he muttered to himself.”

The coding that I used for the above example was “[color=66FF00]Eric stood along the white line, waiting for the race to start. [/color][color=CCFF00]‘I can do this,’[/color] [color=66FF00]he muttered to himself.[/color]”

Which means that the font colour code would be [color=(insert color code/color)]-text-[/color] The site already provides a nice drop-down list of colours to use at your disposal. For those, you would just need to insert the colour’s name where it says “(insert color code/color)”. However, if you would like your own special colour, you can use your own colour code. Two charts I like to use to figure out which colours to use are Chart 1 and Chart 2.

With colours, it’s always good to pick two that do not clash. Otherwise, you will have readers screaming that their eyes are bleeding, and they won’t be able to read your post.

Remember, it is not absolutely necessary to have font colours for your characters, but it is a very nice way to see the difference between the dialogue and narrative. If you have another speaker, use their font colour if you quote them in your post. No need to guess; just PM them for the code and more likely than not, they will give it to you.

Aya has a great guide on colours so if you still have questions or just want to learn more about font colours, pay a visit and read up!

---

Hyperlink: Ah…the hyperlink. Now it’s not absolutely necessary for an RP post, unless you are trying to link to a reference. More times than not, you will only need the hyperlink outside of RP-ing, though. It’s still a nifty code to know so let’s go over it right now. ^^

The code for this would be [url]-insert url-[/url] This code would make the url you put in automatically link to the page you want it to link. If you want to put text in instead of the url (like what I did for the section title), the code would then be [url=(insert url)]-text-[/url] Remember that at all times, the url should be in the form of “http://-url-“, otherwise the code would not read.

---

Image: What does this tag do? Let’s try it out:

Aw, look! It’s a picture! Now why would I want to put an image in my RP post? Well, it’s not always necessary but in some posts, the RP-er would like to put up a picture to show what the character looks like for reference.

The image tag is also good for posting picture anywhere you need to. For example, if you are using a graphic for your signature, you would need this code in order to ensure that your image comes up.
Let’s go through some necessary notes about the image tag:
- The code for this tag is [img]-insert link to image-[/img]
- If you are linking the image directly from a site, you would put the image url into where it says “link to image”.
- If you want to upload an image from your computer file, you would need to make sure it has a web url first. Some people upload it to their photobucket account. If you don’t have the time to create an account or you just don’t want to, I would advise using www.tinypic.com. You can upload images from your computer files or from a site. What it does is give you a new URL (one that will always be stored, even if the original image was taken down).

Make sure to not have huge images that stretch the page because those can be very, very annoying. Several ways to resize an image are:
- Again, using photobucket if you have an account.
- Any picture-editing software you might have
- Again, Tinypic

---

Code: Did you notice how I gave you all those funky codes in a code box? Well, I have a good reason for it. If I didn’t add the code box, all of the codes would have been read and you wouldn’t have any reference! What a blasphemy! So what does the code box do? Well, it allows you to type out codes without having to worry about them being read. Nifty little tool in situations like these. I can almost assure you that you will not need this in your RP posts but take the Face Claim thread. If you fill out the form correctly, you will need the code box so you can make the staff members’ lives easier by just having to copy and paste the code instead of having to rewrite the code. Oh, and surprisingly enough, the code for this tag (remove the *) is [code]-insert codes-[*/code]

---

Quote: Ah…quotes, quotes, quotes. Again, not really necessary for RP. Very necessary for some of the discussion posts.

Have you ever found yourself in a situation where you want to respond to someone’s post but realised that the conversation had already taken another turn within the next ten posts after it? This is when you can use the quote tag! Already there is a button you can use to quote the whole post, but let’s just be old-fashioned for the time being and pretend there isn’t. What would you do? Well, you would take the part you want to respond to and put it in this code: [quote]-insert quote-[/quote] And you can finish up your post by responding to it! There we go. And while you’re at it, why not just add on to the other conversation?

---

T

A

B

L

E

S

:

Phew, tables. I'm not going to lie; these take a lot of work. However, the end result is usually worth it. Tables are frequently used for creative aspects, but you might find some that are more for a utilitarian use.

Let's look at an example:
A table is used in order to show the dice rolls, and the corresponding attack and damages count.

The code for this would be: [table][tr][td][/td][/tr][/table]

Now breaking it up bit by bit:
[table][/table] This is so you can create your table.

[tr][/tr] This starts out a new row. Each row needs to have its own table row tags so be sure to do that if you want to have 2 rows of 5 instead of 1 row of 10.

[td][/td] This is the entry for each column in the row. In the example of the section title, the letter T would have its own table cell tags. Pretty much anything can be a cell entry; just remember that the width of the cell is as long as the character is so if you were to put in a space, it would come out as a sliver of a cell. You can also use code to bold/italicise/strikethrough/colour/etc. the cell entry.

Be sure to play around with them as much as possible and whenever it seems fit to use them.

---

[th]Welcome to Enhanced Tables!
[cs=3][bg=A8CFFF]Enhanced	table	[rs=2]Woot!
[rs=2]Let's	B	e	gin

And you thought there were only the simple tables. Well, thanks to some awesome coding (the crazy legit html/java coding), there is now an enhanced table feature. I'm still playing around with this so this might be updated frequently.

We'll begin by my showing you the code I used for the above: [table][tr][td][th]Welcome to Enhanced Tables![/td][/tr]
[tr][td][cs=3][bg=A8CFFF][color=000000]Enhanced[/color][/td][td]table[/td][td][rs=2]Woot![/td][/tr]
[tr][td][rs=2]Let's[/td][td]B[/td][td]e[/td][td]gin[/td][/tr][/table] Lovely, isn't it? You might have recognised most of the codes there so I'll talk about the new ones.

[cs=#]: This one is used to say how many cells this cell entry will be spaced out into. In this case, I put three, meaning the word "Enhanced" will take up the typical three columns. BTW: cs stands for column spacing. Just so it's easier to remember. =)

[rs=#]: This one is used to say how many rows this cell entry will space out into. I put the number two in because that was how many rows created. However, if you don't have the number of rows in the table, then the cell will only extend to the amount of rows possible. For example, the third row first entry in this table has a 2 for the row spacing (rs), but you don't see it extending to another row because there is no row to extend to.

[th]: The table header code is meant to extend the cell entry throughout the whole row. Just think of it as a title cell for your table.

[bg=color]: bg stands for background so if you notice in the second row first entry, that cell has a background colour. Because the colour I chose did not work with the site's default font colour, I also had to change the colour of the text.

The codes that I have just gone through do not require end tags. If you do put the end tag in, you won't be able to see the desired result. So just cap it off with a

[/td] and you'll be fine.

Damen used enhanced tables for his character information thread. Definitely much more advanced than the one I created as an example.

If you think tables are tricky little things, I would advise you not to use enhanced tables. They take much more work and coding in order accomplish even an amateur one (case point: section header). However, they are amazing for creative purposes when done correctly. Just be sure you know your coding before you attempt something as hefty as this code.

---

So these are the general codes I figure you would need to know in order to survive hang around here. More codes might be added on as the site continues to progress but these are pretty much the basics and the uses for them. So no underlining something you meant to add a quote to! You no longer have an excuse.

---

Side note: If you are going to use codes, the preview button is going to be your friend. Nobody’s perfect and chances are, there is going to be at least one time you slip and forget to add something in the code.

Example: “[colo=33FFBF]And Dee got in trouble for messing the post up.[/color]”

Look at how ugly that looks! And I’m stuck with the font color I’ve been using before instead of prettying it up like this:

Example: “And Dee got in trouble for messing the post up.”

See? Much better. ^^ What happened was I forgot the last "r" in "color" so I was stuck with the first example.

---

Another side note (man, do I like side notes >.>): The point of me making this guide is so that you can use whatever codes you need to use for your posts. So don’t be afraid to change up the size of the title of a thread, add an image, change the font size twice, use three different font colors alternating with each sentence (though it does become a pain after a while). You are given 60,000 characters to write up a post.

60,000. That’s like writing “Supercalifragilisticexpialidocious” with spaces 1,714.285714285714… times. You could probably write a short story about a girl named Abigail Lee Windoroffenshire and write her full name every single time you mention her and not even use up half of the available characters given to you. Okay, maybe three-fourths. It really depends on how much you usually write. But do you get my point? You’re allowed to use all of these fantastic codes as long as they’re used appropriately. So don’t be afraid to italicise those words. Add that image while you’re at it! And give those posts those nice little margins to look all nice and proper.

If anyone was curious, this entire post still has 36818 characters left (with codes and everything).

---

Long story short: Codes are your friends. Just use them wisely. ^^


PS: Cinder loves size1|coloured|blockquoted/centered text. =)[/size][/blockquote]