BBCode Basics

Introduction

BBCode, short for "Bulletin Board Code," is a simple mark up language common on many forum sites. Chicken Smoothie uses its own modified version of this text-formatting language on nearly all of the the text fields on the site. This allows users to customize and format the appearance of their text, as well as adding in images.

Here are some of the useful places BBCode can be added on CS:

• Forum Posts
  
• Signature
  
• Trade Rules
  
• Trade Messages
  
• Private Messages

BBCode commands follow a simple format. There are two "tags," one which starts the command and one which ends it. Both are surrounded with square brackets ( [xxx] ), but the end tag contains a forward slash ( / ) at the front of its word ( [/xxx]).

The effects of BBCode can be stacked. So that means, for example, that you could have a segment of text which is both bold, underlined, and the color red. A property of each type can be applied as long as everything follows one very important rule: BBCode commands must ALWAYS be closed in the reverse order that you opened them. For example, if we were to replace the commands with colors to represent the pairing of any given command, this is what it would have to look like:

[green][blue][purple] Displayed text. [/purple][/blue][/green]

There can also be two separate commands within a greater tag.

[green][blue] Displayed text. [/blue][purple] Displayed text. [/purple][/green]

The most important thing to remember is just simply to never cut a tag in half, starting one as another tag closes through its effect. NEVER do this:

[green][blue][purple] Displayed text. [/green][/blue][/purple]

Commands

Commands are the basic principles which allows text formatting in BBCode (or any formatting language for that matter). Their effects can be stacked, and the different commands can be fine tuned to perfect the desired look.

Here we will show a brief overview of all the tags on CS, and then each will be covered in more depth afterwards. The objective of this guide is to provide a resource to ease readers into using the basic features of CS's BBCode.

Here are the commands supported with CS's BBCode:

• Bold
• Italics
• Underline
• Strike
• Quote
• Code
• List
• List=
• List Item
• Image
• Link
• Color
• Font-Size
• Center
• Left
• Right

Text Styles

There are four basic text style options available on CS. None of them conflict with each other, so theoretically all of them could be applied to the same text at the same time.

Bold: Adds slight increase for the line thickness in the affected text.
[b]bolded text[/b]Italic: Creates a slight slant to the text.
[i]italic text[/i]Underline: Includes a line beneath the affected text.
[u]underlined text[/u] Strike: Crosses out the text inside of the tag.
[strike]striked text[/strike]

Font Appearances

Changing the color and size of text is a great way to grab attention to important bits of information. It can also be used to create headers, captions, or other formatting elements that don't have specific commands in BBCode.

Color:
[color=(color)]colored text[/color]For example, this may be what the code looks like in use:

[color=blue]This is blue text.[/color]

This is blue text.

The desired color can be set with web safe color names. However, since only a limited amount of colors have official names, the hex code of colors can also be used to set the color value to more specific shades. For the convenience of players, CS has a color picking panel in the full text editor. By clicking the button titled "font color," the site provides a panel of colors, easily accessible for changing the font color to more specific hexes.

However, this is simply for players' convenience; any hex shade at all can be used. To find a specific hex code for any color, check out this cool site.

[color=#808080]This is grey text.[/color]

This is grey text.

Size:
The size that a selection of text is displayed at can be altered with just a short bit of code. CS uses a scale of 1 to 200 to describe the size of text. 200 is the maximum size; larger numbers will not produce larger text. 100 is the default size of regular text that has not been altered. Any number bellow or above 100 will shrink or expand the text, respectively.

[size=1]Size 1 text.[/size] [size=200]Size 200 text.[/size]

Size 1 text. Size 200 text.
Sizing commands only change the size of text; they will not affect images that may be located within the tags.
In the full text editor, there are 4 default size options, beyond the "normal" 100 sized font: Tiny=50, Small=85, Large=150, Huge=200

Text Alignment

Text can be shifted to be aligned on different positions on the screen. This can be useful for fitting small pieces of text between other items (like images) or simply the aesthetic of having a different point of text alignment.

Right:
[right]right alignment[/right]

Left:
[left]left alignment[/left]

Center:
[center]center alignment[/center]

Lists

There are three main options on the full text editor that control list appearances. Technically, there are only two parts that go into making a list, but the third is listed on CS to help with customizing the style and appearance.

List
List on its own, without the equals sign ( = ), indents text to the right. The effect stacks, so if several "list" tags are opened in a row, it will be more and more indented.

[list]One list.
[list]Two list.[/list][/list]

One list.

Two list.

On CS, users often take advantage of this feature to give their posts margins. It doesn't have to be used just to make a "list." However, the list tag does have another feature; it allows the "list item" tag to be rendered as a bullet point instead of showing the raw code.

List Item
The list item is a small code used for easily creating points on a list. It is formed by putting an asterisk ( * ) inside of a square bracket. The advantage to using the list item over pasting special characters is that A) it is guaranteed to render on all devices B) it's quick and easy, especially with the full text editor, and C) its appearance can easily be customized with the "list=" command if you change your mind about how it should look.

Using just the regular list tag, with the equals sign ( = ) will provide the user with simple bullet points. By layering additional list tags, users can create sub points on their lists.

[list][*]One list
[list][*]Two list[/list]
[*]Red list
[list][*]Blue list[/list][/list]

List=
The "list=" feature on Chicken Smoothie can be used to. alter the look of the default bullet points generated by the simple "list" command. This can be used to create a list which is numbered, lettered, or even counts with roman numerals! To set the type of list, place the first step of the sequence you. want after the equals ( = ) sign. It is also important to note that the last tag to close the command is the same as the basic list tag; it does not contain and equals sign ( = ).
[list=1][*] Some cool stuff.
[*] Woooah. [/list]

1. Some cool stuff.
   
2. Woooah.
   

Here are some of the different list styles in use. This also makes use of the left alignment tag, applying a bit more complexity to this particular example.

[left][list=1][*]abc
[*]def
[*]ghi[/list][/left][left][list=A][*]123
[*]456
[*]789[/list]

[list=a][*]123
[*]456
[*]789[/list][/left][left][list=I][*]abc
[*]def
[*]ghi[/list]

[list=i][*]abc
[*]def
[*]ghi[/list][/left]

Quote + Code

Both "quote" and "code" are commands which create a box-like section of text, although the two have very different purposes and uses. Quote is often used for decorative purposes, as well as functional. Code on the other hand is almost exclusively used as its intended purpose. Either way, both are essential tricks to know when entering the world of coding on Chicken Smoothie.

Quote
By surrounding text in quote tags, the post will display it instead of a quote box. This separates it from the main body of text, and adds a nice image of a quotation mark in the upper left hand corner.

[quote]Some very important words.[/quote]

The quote tag is often used automatically in Chicken Smoothie. It will automatically be applied whenever a player replies directly to another player's post, although it can be removed if the poster choses to remove that code. Also, when sending a user a private message by using the "PM" bottom found beneath their profile on a forum post, the text editor will automatically quote their post and link to the topic you contacted them from. This too can be edited before sending the message.

Code
Code boxes are a feature of Chicken Smoothie BBCode which allows users to make code easy to. copy by other members. It also prevents BBCode from taking effect inside of the tag; rather it reads as regular text. There is also a convenient "select all" button which is generated with the code box. This allows players who are reading the post to easily highlight all the text included in the code box, and to then copy it. This is especially useful in shops or clubs which require forms to be filled out.

[code][b]HELLO[/b][/ code]

(the closing tag is not supposed to have a space - but the wiki didn't allow it to be done properly)

Links

Links can add a lot to your post. They're great for making your post more concise, and providing users reading your topic with extra information, or conveniently referencing another website or topic. Chicken Smoothie handles external links (links to other websites) with the exact same methods as internal links (links that connect to another page on Chicken Smoothie). Both are allowed, and can be displayed as just a link (the URL written out onto the page) or as hyperlinked text (when clicking a word or image serves as the link).

Simple Links
Creating a link is often as simple as just pasting the URL of the desired site into your post. That's it!
https://www.google.com https://www.google.com
This should work just fine as long as the posting option Do not automatically parse URLs is not checked in the full text editor. If that option is selected, you can either uncheck it, which will return automatic linking to your post, or you can use the URL tags to manually create the link.

[url]https://www.google.com[/url]

https://www.google.com

Text Hyper Links
To turn a section of text into a link, a very small adjustment to the URL tag must be made. Instead of pasting the desired URL in between the two URL tags, type the words which you want to serve as the link. The actual URL will go inside of the first URL tag, following the command and separated with an equals ( = ) sign.

[url=LINK] Desired text.[/url]
[url=https://www.google.com]Go to Google![/url]

Go to Google!

Images + Gifs

Images and links function exactly the same way on Chicken Smoothie; gifs do not require any special coding! All that is required is the direct image link. The direct image link can be tricky to find the first few time, but once you understand what you're looking for things become easier. You can find the direct link by right clicking on the image and selecting 'Copy Image URL' or 'Copy Image Location' for Google Chrome and Firefox, or by selecting 'Properties', highlighting the given link, right clicking, and selecting 'copy' for Internet Explorer. If you are using Safari on a Mac, you need to right click and select 'Copy Image Address'. You can post the code by right clicking and selecting 'paste.' Nothing else should ever go inside an image tag, although images can be moved with other BBCode commands.

Then, paste the URL in between two image tags.
[img]LINK HERE[/img]
[img]http://static.chickensmoothie.com/archive/image.php?k=9E775B31413163C6095225C4BBC325DC&bg=ffffff[/img]


Smilies

Smilies can be a super fun way to express your opinions in your posts! Like using tags for BBCode, certain combinations of symbols will make smilies appear in your text, provided that you have not disabled them. From the full text editor you can easily select which smilies you'd like to add and it will automatically be inserted. However, simply typing the combination is just as good a method.

:D	:)	;)	:(	:o	:shock:	:?
8-)	:lol:	:x	:P	:oops:	:cry:	:evil:
:twisted:	:roll:	:!:	:?:	:idea:	:arrow:	:|
:mrgreen:	:geek:	:ugeek:	:what:	:thumbup:	:thumbdown:
:silent:	:clap:	:/

Using the Full Text Editor

The full text editor can be a really useful tool for creating BBCode quickly, and efficiently. By clicking the buttons in the top panel, the selected tag will automatically be added to the text wherever the cursor is resting. Even more conveniently, if a selection of text is highlighted when a tag button is clicked, the tags will automatically envelope the selected area. This can be super convenient if you forgot a text alignment tag, or wish to apply a color or size after the rest of the text was written.

The editor also provides a quick and easy way to change the color and size of text. Pressing "font colour" will spring up a menu that allows users to pick a color from a chart. The tag will then automatically be added to the post, hex correctly formatted and all. The same is true for the options that appear upon clicking the "normal" drop down, except in regards to text size.

To the right there is a panel of smilies. Clicking one will automatically apply its code to your post, wherever the cursor is currently located. However, these will only appear in your post if you do not have smilies disabled.

Options

In the full text editor, bellow the main text field there is a tab called "options," which can affect the way your post is displayed. While these can be set for individual posts from the full text editor, as seen above, it is also possible to set a default, which can save you some time if there is something you wish to include or exclude regularly from all of your posts, like a signature. That default can be set in the user control panel.

My Account > Board Preferences> Edit Posting Defaults
Here's the link

Disable BBCode

This setting will prevent any of the BBCode in a given post from taking effect. This means instead of changing the appearance of text to follow the commands, the people reading your post will only see the default text, littered with whatever BBCode tags you may have used. Often people use this to show others how to code. However, people also tend to find using the "code" command easier and more convent in this purpose, so think it though before disabling all the formatting in your post!

Disable Smilies

Some of the smile codes on Chicken Smoothie are commonly used in simple text graphics. Some users prefer the look of the traditional text smile over the smilie itself, and that's ok! Checking the "disable smilies" box will prevent the images from replacing the old-school text faces.

Do Not Automatically Parse URLs

This will prevent links from forming automatically in your post. This can be especially useful if making up fake website names, or giving others instructions about how to use images, as it will prevent distracting dead-end pages from appearing.

Attach a Signature

This will display a user's signature or stamp collection underneath the posts they make. If the user does not want to display their signature on a given post for any reason, then checking this box will simply remove it from the bottom of their post entirely.

Notify Me When a Reply is Posted

This will automatically subscribe you to the topic, meaning that you will receive an email notifying you when other users have made a post. If you've mistakenly subscribed to a topic and wish to stop receiving emails, you can manage your subscriptions here.