Post by Demi-Dee on Feb 24, 2013 9:57:23 GMT -5
BBCode Tags For Messages and Posts
Hey there guys ^_^ I thought I'd make this thread because codes/tags and such are awfully confusing, and since people ask how to do this and that when posting, myself included, I thought it'd be a nice thing to have for new members (and old of course!) that come along, and to access them when we ourselves need them. :3
If you already know whats tags are and how they work, I suggest you scroll down to the 'List Of BBCode Tags' section to see a list of the multiple different tags you can use.
What Are They?
Okay, first off, what are Tags? Well, they are more commonly known as 'BBCode Tags', but I'll just be calling them Tags for simplicity's sake. Tags are used to add style and formatting to your post. Elements such as YouTube Videos, Images, lists, tables, etc, are all capable of being added to your posts...you just first need to know how to use them!
Basics
These are the more basic tags that you can actually access right here in the forum. These are the easiest to use simply because you don't really have to remember how to type them in, but I'll still show you anyway! But first things first, I'll show you the simpler way.
Whenever you make a new thread, this is usually the thing you are greeted with. Hopefully you'll notice the section that I've gone ahead and circled in red. As you can see it's labeled the 'Add Tags' section. If you look to your left of the title, you can see a variety of buttons to press. If you hover over each button, you'll see a little message popping up telling you what they do. And all you need to do is press the button!
...Well okay, it's not that simple. I'll explain how it works. First, let's use an example. Let's say I wanted to make my text nice and bold, and I had no idea how to do that. I'd go to the Add Tags section, and look for this button:
. I know which button gives me bold text because I hovered over each button to see what it does. Now that I know which button it is, it's time to click it. After I've done that, in the message box this should appear: [b] [/b] Okay next step. You write your text in between the two tags. For example, this is what I'm going to write in my message box: [b]I am bold![/b]This code will create bold text. So when you post, your message should look like this: I am bold!.
I could go over what the other buttons do, but I don't want this to drag, and it's better that you experiment with the buttons yourselves!
Okay, now we have the basics of how to use tags down, I'm going to tell you which tag does what. We may have gone over a few of these already, but it's easier to explain each one in a list than having someone have to search through mountains of text.
List Of BBCode Tags
Bold
To bold text, you would use the following tags in the message area:
[b] [/b] Next, add content you would like to bold between these tags. When your comments are posted to the message board, any text within these tags will appear in bold. Example:
[b]I am bold![/b] When posted this will show as: I am bold!
Italics
To make text appear in italics you can use the following tags in the message area:
[i] [/i] Next, add any content you would like italicized between these tags. When your forum post is made, text within these tags will appear in italics. Example:[i]I like italics![/i]When posted this will show as: I like italics!
UnderLine
To add an underline effect to some words in your message, you can use the following tags in the message area:
[u] [/u] Next, add any content you'd like underlined between these tags. When you post your thread to a message board, any text within these tags will appear underlined. Example:[u]I am underlined![/u]When posted this will show as: I am underlined!
StrikeThrough
To add a strikethrough effect to text in your message, you can use the following tags in the message area:
[s] [/s] Now add any content you would like a line through between these tags. When your message board post is submitted, any text within these tags will have a horizontal line through the middle of the words. Example:[s]I am stricken![/s]When posted this will show as:
Move
The Move feature allows you to animate content and moves text from the right of your forum posting to the left; like a news ticker. To animate your message, use the following tags:
[move] [/move] Add content you would like to have move across the page between these tags. Example:[move]I am Moving! [/move] When posted this will show as:
Align Left
This allows you to align your message to the left of the page, this is done using the following tags:
[left]I'm aligned to the left.[/left]When posted this will show as:
I'm aligned to the left.
Align Center
This allows you to align your message to appear centered in your post. This is achieved by using the following tags in the message area:
[center] [/center] Content provided within these tags will be centered in your post. (Note: this code will only work if it is spelled as 'center', not 'centre') Example:[center]I'm center aligned![/center]When posted this will show as:
I'm center aligned
Align Right
This allows you to align your message to the right of your post. This is done by using the following tags in the message area:
[right] [/right] Content provided within these tags will be flush to the right side of your post. Example:[right]I'm aligned to the right.[/right]When posted this will show as:
I'm aligned to the right.
Font Size
You can make the font size of your posts larger or smaller by using the following tags:
[size=2] [/size] Text provided within these tags will be in the font size specified in the size tag. Example:[size=1]This text is very small[/size]When posted this will appear as: This text is very small
Using this tag controls text size which ranges from 1 (smallest) to 7 (largest) to match your preference. Remember, discussion board threads don't all have to use the same font size.
NOTE: It would be much appreciated if members would not go crazy with the font size. Huge/really tiny font sizes are incredibly irritating to read, and so it advised to stick to the default size (size 2) unless you are creating titles, sub-headings, etc.
Font Face
You can also change the font type of the message in your post, this is done by using the following tags:
[font= ] [/font] Text within these tags will appear in the font type you set in the tag. Example:[font=Times New Roman]This text is in Times New Roman[/font]When posted this will appear as: This text is in Times New Roman
This configuration will render the text in the Times New Roman font. Keep in mind; for others to see the text in your chosen font, they'll need to have the font already installed on their computer. You can safely use any of the fonts listed below:
Verdana
Times New Roman
Comic Sans MS
Arial
Courier New
Tahoma
Century
Autumn
Lucida Console
Rockwell
Scribble
Trebuchet
YouTube Video
You can embed a YouTube video into your post, using the following tags:
[youtube] [/youtube] Next, type or paste the web address of the YouTube video you want to share within these tags. Example:[youtube]http://www.youtube.com/watch?v=vX07j9SDFcc[/youtube]When posted this will show as:
The URL for your selected video can be copied from the address bar of your browser as you view it on YouTube. You must use the full URL and not the youtu.be short address found in the YouTube sharing options.
NOTE:Please do not use videos in RP posts. They are unnecessary and they can sometimes end up stretching the page. Using videos in PM's or in the Chat board, etc (Basically anywhere but the Role Play Section) is okay.
Insert Image
You can also insert images into your post using the following tags:
[img] [/img] Simply type the URL address (location) of your hosted image within the tags and it will appear in your post. Example:[img]http://i48.tinypic.com/2j1vq5k.gif[/img]When posted this would appear as:
To successfully present the image in your forum posting, it must currently be hosted by an image host. Also, be sure to use the Direct URL or Direct Link provided by the image host typically located in their image share options.
A few websites you can upload your images to:
DeviantArt
Flickr
PhotoBucket
ImageShack
TinyPic
Teletype
The teletype effect allow you to add really small text to your posts when using the following tags:
[tt] [/tt] Text within these tags will appear in a smaller font than text outside of the tags. Example:[tt]Really Small Text[/tt]This would appear as: Really Small Text
This configuration will display the words Really Small Text in a font size smaller than text outside the tags.
Insert Code
You can share coding within your posts using the following tags:
[code] [/code] Text within these tags will appear in a code box when your message is posted. These tags are typically used to display programming code on a message board without the code actually being executed by your web browser. Example:[b]bold text[/b]Using these tags will display the text bold inside a code box without actually converting the words bold text to a bold font.
Insert Quote
You can use a quote box to quote text that you are wanting to share to other members of the forum, this is done using the following tags:
[quote] [/quote] Text within these tags will appear in a quote box when your message board thread is posted. This is often used to quote something someone has said in another post. Example:[quote]This is what they said![/quote]This will appear as:
This is what they said!
This will display the sentence This is what they said in a quote box.
Insert List
It's possible to create a list in your post using the following list tags:
[ul]
[li]
[/li][/ul]Place the content you would like to appear on the list to the right of the [/li][li] tags. You can add additional [/li][li] tags if you want to add more items to your list. Example:
[ul]
[li] Item One
[/li][li] Item Two
[/li][li] Item Three
[/li][li] Item Four
[/li][/ul]This is how it appear after being posted:
- Item One
- Item Two
- Item Three
- Item Four
When you post your comments to the message board, this configuration will display the words Item One, Item Two, Item Three, and Item Four in a vertical list format complete with bullet points.
Colors
You can also add different text colors to your post by using the following color tags:
[color=blue ] [/color] Then, any text within these tags will be blue in color when your post is made. Example:[color=Red]This text is red.[/color]This is how it would appear once posted: This text is red.
You can also use hex color codes for more precise color control. Example:
[color=dd0030]This text is an off-red.[/color]This will appear as: This text is an off-red.
NOTE: The tags will only work if it is spelled as 'color' not 'colour'.
Linking Text
This code will enable you to link text to another website or page by using the following tags:
[url=Insert URL here]Insert text here[/url] To make these work, paste the URL of the website you want to link to next to the '='. Then just before the '[/url]' you type the text you want to link. Example:[url=http://koai-comics.proboards.com/index.cgi?board=acceptedapps&action=display&thread=491]Officer Kanai[/url]When posted this will appear as: Officer Kanai
Linking Images
Now this is basically combining the image tags and the linking text tags. You you the following tags if you want to link a picture to a webpage or website:
[url=URL of webpage][img]direct URL of picture[/img][/url] This will create your image to become linked, so when clicked on it will take you to a different page. Example:[url=http://koai-comics.proboards.com/index.cgi?board=acceptedapps&action=display&thread=491][img]http://i48.tinypic.com/2j1vq5k.gif[/img][/url]This will appear as:
Suggestions!
If anyone knows any Codes/tags that were not listed here, it'd be much appreciated if you can tell me by posting a comment below x3 And if you do suggest some tags, please explain how they work and what they do ^_^
I hope this little guide was some help, and I hope you all have a nice day :3
