by Diego » February 17th, 2011, 12:08 pm
Go to your ACP (Administration Control Panel) then click on the Posting tab. Next, click on BBCodes on the left. Since you haven't added any custom ones yet, click on the Add a new BBCode button. You will now see 3 text input areas and a checkbox. The BBCode usage box is where you enter the BBCode -- i.e. similar to what users will enter. The HTML replacement text box is where you enter the HTML replacement code. The Help line text box is where you can enter a tip on how to use your new BBCode. Tips are generally displayed when the user rolls his or her mouse over the BBCode button on the posting screen. Finally the Display on posting page option allows you to show or hide the button on the posting screen. Hiding the button does not disable the BBCode -- users can still manually enter the BBCode.
Now let's go over the BBCode usage text field. Here's where you enter your BBCode. It's pretty easy -- all you need to do is add your BBCode and tokens (special uppercase words surrounded by { and } -- think of them as specialised wild cards like when searching Google). The tricky part is determining where to put your tokens and if your tag needs any extra properties/arguments. Let's create a very simple [red] BBCode that makes text red. You would enter:
Code: Select all
[red]{TEXT}[/red]
What tokens can I use? You can use the following:
{TEXT} -- matches anything
{NUMBER} -- matches a number of any length
{EMAIL} -- matches a valid email address
{URL} -- matches a valid URL
{LOCAL_URL} -- matches a local (i.e. same domain) URL
{COLOR} -- matches a HTML hex color code like #000000 or a CSS colour name like blue
HTML replacement field
This is where you enter the HTML for the BBCode. Don't forget to replace all the tokens you used above in the BBCode usage field. Continuing our example from above, to make text red with the [red] BBCode you would use this HTML replacement:
<span style="color: red;">{TEXT}</span>
Help line field
Very simple -- enter a short description on how to use your new BBCode and/or what it does.
Display on posting page option
If you check this box, then the button for this BBCode won't show up on the posting page. Please note that this doesn't disable the BBCode -- it just "hides" it. Users can always manually type it in. If you decide to not display the BBCode button, be sure to provide an alternate way for your users to know about it (i.e. an announcement).
Other BBCode options
To edit a BBCode, simply click on the edit icon in the main BBCode admin screen. To delete a BBCode you no longer need, just click on the delete icon from the main BBCode admin screen. Note if you delete a BBCode, the text and actual BBCode remain but the HTML replacement is also removed. In other words, if you delete the BBCode, your red text will no longer be red and will simply be displayed as [red]text[/red].
Commonly Requested BBCodes
Just copy and paste these frequently requested BBCodes into your admin panel.
Strike through text
BBCode usage:
[strike]{TEXT}[/strike]
HTML replacement:
<span style="text-decoration: line-through;">{TEXT}</span>
Example usage:
[strike]strikethrough text[/strike]