III. Using NBBC

[ Previous: K. URL Autodetection | Next: IV.A. Alphabetical Function List ]

L. Styles, Colors, and CSS Considerations

NBBC is responsible for turning BBCode input into safe XHTML output, but one thing that it does not do is any styling of the output. For example, if you install NBBC and start using it without any CSS styles, you'll see this:

instead of seeing this:

Clearly, the latter appearance is preferable: It has a nice blue box with a title area, and formats its content attractively. So why doesn't NBBC do this by default? Because that's probably not what you want.

NBBC can be used on a wide variety of web sites, and it has no way of knowing what kinds of color schemes and fonts and artwork you're using for the basic theme of your site. You could have a white background with black text, a black background with white text, a red background with yellow text, or even an ugly purple image background with hideous green text; and in all of those, NBBC needs to be able to conform to your needs, not the other way around. So instead of producing quotes that are always black-on-white with a specific border, or rules that are always indented, NBBC's Standard BBCode Library outputs fairly generic XHTML with very specific CSS classes attached to it so that you can use your own CSS rules to style the output exactly as you want.

These are the CSS classes output by NBBC, grouped more-or-less by type:

• bbcode_spoiler: <span> that contains a spoiler.
• bbcode_acronym: <span> that contains an acronym.
  
  
• bbcode_left: <div> that aligns content to the left.
• bbcode_right: <div> that aligns content to the right.
• bbcode_center: <div> that aligns content to the center.
• bbcode_indent: <div> that indents its content.
  
  
• bbcode_columns: <table> that is used to generate multiple columns.
• bbcode_column: <td> that contains any single column.
• bbcode_firstcolumn: <td> that contains the first column in a group.
  
  
• bbcode_code: <div> that wraps around a whole code block.
• bbcode_code_head: <div> that wraps around the "Code:" title area.
• bbcode_code_body: <div> that wraps around content of a code block.
  
  
• bbcode_quote: <div> that wraps around a whole quote block.
• bbcode_quote_head: <div> that wraps around the "So-and-so wrote:" title area.
• bbcode_quote_body: <div> that wraps around content of a code block.
  
  
• bbcode_url: <a> that was generated by a [url] tag.
• bbcode_email: <a> that was generated by an [email] tag.
• bbcode_wiki: <a> that was generated by a [wiki] or [[wiki]] tag.
• bbcode_img: <img> that was generated by an [img] tag.
  
  
• bbcode_list: <ul> or <ol> that was generated by a [list] tag.

Generally, you will not want to provide CSS for most of these. NBBC uses inline styles for some tags whose purpose is obvious, such as [center] and [list], so the CSS classes are mainly included for convenience and completeness. Typically, you'll want to provide CSS for about half of these classes, like this example for a typcial black-on-white site with blue accent colors:

In short, you will need to provide some kind of CSS for [acronym], [spoiler], [columns], [quote], and [code], primarily because NBBC can't guess in advance what colors and images and backgrounds to use for them.

Hopefully, it doesn't need to be said that you also should wrap the entire BBCode output in a <span> or <div> if you intend to style content within it. NBBC intentionally does not include a container <span> or <div> so that you can decide for yourself what kind of wrapper to use and whether to include additional content of your own before or after the BBCode output. You may want to see the SetRootInline() and SetRootBlock() functions, which contain more information on the subject of wrapping the output in an HTML container element.

For more example CSS that you can use, look in the appendix section with CSS Examples.

[ Previous: K. URL Autodetection | Next: IV.A. Alphabetical Function List ]