BB Code Guide
A guide to the BB Code implemented in the project Blog For Dummies
This guide is current to version 0.5.1
| Key: | value = Text or value to be formatted. (Required) | param = Parameter or option. (Optional, unless specified.) |
|---|
All the bb code tags were given a style class or ID for easy customization. You can read about it in the Blog For Dummies Styling document.
Text Formatting
| Syntax | Example(s) | Output |
|---|---|---|
| [b]value[/b] | [b]Bold Text[/b] | Bold Text |
| [i]value[/i] | [i]Italic Text[/i] | Italic Text |
| [u]value[/u] | [u]Underlined Text[/u] | Underlined Text |
| [s]value[/s] | [s]Strikethrough Text[/s] | Strikethrough Text |
| Syntax | Example(s) | Output |
|---|---|---|
| [color=param]value[/color] | [color=red]Colored Text[/color] [color=#ff0000]Colored Text[/color] | Colored Text |
| Note: The color param can either be a color name (ex. red) or a hexidecimal color code (ex. #ff0000). The color param is required! | ||
Fonts and captioning
| Syntax | Example(s) | Output |
|---|---|---|
| [size=param]value[/size] | [size=18px]Text size has changed.[/size] | Text size has changed. |
| Note: The size param is required! | ||
| [font=param]value[/font] | [font=Courier]Text font has been changed.[/font] | Text font has been changed. |
| Note: The font param is required! | ||
| [caps]value[/caps] | [caps]All capital letters.[/caps] | All capital letters. |
| [small]value[/small] | [small]Text is smaller.[/small] | Text is smaller. |
| [big]value[/big] | [big]Text is bigger.[/big] | Text is bigger. |
| [sub]value[/sub] | [sub]Subscript[/sub] and H[sub]2[/sub]O | Subscript and H2O |
| [sup]value[/sup] | [sup]Superscript[/sup] and 2[sup]3[/sup] | Superscript and 23 |
| [tt]value[/tt] | [tt]Teletype Text[/tt] | Teletype text |
| [pre]value[/pre] | [pre]Text will maintain it's spacing.[/pre] | Text will maintain it's spacing |
Positioning and Alignment
| Syntax | Example(s) | Output |
|---|---|---|
| [center]value[/center] | [center]Text will be centered.[/center] |
Text will be centered.
|
| [left]value[/left] | [left]Text will be aligned to the left.[/left] | Text will be aligned to the left. |
| [right]value[/right] | [right]Text will be aligned to the right.[/right] | Text will be aligned to the right. |
| [align=param]value[/align] | [align=center]Text will be centered.[/align] |
Text will be centered.
|
| [align=left]Text will be aligned to the left.[/align] | Text will be aligned to the left. | |
| [align=right]Text will be aligned to the right.[/align] | Text will be aligned to the right. | |
| Note: The align param can be either "left", "right" or "center" and is provided as an alternative to the [center], [left] and [right] tags above. The align param is required! | ||
| [indent=param]value[/indent] | [indent]Text will be indented.[/indent] | Text will be indented. |
| [indent=25px]Text will be indented more.[/indent] | Text will be indented more. | |
Links and Images
| Syntax | Example(s) | Output |
|---|---|---|
| [url=param]value[/url] | [url]http://www.pressworm.com[/url] | http://www.pressworm.com |
| [url=http://www.pressworm.com]Pressworm Development[/url] | Pressworm Development | |
| Note: Without a param specified, the value and param become the same thing, making the link text the same as the link. With a param, the param is the link location and the value is the link text. | ||
| [email=param]value[/email] | [email]dev-team@pressworm.com[/email] | dev-team@pressworm.com |
| [email=dev-team@pressworm.com]Pressworm Projects[/email] | Pressworm Projects | |
| [ftp=param]value[/ftp] | [ftp]ftp://www.fakeftp.com[/ftp] | ftp://www.fakeftp.com |
| [ftp=ftp://www.fakeftp.com]FakeFTP[/ftp] | FakeFTP | |
| Note: The [email] and [ftp] tags work in the same way as the [url] tag. | ||
| [page]value[/page] | [page]2[/page] | Page 2 |
| [post]value[/post] | [post]5[/post] | Post Title |
| Note: The [page] and [post] tags allow you to link to pages and posts within the script. Due to the fact that the most recent posts can be at the top (based on preference) and the pages can change (unless older posts are at top), using the [page] tag is not recommended! The [post] tag however, will always link to the post number specified which matches the permalink. | ||
| Syntax | Example(s) | Output |
|---|---|---|
| [img=param]value[/img] | [img]http://www.pressworm.com/images/pressworm_mascot.png[/img] |  |
| [img=87x42]http://www.pressworm.com/images/pressworm_mascot.png[/img] | | |
| Note: The image param has two parts. The width being the first number and the height being the second number, separated by an X (ex. [img=80x80]). The width and height are optional and it is possible to specify just one. For just the width, include just one number (ex. [img=80]). For just the height, include one number after the X (ex. [img=x80]). The width and height of the image will adjust to keep the image scaled correctly if only one number is specified. But if no width or height is specified, the image will scale to full size. | ||
| Output | ||
|---|---|---|
| Syntax | [url=param][img]value[/img][/url] | |
| Example | [url=http://www.pressworm.com][img]http://www.pressworm.com/images/pressworm_mascot.png[/img][/url] | |
| Note: In the case of the image link, the url param is the location the image will link to, and the img value becomes the url value. Both the param and the value in this case, are required! | ||
Shading and Highlighting
| Syntax | Example(s) | Output |
|---|---|---|
| [shadow=param]value[/shadow] | [shadow]Text with shadow.[/shadow] | Text with shadow. |
| [shadow=red]Text with red shadow.[/shadow] | Text with red shadow. | |
| Note: The shadow will be a grayish black, unless a different color param is specified. The color param can either be a color name (ex. red) or a hexidecimal color code (ex. #ff0000). | ||
| [highlight=param]value[/highlight] | [highlight]Highlighted text.[/highlight] | Highlighted text. |
| [highlight=red]Red highlighted text.[/highlight] | Red highlighted text. | |
| Note: The highlight color will be yellow unless a different color param is specified. The color param can either be a color name (ex. red) or a hexidecimal color code (ex. #ff0000). | ||
| [outline=param]value[/outline] | [outline]Outlined Text.[/outline] | Outlined Text. |
| [outline=redxyellow]Modified outlined text.[/outline] | Modified outlined text. | |
| Note: The outline will be a traditional black and white outline unless a param is specified. The outline param has two parts. The outline color being the first value and the inner color being the second value, separated by an X (ex. [outline=redxyellow]). The param values are optional and it is possible to specify just one. For just the outline color, include just the first value (ex. [outline=red]). For just the inner color, include just the second value after the X (ex. [outline=xyellow]). Keep in mind that if only one of the param values is specified, the outline color will be black and the inner color will be white, depending on which param value is specified. The param values can either be a color name (ex. red) or a hexidecimal color code (ex. #ff0000). | ||
| [glow=param]value[/glow] | [glow]Text with a glow.[/glow] | Text with a glow. |
| [glow=redx1]Text with a light red glow.[/glow] | Text with a light red glow. | |
| Note: The glow color will be yellow and the glow strength will be 2, unless a param is specified. The glow param has two parts. The glow color being the first value and the glow strength being the second value, separated by an X (ex. [glow=redx1]). The param values are optional and it is possible to specify just one. For just the glow color, include just the first value (ex. [glow=red]). For just the strength, include just the second value after the X (ex. [glow=x1]). Keep in mind that if only one of the param values is specified, the glow color will be yellow and the strength will be 2, depending on which param value is specified. The glow color can either be a color name (ex. red) or a hexidecimal color code (ex. #ff0000). The available strength values are 1 for a light glow, 2 for a medium glow and 3 for a heavy glow. | ||
Paragraphs, Lines and Phrases
| Syntax | Example(s) | Output |
|---|---|---|
| [p=param]value[/p] | [p]This is a paragraph.[/p] | This is a paragraph. |
| [p=underline]This is a paragraph with a style class defined.[/p] | This is a paragraph with a style class defined. | |
| Note: The paragraph param is a style class which you can define using a stylesheet. | ||
| [quote=param]value[/quote] | [quote]This is text with quotes around it.[/quote] | "This is text with quotes around it." |
| [quote=Arthur]This text is quoted by me.[/quote] | Arthur wrote: "This text is quoted by me." | |
| Note: The quote param allows you to name the person you are quoting. | ||
| [anchor=param]value[/anchor] | [anchor]Anchor Point[/anchor] | <a name="anchor point">Anchor Point</a> |
| [anchor=point]Anchor Point[/anchor] | <a name="point">Anchor Point</a> | |
| Note: After creating an anchor, you can use the [url] tag to create a link that will point to the anchor. Due to the fact that page content can change, using the anchor tag is not recommended. Only use it if you are sure of what you are doing. For more information on anchor tags, visit here. In this case, the [anchor] tag is only used as the target and the value is Not Required! | ||
| [abbr=param]value[/abbr] | [abbr=Abbreviation]Abbr.[/abbr] | Abbr. |
| Note: The abbr. param is not required, but it is recommended. Without the param, both the param and the value would be the same thing. | ||
| [acronym=param]value[/acronym] | [acronym=Federal Bureau of Investigation]FBI[/acronym] | FBI |
| Note: The [abbr] tag and the [acronym] tag work in pretty much the same way. The only big difference is how the browser interprets them. For definitions of abbreviation and acronym, click these: Abbreviation, Acronym. | ||
| [spoiler=param]value[/spoiler] | [spoiler]This is a spoiler.[/spoiler] | Example unavailable! |
| Note: The [spoiler] tag allows you to warn readers that the content that they are about to read may spoil something for them, like the plot of an upcoming movie. The warning will say "This is a spoiler. View at own risk." If they wish to read the spoiler, all they have to do is hover over the spoiler warning, and it will reveal the text. The spoiler param allows you to change the warning message. | ||
Lists
| Syntax | Example(s) | Output |
|---|---|---|
| [list=param]value[/list] | [list][item]...[/item]...[/list] |
|
| [*]value[/*] or [item]value[/item] | [item]Item 1[/item] [*]Item 2[/*] | |
| Note: You can use the [item] tag or the [*] tag. Either is fine and they both do the same thing. It's all about preference. For the list param the following options for ordered lists are "1" for a numeric list, "A" for a capital alphabetic list, "a" for a lowercase alphabetic list, "I" for a capital roman numeral list and "i" for a lowercase roman numeral list. For unordered lists, the options are "disc" for a filled circle, "circle" for an unfilled circle, "square" for a filled square and "none" for no list type. The default for lists is "disc". | ||
Tables
| Syntax | Example(s) | Output | ||||||
|---|---|---|---|---|---|---|---|---|
| [table=param]value[/table] | [table] [tr][th]Fruits[/th][th]Vegetables[/th][/tr] [tr][td]Apple[/td][td]Corn[/td][/tr] [tr][td]Orange[/td][td]Peas[/td][/tr] [/table] |
| ||||||
| [tr]value[/tr] | ||||||||
| [th]value[/th] | ||||||||
| [td]value[/td] | ||||||||
| Note: The table param can be a style class which you can define using a stylesheet. The table value is a combination of the [tr], [th] and [td] tags. The [tr] tag must be first for the start of the first row. The [tr] value will then be a combination of the [th] and [td] tags. The [th] tag is for column headers and the [td] tag is for normal columns. Use the [/tr] tag to end the row. Follow that pattern for as many rows as you need. | ||||||||
Code Formatting
| Syntax | Example(s) | Output |
|---|---|---|
| [code]value[/code] | [code]<a href='http://www.pressworm.com'>Pressworm Development</a>[/code] | <a href='http://www.pressworm.com'>Pressworm Development</a> |
| Note: The [code] tag allows you to display html code without it processing. | ||
| [nobbc]value[/nobbc] | [nobbc][url=http://www.pressworm.com]Pressworm Development[/url][/nobbc] | [url=http://www.pressworm.com]Pressworm Development[/url] |
| Note: The [nobbc] tag allows you to display bb code without it processing. | ||
| [time=param]value[/time] | [time]1234567890[/time] | 02-13-2009 23:31:30 |
| [time=F d, Y H:i:s]1234567890[/time] | February 13, 2009 23:31:30 | |
| Note: The [time] tag displays a date and time following a default format. The value is optional, which will display the current date and time, but allows you to specify a date and time using a numeric unix timestamp code. The param allows you to change the format. The default format is m-d-Y H:i:s (MM-DD-YYYY 00:00:00). The learn more about this, visit Date function on Php.net and Unix time on Wikipedia. | ||
| [copyright=param]value[/copyright] | [copyright]Pressworm Development[/copyright] | Copyright © Pressworm Development |
| [copyright=2010]Pressworm Development[/copyright] | Copyright © 2010 Pressworm Development | |
| Note: The param allows you to specify a year for the copyright. | ||
| [registered]value[/registered] | [registered]Pressworm[/registered] | Pressworm ® |
| [tm]value[/tm] | [tm]Pressworm[/tm] | Pressworm™ |
Video
| Syntax | Example(s) | Output |
|---|---|---|
| [video=param]value[/video] | [video][/video] | Examples unavailable! |
| [youtube=param]value[/youtube] | [youtube][/youtube] | |
| Note: The [video] tag supports the embed of any video located on your website as well as youtube and google. If a youtube or google video, all you need to supply for the value is the page of the video and the script will determine the embed link of the video automatically. The param for both the [video] tag and the [youtube] tag is the same and has two parts. The width being the first number and the height being the second number, separated by an X (ex. [video=640x360]). The width and height are optional. The default width and height for a youtube video is 640 x 384, for a google video is 400 x 326 and for all other videos is 640 x 360. If you are unfamiliar with adjusting the width and height of videos, I don't recommend it. Incorrect values can cause black space on the top, bottom or sides of the video. | ||
Social Networks
| Syntax | Example(s) | Output |
|---|---|---|
| [facebook=param]value[/facebook] | [facebook=pic]1456090151[/facebook] | |
| [facebook]arthurreeder[/facebook] | Arthur Reeder | |
| Note: The value can either be the facebook users username or user id. The only param currently available is "pic" which will include the facebook users thumbnail picture before their name. | ||
| [twitter]value[/twitter] | [twitter]coreyavis[/twitter] | @coreyavis |
| [twitter]@arthurreeder[/twitter] | @arthursucks | |
| Note: The value can be just the twitter users name or their name with the @ sign. The link will still be created correctly. | ||
Category: Blog For Dummies Documentation | Project: Blog For Dummies