BBCode Style Guide

[Bee]

Hey everyone! Welcome to the XenForo upgrade.. and the day of broken layouts. Without further ado, here's your guide to getting everything up and running once again.

TEXT | TABLES | BOXES pt.1 | BOXES pt. 2 | FANCYBOXES | LAYOUTS
QUESTIONS & FEEDBACK THREAD​

 

[Bee]

Spoiler: REMINDER: The following codes still work

[noparse][B]Bold[/B] - Makes your text bold.
[I]Italic[/I] - Makes your text slanted, or italic.
[U]Underline[/U] - Underlines your text.

[IMG]http://i.imgur.com/L44ohTQ.jpg[/IMG] - Embed an image.
[URL]http://www.google.com/[URL] - Link to a page.

[COLOR=yellow]Colors text via name.[/color]
[COLOR="#ffff00"]Colors text via hex code.[/color]

[SIZE="1"]Font sizing.[/size]

[CENTER]Alignment - Center[/CENTER]
[LEFT]Alignment - Left[/LEFT]
[RIGHT]Alignment - Right[/RIGHT]
[JUSTIFY]Alignment - Justify[/JUSTIFY]

[ABBR="Text"]Abbreviation[/ABBR] - Abbreviated text.

[JUMPTO=anchor_1]Anchor link[/JUMPTO]
[ANAME=anchor_1]Anchor destination[/ANAME]
[SPOILER=SPOILS]SPOILER TEXT[/SPOILER][/noparse]

HOW TO: NEW TEXT CODES
The following codes have been added to further enhance the appearance of posts.

[exsize] [/exsize]
- Set font size in pixels, ex: ="20" for a 20px font.
[glow] [/glow]

- Creates glowing text, ex: ="#00ccff" for a bright blue glow.

Remember, we have access to the Google Font Library as well in the default [font] tag.

 

[Bee]

HOW TO: TABLES
While XenForo does not retain the same table functionally as vBulletin, it is still possible to present data in the standard row and column format.

Please note: it is not possible to add style modifications to tables at this time. (For example, changing the width or background color of a TR or TD data cell is not allowed) If you wish to specify the width of a table, please consider using a box to contain it.

[TABLE]
[TR][TH]TH example[/TH][TH]This is a header cell.[/TH][/TR]
[TR][TD]TR example[/TD][TD]This is a default row.[/TD][/TR]
[TR1][TD]TR1 example[/TD][TD]This is a styled row.[/TD][/TR1]
[TR2][TD]TR2 example[/TD][TD]This is a styled row.[/TD][/TR2]
[/TABLE]

This code has the following output. As you can see, the various formatting for each cell is housed in the TR tag, with TR, TR1, and TR2 being valid options. The exception to this rule is TH, which will create a header row with it's own formatting regardless of what TR tag it's contained by.

TH example	This is a header cell.
TR example	This is a default row.

[TR1][TD]TR1 example[/TD][TD]This is a styled row.[/TD][/TR1]
[TR2][TD]TR2 example[/TD][TD]This is a styled row.[/TD][/TR2]

Tables can be housed in boxes, and they can be positioned with the float_left and float_right tags. Table width and orientation can be modified by using boxes.

 

[Bee]

HOW TO: BOXES (INTRODUCTION)
Boxes are unique to SWRP's bbcode library. A box is a pre-formatted container that contains text, images, and other boxes. For users who are familiar with HTML, a box performs the same role as a div tag, in a more limited context.

In order to use boxes correctly, one must observe the following rules:

1. A unit of measurement must always be defined in the tag; either px (pixels) or %
2. Character sheets may be formatted with boxes using either px or %
3. All other pages must be formatted with boxes using %

Because the site's layout adapts to the size of each viewer's monitor or mobile device, coding a box size in px (pixels) results in unreadable content for viewers with small screens. Coding a box's size in % (percentages) however, allows the site to adapt properly to screens of all sizes.

Sizing your box in px is only acceptable on the character profile sub-forum. All other entries - factions, story posts, and so on - must use % to ensure readability. This rule is not optional and will be enforced since using fixed width boxes skew how the reactive skin displays on mobile devices. Per Lucid, using px (pixels) outside of the character profile sub-forum will result in an infraction.

The following boxes are currently available:

[abox], [abox2], [abox3], [abox4]
- abox, transparent box
- abox2, transparent box w/border
- abox3, transparent box, centered
- abox4, transparent box, centered w/border

[beebox], [beebox2], [beebox3], [beebox4]
- beebox, regular box (light bg)
- beebox2, regular box w/ border
- beebox3, regular box, centered
- beebox4, regular box, centered w/border

[cbox], [cbox2], [cbox3], [cbox4]
- cbox, darkest background
- cbox2, darkest background w/border
- cbox3, darkest background, centered
- cbox4, darkest background, centered w/border

[fancybox], [fancybox2], [fancybox3], [fancybox4]
- fancybox, box with single border
- fancybox2, box with double borders
- fancybox3, box with single border & image
- fancybox, box with double borders & image

 

[Bee]

BOXES: USAGE
Boxes will not appear in the rich text editor. It is recommended that you switch to the bbcode editor by clicking the small pencil icon on the top right side of the new post toolbar, and that you preview your work periodically to ensure it is working as intended.

Boxes do not work unless their width is defined. For example:

• [abox] content [/abox] does not produce the desired effect.
• [abox=300px] content [/abox] will produce a box 300px wide.
• [abox=50%] content [/abox] will produce a box that takes up 50% of the page.

The above rule is true for abox, beebox, cbox, and their modifiers.

Box modifiers follow a straightforward pattern.

• [abox], [beebox], [cbox] all produce "standard" boxes with varying background colors.
  • [abox] produces a box with no background color; it is completely transparent
    
  • [beebox] produces a box with a 'medium' background color
    
  • [cbox] produces a box with a very dark background color
  
  
• [abox2], [beebox2], [cbox2] all produce their base boxes with a 1px black border outside.
  
  
• [abox3], [beebox3], [cbox3] all produce their base boxes aligned to the center of the page.
  
  
• [abox4], [beebox4], [cbox4] all produce their base boxes aligned to the center with a 1px black border outside.

 

[Bee]

HOWTO: FANCYBOX
Fancybox is a special box with additional styling. Unlike [abox], [beebox], and etc, setting a width is not required. A fancybox will automatically stretch to 100% of the page, unless you put it in a container (box) with a smaller width.

Usage:

[fancybox] content [/fancybox]
[fancybox2] content [/fancybox2]

Spoiler: Examples

This is a fancy box.

[fancybox2] This is a fancy box, too. [/fancybox2]

Fancybox3 and Fancybox4 are special boxes with additional styling that allows for the insertion of an image. Like a standard fancybox it will automatically take up 100% of the page, unless contained in a smaller box.

Usage:

[fancybox3="YOUR IMAGE URL"] content [/fancybox3]
[fancybox4="YOUR IMAGE URL"] content [/fancybox4]

Spoiler: Examples

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

[fancybox4=http://i.imgur.com/JyVpdZP.jpg]
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"


[/fancybox4]

Images over 275px wide will be automatically resized. Smaller images will remain unaffected. At this time, it is not possible to replace the image with a string of text; an image URL must be used.

 

[Bee]

User made templates can be found in the workshops sub-forum.