A Guide to Forum Coding

This is the bold button, you can use this to create the tags [*b] and [*/b]. This makes your text bold with nothing else added.

Example

Code:

[b]Example[/b]

This is the italics button. It uses the tags [*i] and [*/i]. When put around a selection it looks like this:

Example

Code:

[i]Example[/i]

This is the underline button! It uses the tags [*u] and [*/u]. When put around a selection it looks like this:

Example

Code:

[u]Example[/u]

This is the strikethrough button! It uses the tags [*strike] and [*/strike]. When put around a selection, it looks like this:

Example

Code:

[strike]Example[/strike]

This is the left align button. This will create your text to appear on the left hand side of the screen. However your text does this automatically, so this is a tag that's rarely used. The tag for it is [*left] and [*/left]

Code:

[left]Example[/left]

This is the center tag! On a lot of forums this is the one tag that varies the most. On our forum we use the tag: [*center] and [*/center].

However some sites use [align=center] and [/align] to do the same thing. So make sure to check with their buttons and which site you are on when using this tag.

Code:

[center]Example[/center]

This is the right align button. It uses the tags [*right] and [*/right].

Code:

[right]Example[/right]

This is the Justify button! This button spaces your paragraphs so that no matter where your space is at the end, it will appear like a block of text, even on both edges.

(Not Justified)
This is an example Paragraph. This is to show that no matter where a sentence would end on the edge of the line, the words will become spaced out so the edges align evenly on both edges. Of course the only way to show this is to have enough written to show up so that it's clear that the edges are perfectly even on both sides. In all honesty I've never quite known what this button did myself! It is a rarely used button so don't feel pressured to use it if you don't wish to.

(Justified)

Code:

[justify]This is an example Paragraph. This is to show that no matter where a sentence would end on the edge of the line, the words will become spaced out so the edges align evenly on both edges. Of course the only way to show this is to have enough written to show up so that it's clear that the edges are perfectly even on both sides. In all honesty I've never quite known what this button did myself! It is a rarely used button so don't feel pressured to use it if you don't wish to.[/justify]

This is a bullet list button! This creates the ability to have a list with bulleted items instead of numbered items. The tags for this are:

[*list][**][*/list]

With each item of the list started off with [**].

• This
  
• Is
  
• An
  
• Example
  
• List
  

Code:

[list]
[*]This
[*]Is
[*]An
[*]Example
[*]List
[/list]

This is a numbered list! It's close to what the other list is like, but with a few small changes.
The tags for this list are [*list=1][**][*/list]

With each item of the list started off with [**].

1. This
   
2. Is
   
3. An
   
4. Example
   
5. List
   

Code:

[list=1]
[*]This
[*]Is
[*]An
[*]Example
[*]List
[/list]

A Horizontal Rule can be used to insert a line break between sections. However with the skin of Fidelius Charm, it is slightly hard to see. The tag for Horizontal Rule is [*hr]

Text before

---

Text After

Code:

Text before
[hr]
Text After

This is the quote button! When you click it you get a second box that asks for the Author, however it's optional to add. The tags for the quote button are simply [*quote="Name"] and [*/quote] when using an Author, or with no author: [*quote] and [*/quote]

Felix wrote:

Example with an Author

Quote :

Example without an Author

Code:

[quote="Felix"]Example with an Author[/quote]

[quote]Example without an Author[/quote]

This is the Code Button! This is used when you wish to show the tags for a set of text. Good for Claims lists and sign ups, and especially guides. The tag for Code is [*code] and [*/code]

This is what it would look like without the code box.

Code:

[strike]This[/strike] is [b]what[/b] it would [i]look[/i] like with the [u]code[/u] box.

This is the spoiler tag! It allows you to hide certain text that another person can click to show the contents of that box. It's shown in this guide multiple times to help condense text and make things easier to navigate when showing a lot of information. The tag for spoilers is [*spoiler] and [*/spoiler]

Spoiler:

Code:

[spoiler]This is a spoiler tag example[/spoiler]

This is the hidden tag! The tags used are [*hide] and [*/hide]. To be honest, I don't believe the tag works on FC, it should act similarly to a spoiler tag.  

Code:

[hide]Text[/hide]

This is a table tag! It's used to insert tables into your posts, though rarely used in forum rp, it's still good to know how it works. The tags are: [*table][*tr][*td][*/td][*/tr][*/table]

Table sets up the fact that it's a table. While tr's create more columns, and td's create more rows.

Example	Example2
Example3	Example4

Code:

[table][tr][td]Example[/td]
[td]Example2[/td]
[/tr]
[tr][td]Example3[/td]
[td]Example4[/td]
[/tr]
[/table]

This button allows for you to insert an image that is hosted on your computer. It comes up with a popup:



This popup allows for an image to be taken directly from your computer, via the browse button. Or Taken from a URL:



And allows you to host the picture with it's own unique URL. There are sites that allow you to do this elsewhere.

Prominent ones are: Imgur and Photobucket. There are lots more however, and with some searching you can find the ones you like best.




This button allows you to insert an image into your posts (This has been demonstrated all throughout the guide)! The code for this is [*img] and [*/img], however when you click the button a popup will prompt you to put in your url and an optional size changes.

The size changes will simply allow the picture to show up smaller on the forums, and not actually edit the size of the picture.

Code:

[img]http://i.imgur.com/UfJODMJ.png[/img]

Links are very useful for linking to another site and creating a shortcut so that another person doesn't need to copy and paste a link, or have to look at a bunch of urls. The tag for links are: [*url=link] and [*/url]. Please be aware that we don't allow linking to other rp sites unless it's done specifically in the advertising section.

Occasionally I like to make it more clear that it's a URL and will underline the things that show up. In the example it is Rules and FAQ which will show up as the words that link refers to.

Rules and FAQ

Code:

[url=http://thefideliuscharm7.rpg-board.net/f3-rules-and-faq]Rules and FAQ[/url]

We can use other tags inside of that:

Rules and FAQ

Code:

[url=http://thefideliuscharm7.rpg-board.net/f3-rules-and-faq][u]Rules and FAQ[/u][/url]

This allows you to insert a youtube video into your posts! Please do not post youtube videos into your in character posts, and if you wish to post one at all, do it only out of character, or link to the youtube video via a link, and not the youtube tag. The tag to insert a video is [*youtube] and [*/youtube].

Or simply click the button and copy and paste the link you wish to put into the post. The area between the tags is simply the numbers and letters that appear at the end of the youtube video.

Spoiler:

Code:

[youtube]UJ53Js0YKZM[/youtube]

This button allows you to insert a Dailymotion video in the same manner you may insert a youtube video. The same rules apply for this button as for the youtube button. The tags for this are [*dailymotion] and [*/dailymotion].

Spoiler:

Code:

[dailymotion]x16gnog[/dailymotion]

The flash button allows you to insert flash videos into your posts! Please refrain from using this as it can slow down people's browsers. The tag for this is [*flash(500,500)] and [*/flash]

Font Size allows you to change the size of your writing to help things stand out better. This is another one of those tags that changes quite often by site. Here at FC we use:

[*size=#][*/size]

The # can be changed to be between 10 and 24, however if you simply click the button it gives the size numbers and how big that size will look on your post.

Size Ten
Size Twelve
Size Sixteen
Size Eighteen
Size Twenty-Four

Code:

[size=10]Size Ten[/size]
[size=13]Size Twelve[/size]
[size=16]Size Sixteen[/size]
[size=18]Size Eighteen[/size]
[size=24]Size Twenty-Four[/size]

There are a large variety of font colors to choose from here at FC. By clicking the Font Color button it's easy to pick and choose what colors you want. Tags for this are [*color=#][*/color] You can also write the word to get the color you want! Such as [*color=red] or [*color=yellow] and you will get that color for your font!

Example
Example

Code:

[color=red]Example[/color]
[color=#009900]Example[/color]

There are also quite a few font names to choose from the list that drops when when you click Font Name. [*font=Name] and [*/font] are the tags used.

Example
Example

Code:

[font=Arial Black]Example[/font]
[font=Impact]Example[/font]

Most of the time this button is grayed out. Meaning you cannot use it without fulfilling certain requirements. In this situation you need to switch to editor mode (The last button which will be explained in depth later), and highlight the text you wish to remove the formatting from.

The More button opens up a new set of buttons that can be used in your posts. Including subscripts and scrolling text. These are rarely used however in Forum Roleplay.



The Subscript button allows for subscripts to be added to numbers. Such as 9₂. The tags for that are [*sub] and [*/sub]

Code:

9[sub]2[/sub]

You can also make Superscripts, which are:

9².

Code:

9[sup]2[/sup].

The Important buttons to know in this section are Horizontal and Vertical Scrolling. These are more often seen in signatures then actual posts.

Horizontal Scrolling

Vertical Scrolling

Code:

[scroll]Horizontal Scrolling[/scroll]

[updown]Vertical Scrolling[/updown]

The Current date button inserts the current date into your posts with one click.

2014-08-15




The current time button inserts the current time into your posts.

18:07:04




Another button for the editor mode page, it allows for easy copying and pasting.




Editor Mode allows you to view and edit your post to see immediate changes to your posts. This is a fast and easy way to make complicated formatting without having to press preview repeatedly. If working solely with the buttons is your thing, maybe try posting in Editor Mode. If you like working with the code, keep editor mode off.