BBC TUTORIAL

FORUMATION BULLETIN BOARD CODE (BBC) TUTORIAL

by Zark


BBC is a watered-down version of HTML markup language.

This code can be typed directly into a normal post page.

To keep it showing as code, put [ code]around it[ /code]

without the spaces.

Code activates in forumotion so I have to corrupt it with a space here.

For blank lines you must hit ENTER key.



Code can be layered, like sandwiches inside sandwiches.

[all][tags]have to be kept in the correct order[/tags][/all]

Don't mix the 'end' slices up!!! They are the reverse of 'beginning' slices.

Some tags take additional info, like:

[ color=red][ b]This is red and bold text.[ /b][ /color]



VANILLA TAGS:

[ center]TITLE[ /center]

[ b]bold[ /b]

[ u]underlined[ /u]

[ i]italicized[ /i]

[ s]striked[ /s]

[ quote]Quote this, Elmer![ /quote] .. says QUOTE, and puts text in a green box.

[ url]http://goto.wherever.com[ /url]

[ image]http://myhost/pic.jpg[ /image] .. full size pic



INFO TAGS:

[ url=https://en.wikipedia.org]English Wikipedia[ /url] .. click the text method

[ image(300px,400px)]http://myhost/pic.jpg[ /image] .. resized pic

[ color=#009900][ size=26]This is green 26px text.[ /size][ /color]

26 appears to be the max limit for font-size in forumotion.



[ list] .... dots precede
 [ *]Entry A
 [ *]Entry B
[ /list]

[ list=1] .... numbers precede
 [ *]Entry 1
 [ *]Entry 2
[ /list]


TABLES:

This is the BBC skeleton of the table .. not too appealing when lacking style.

Forumation editor spaces it as shown:

[ table style=""]
[ tr][ td style=""]cell 1-1[ /td]
[ td style=""]cell 1-2[ /td]
[ td style=""]cell 1-3[ /td]
[ /tr]

[ tr][ td style=""]cell 2-1[ /td]
[ td style=""]cell 2-2[ /td]
[ td style=""]cell 2-3[ /td]
[ /tr]
[ /table]



INLINE CSS (cascading style sheet) STYLES:

This puts the meat on the bare table bones.

Style has to be all on a single line to work, but I am aligning left for ease of reading.

You can get more online, but I found these few useful in games.

Not all of these are used every time .. like if there is no text in the table you don't need color:

style="

width:100px; ... or auto, or 100%

height:75px; ... or auto, or 100%

margin: 0px auto; ... centers the table on the page .. see also [center]

line-height: 1px; ... secret for removing 5px blank line under images in [TD]'s

padding: 0px; .. blank space surrounding items inside [ TD]s or [ TABLE]'s

border: 5px solid #663300; .. or double, or ridge ... skinny border on outside of [TD]

border-spacing: 20px; ... width of colored portion or bkg image inside of [TD]

background-color: #b0c099; ... or red, etc.

background-image: url('https://i.postimg.cc/CBNmc1kT/hedge60.jpg'); .. overrides bkg-color

background-size:100% 100%; .. fills the [ TD] .. can distort image if wrong ratio of W/H

background-repeat:no-repeat; ... repeat is default, like for flowered borders.

color: #990000; ... font color ... could use external vanilla [ color] instead

font-weight:900; ... extra bold ... could use external vanilla [b] instead of 600

text-align:center; ... centers images and text

font-family:Georgia,Arial,Helvetica,sans-serif;

"



TIPS FOR BACKGROUND IMAGES:

Figure out number of rows and columns ([ TR]'s & [ TD]'s) in grid.

Grids are about 700px wide to leave room for borders on a page using antiquated page sizes.

Not everyone has your super-duper-deluxe Windows-15 O/S.

Figure out the gridsize W & H in px, and crop, or enlarge your pic in PSP or other image processor, to match that ratio.

Then divide by number of cells in each direction to get [ TD] size.

The borders are added to the grid size for table width and height.

You don't have to worry about specifying height, except in [ TD]s.

Usually the grid table needs a specified width, or when all the blocks are removed the grid may shrink.



Now, using this, you can analyse a game in Notepad or other word processor.

First make a blank Notepad page to copy for cases like this.

In the code, CTRL-A selects all, CTRL-C copies that to clipboard, and CTRL-V pastes into Notepad blank page.

Using different images, text, widths, and colors, you can use any game as a template to come up with your own game.

CTRL-X is cut, which copies to clipboard, and deletes the selection.

There's not a big variety of layouts. If you want 20 borders, keep putting tables around existing tables. Just copy the code, and edit.