What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

Tutorial RpNation - BBCode+ Guide

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
BBCode+ Guide
Getting Started
Examples
Reference
BBCode+ is a set of more advanced BBCode functionality allowing for exciting new coding possibilities. This guide will introduce you to how it all works, while also providing some reference information once you have learned the basics.
What is BBCode+?
BBCode+ consists of a set of special BBCode tags which can interact with each other to produce new and interesting effects. Together they serve to bridge the gap between BBCode and HTML/CSS/JS, allowing for unprecedented customization options. Unlike other tags which serve as simple HTML substitutes, BBCode+ tags can be used to create your own forms, CSS classes and (limited) JavaScript scripts, which can be used to provide additional interactivity and create more complex layouts in fewer lines of code.
This guide introduces each aspect of BBCode+ progressively, as you do not need to know every component to make use of it.
BBCode+ was created by @Lyro as part of the move to XenForo 2.
Who is BBCode+ for?
The functionality provided by BBCode+ assumes a certain level of proficiency with more ordinary BBCode. You should have a solid understanding of the fundamentals of coding in ordinary BBCode, though knowledge of other tags is not a prerequisite. Knowledge of CSS and some JavaScript may also come in handy.
DIVs, created using the
[div][/div]
tag, are the basis of all the BBCode+ functionality. All the other BBCode+ tags' effects are realized through DIVs (with the exception of inputs; see their section).
A DIV is exactly the same as an HTML DIV - in fact, BBCode DIVs get directly converted to HTML DIVs. They are a basic, solid block of content that can be customized using CSS.
Basic usage of a DIV works just like any other BBCode tag, with the option tag used to apply CSS properties to the DIV. Here is an example of a DIV with a red background and a blue border:
[div=background: red; border: solid 5px blue;]A DIV with a red background and a blue border.[/div]
A DIV with a red background and a blue border.
Where things get interesting is that, unlike other tags, DIVs can have multiple options specified using a syntax similar to HTML. In DIV's case, there are two options:
style: the default option when no options are named. Applies CSS properties to this specific DIV instance and no other. class: the name of a class to which this DIV belongs. Classes will be detailed in the next section, but for now it is enough to know that this option accepts one or more identifier strings.
To illustrate usage, the same example as before is given below, except this time the DIV also gets assigned to two classes named
classy
and
sassy
:
[div style="background: red; border: solid 5px blue;" class="classy sassy"]A DIV with a red background and a blue border, and two classes.[/div]
A DIV with a red background and a blue border, and two classes.
Note the use of
"
to surround the option values. This is necessary when dealing with values that contain spaces; if your values do not contain spaces, they can be omitted. If your values contain
"
, however, you'll want to escape them, in order to indicate to the BBCode interpreter that they do not mark the end of the value. To do so, prepend them with
\
. If you wish to escape a
\
, you can also prepend it with
\
, producing code like this:
\\"
.
The true power of BBCode+ becomes apparent once you start using classes. A BBScript class corresponds almost exactly to a standard HTML/CSS class, albeit one with some restrictions applied. Classes can be used to apply the same effects to multiple entities, while also being useful to decouple styling from structure.
Classes are indentified by their name, which can only contain letters or underscores:
class VALID aClassName VALID a_class_name VALID a-class-name INVALID 123classname INVALID
A classed DIV can have CSS styling applied to it using the
[class][/class]
tag. The properties inherited from a class can always be overriden on a per-DIV basis using the style tag. The class tag has the following options: name: the default option if the standard notation is used. Specifies the name of the class the styling will apply to. state: the state of the DIV on which to apply the style; can be "active", "focus" or "hover". If left unspecified, it will apply to the default state. The first two listed states are usually only used for inputs.
The example from the previous section is re-used here; however, instead of using an inline style, this one makes use of the class system, while also adding an effect to invert the colors on mouse hover:
[class=redBlue] background: red; border: solid 5px blue; [/class] [class name=redBlue state=hover] background: blue; border: solid 5px red; [/class] [div class=redBlue]A DIV with a red background and a blue border... until it gets hovered over.[/div]
A DIV with a red background and a blue border... until it gets hovered over.
In addition to DIVs, it is possible to use the
[input][/input]
tag to let the user input text and click on buttons. Like DIV, the input tag is classable and is the equivalent of the HTML tags input and textarea. Like DIV, it possesses multiple options, which will not all be listed here (see the reference for the full list); the most important ones are type, which determines the type of the input, and class, which specifies the list of classes applied to the input.
There are four types of input: text (for normal, single-line text), password (for a single-line password field), textarea (for multi-line text) and button (for a clickable button). An example of all four is given below (with some simple styling):
[class=input] background-color: #F9F9F9; border: solid 1px #A0A0A0; border-radius: 3px; box-sizing: border-box; padding: 5px; margin: 5px 0; width: 250px; [/class] Username: [input class=input type=text placeholder="Your username..."][/input] Password: [input class=input type=password placeholder="Your password..."][/input] Description: [input class=input type=textarea placeholder="A quick description of yourself..."][/input] [input type=button]Register[/input]
Username:
Password:
Description:
Of course, none of this is very useful without the ability to use the user's input. This is where scripts come in...
Aside from some tags like accordions or tabs, which allow for limited user interaction, it is impossible to add interactivity to your posts with normal BBCode. This is where scripts come in.
Scripts are short programs that are attached to your post which allow you to manipulate information and dynamically alter the layout of your post. The standard scripting language for web pages, for example, is JavaScript, a powerful language that lets you completely alter the content of a web page. This can be a security risk, however, if anybody can write their own snippets of JavaScript. This is why BBCode+ introduces a simple, restricted language called BBScript which gets automatically converted to JavaScript.
In order to define a script, you must first attach it to a class in use in your document through a DIV or an input using the class parameter (the default parameter if using the single option notation). You must then specify when it is run through the on parameter, which can be set either to init (when the element is loaded), click (when the element is clicked), change (when the value of the input changes), dblclick (when the element is double-clicked), mouseenter (when the mouse moves over the element), mouseleave (when the mouse leaves the element), scroll (when the element is scrolled); by default, this value is init.
Once you have defined the script's context, you must specify its content using the BBScript language. It is a very simple language, where each line corresponds to a statement to be executed: the first word names the function to be called, and all subsequent text on the line is interpreted as parameters. Here is an example of a simple script which changes the content of a DIV when it is clicked:
[script=clickDiv] set clickCount 0 [/script] [script class=clickDiv on=click] inc clickCount setText "Clicked ${clickCount} times!" [/script] [div class=clickDiv style="cursor: pointer;"][b]Click me![/b][/div]
Click me!
Let's go through that example. The first script is used to initialize a variable, a named value that can be used throughout all your scripts; variables can contain either integers or text (in which case they are often referred to as strings). The initialization is done using the command
set clickCount 0
, which can be read as "set the variable clickCount to the value 0". The set function can also be used to initalize a string, which would take the form
set textVariable "My text."
; if your text contains a
"
, it can be escaped using
\"
; the backslash can also be escaped if needed.
While the first script is run only once, when the post is loaded, the second script runs every time the clickDiv is clicked by the user. It begins by incrementing the variable clickCount by 1 ("inc" is short for increment), followed by setting the text of the element to "Clicked ${clickCount} times!". Note that ${clickCount} is special in that it gets replaced by the value of the variable clickCount: variables can be inserted in strings in this fashion, by surrounding their name with
${}
.
Additionally, some functions such as
getText
or
random
can return values, which can be stored in variables. To use a function's return value, simply surround the call to the function with parentheses, as is done here:
set aVariable (random 1 10)
(stores a random number from 1 to 10 in aVariable).
Finally, you can insert line comments in BBScript by prepending your comment with "//" at the start of the line. Comments can make it easier when you or others need to re-read your code, and you are encouraged to use them liberally.
This is a simple example of the power of BBScript, but so much more is possible. To see just how much can be done, take a look at the examples, which showcases some basic uses, and the BBScript reference, for a complete list of functions that can be used.
BBScript 2
Once you start to get the hang of BBScript, you may realize how limited its syntax is. To remedy this, a new version of BBScript was conceived which allows for much greater flexibility: BBScript 2. If you are already familiar with BBScript 1, here is a short list of the major differences:
  • Every function call must now be surrounded by parentheses, not just the inline calls. This makes it possible to have function calls span multiple lines.
  • Functions calls can now be nested any number of levels.
  • The
    ${myVariable}
    syntax is gone now. Use the new
    +
    function instead to concatenate strings.
  • It is now possible to define arrays using this syntax:
    [1 2 3]
  • Any many new functions are available for use, including
    group
    , which lets you join function calls together for use in some functions. See the function reference for a complete list.
  • All strings need to be quoted now.
  • Targets are named using strings now, so you can freely use either string literals or string variables to name your targets.
  • Comments are no longer possible for now, but may be re-introduced at a later time.
To enable BBScript 2, add
version=2
to your script tag.
Here is an example of two equivalent scripts in BBScript 1 and 2 (note that the special formatting done in BBScript 2 is optional - you can still write everything on one line):
BBScript 1:
Code:
[script class=aClass]
    if (eq 1 2) (setText "True!") (setText "False!")
[/script]
BBScript 2:
Code:
[script class=aClass version=2]
    (if
        (== 1 2)
        (setText "True!")
        (setText "False!")
    )
[/script]
A new feature of BBCode+ is the ability to define custom CSS animations. This is done through the use of the [animation] and [keyframe] tags, as illustrated below:
[animation=myAnimationName] [keyframe=0] color: blue; [/keyframe] [keyframe=50] color: yellow; [/keyframe] [keyframe=100] color: red; [/keyframe] [/animation]
That animation can then be referenced from your CSS by naming it like this:
{post_id}myAnimationName
. The
{post_id}
prefix is necessary due to the way BBCode+ works, and will be replaced at display time with a randomly-generated value.
This below box lets you generate a simple character sheet's BBCode automatically by inputting a character's name, age and description. It makes use of fields, variables and transition effects (slideDown in this instance).

Apply to Generic RP #42

Interested in applying to our roleplay? Fill in your character's details below to generate your character sheet automatically!

Name:

Age:

Description:


[b]Name:[/b]

[b]Age:[/b]

[b]Description:[/b]

Code:
[div class=csgform]
[div class=csgtitle]Apply to Generic RP #42[/div]
[div class=csgintro]Interested in applying to our roleplay? Fill in your character's details below to generate your character sheet automatically![/div]
[div class=csglabel]Name:[/div][input class="csginput csgname" type=text][/input]
[div class=csglabel]Age:[/div][input class="csginput csgage" type=text maxlength=3][/input]
[div class=csglabel]Description:[/div][input type=textarea class="csginput csgdescription"][/input]
[input class=csgsubmit type=button]Generate Character Sheet[/input]
[div class=csgcode][plain][b]Name:[/b] [/plain][div class="csgvalue csgnameValue"][/div]
[plain][b]Age:[/b] [/plain][div class="csgvalue csgageValue"][/div]
[plain][b]Description:[/b] [/plain][div class="csgvalue csgdescriptionValue" style="white-space: pre;"][/div][/div][/div]
[nobr]
    [class name=csgform]
        background: #F0F0F0;
        box-shadow: 0px 0px 10px #A0A0A0;
        box-sizing: border-box;
        max-width: 600px;
        margin: 20px auto;
        padding: 10px;
        width: 100%;
    [/class]

    [class name=csgtitle]
        box-sizing: border-box;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
    [/class]

    [class name=csgintro]
        box-sizing: border-box;
        font-style: italic;
        margin: 10px 0;
        text-align: center;
    [/class]

    [class name=csglabel]
        box-sizing: border-box;
        display: inline-block;
        font-weight: bold;
        padding: 10px;
        vertical-align: top;
        width: 40%
    [/class]

    [class name=csginput]
        background-color: #FFFFFF;
        border: solid 1px #C0C0C0;
        border-radius: 5px;
        box-sizing: border-box;
        display: inline-block;
        margin-bottom: 10px;
        padding: 10px;
        width: 60%;
    [/class]

    [class name=csgsubmit]
        box-sizing: border-box;
        display: inline-block;
        font-size: 22px;
        font-weight: bold;
        padding: 10px 0;
        width: 100%;
    [/class]

    [class name=csgcode]
        background-color: #dedede;
        border: solid 1px #a9a9a9;
        box-sizing: border-box;
        display: none;
        font-family: 'Courier New', monospace;
        margin-top: 20px;
        padding: 10px;
    [/class]

    [class name=csgvalue]
        display: inline;
    [/class]

    [script class=csgsubmit on=click]
        // Hide the current code if it was displayed
        hide csgcode

        // Get the values and store them in variables
        set name (getVal csgname)
        set age (getVal csgage)
        set description (getVal csgdescription)

        // Fill in the user values
        setText ${name} csgnameValue
        setText ${age} csgageValue
        setText ${description} csgdescriptionValue

        // Show the generated BBCode
        slideDown 1000 csgcode
    [/script]
[/nobr]
The below example illustrates several CSS effects and conditional code using the if function. The correct PIN is 1234.
Please enter your PIN.
1
2
3

4
5
6

7
8
9

0
RESET

____
ACCESS GRANTED
[nobr] [div class=keypad] [div class=instructions]Please enter your PIN.[/div] [div class="key numkey"]1[/div][div class="key numkey"]2[/div][div class="key numkey"]3[/div][br][/br] [div class="key numkey"]4[/div][div class="key numkey"]5[/div][div class="key numkey"]6[/div][br][/br] [div class="key numkey"]7[/div][div class="key numkey"]8[/div][div class="key numkey"]9[/div][br][/br] [div class="key numkey"]0[/div][div class="key resetkey" style="width: 60px;"]RESET[/div][br][/br] [div class=pin]____[/div] [div class=access]ACCESS GRANTED[/div] [/div] [class=keypad] background-color: #F0F0F0; box-sizing: border-box; line-height: 1; margin: 10px auto; text-align: center; width: 200px; [/class] [class=instructions] box-sizing: border-box; color: #4c4c4c; font-style: italic; font-weight: bold; padding: 15px 10px; [/class] [class=key] background-color: #D0D0D0; box-sizing: border-box; color: #000000; display: inline-block; font-size: 14px; height: 30px; line-height: 0; outline: solid 1px #b7b7b7; padding: 15px 0px; text-align: center; width: 30px; [/class] [class name=key state=hover] background-color: #A0A0A0; box-sizing: border-box; cursor: pointer; [/class] [class=pin] background-color: #212322; box-sizing: border-box; color: #25b925; display: inline-block; font-family: 'Courier New', monospace; font-size: 24px; font-weight: bold; letter-spacing: 10px; margin: 10px auto; padding: 10px 0px 10px 10px; text-align: center; [/class] [class=access] box-sizing: border-box; color: green; display: none; font-family: 'Courier New', monospace; font-size: 20px; font-weight: bold; padding: 10px 0; [/class] [script=keypad] set curChar 0 set firstChar _ set secondChar _ set thirdChar _ set fourthChar _ [/script] [script class=numkey on=click] if (le ${curChar} 5) (inc curChar) (stop) set keyText (getText) if (eq ${curChar} 1) (set firstChar ${keyText}) if (eq ${curChar} 2) (set secondChar ${keyText}) if (eq ${curChar} 3) (set thirdChar ${keyText}) if (eq ${curChar} 4) (set fourthChar ${keyText}) setText "${firstChar}${secondChar}${thirdChar}${fourthChar}" pin // Check if the correct value was entered. set numCharValid 0 if (eq ${firstChar} 1) (inc numCharValid) if (eq ${secondChar} 2) (inc numCharValid) if (eq ${thirdChar} 3) (inc numCharValid) if (eq ${fourthChar} 4) (inc numCharValid) if (eq ${numCharValid} 4) (fadeIn 1000 access) [/script] [script class=resetkey on=click] set curChar 0 set firstChar _ set secondChar _ set thirdChar _ set fourthChar _ setText "____" pin hide access [/script] [/nobr]
Using BBCode+, you can create your own customized tab system. In fact, the navigation sidebar of this very tutorial is coded using BBCode+'s scripting potential. Below is a very simple example of a custom tab system using the same principle.
Information
Rules
Characters
Some general information about Generic RP #42.
[nobr] [class=tabs] background-color: #509cf7; border-radius: 5px; box-shadow: 0px 0px 5px #000088; box-sizing: border-box; color: #e4eeff; font-size: 18px; font-weight: bold; line-height: 1; margin: 20px auto; min-width: 350px; text-align: center; width: 50%; [/class] [class=tab] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; [/class] [class name=tab state=hover] background-color: #2b7abb; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} Information) (show tabsContentInformation) if (eq ${currentTab} Rules) (show tabsContentRules) if (eq ${currentTab} Characters) (show tabsContentCharacters) [/script] [div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]Information[/div][div class=tab]Rules[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]Characters[/div][/div] [div class="tabsContent tabsContentInformation"]Some general information about Generic RP #42.[/div] [div class="tabsContent tabsContentRules" style="display: none;"]A few rules you should follow in this roleplay.[/div] [div class="tabsContent tabsContentCharacters" style="display: none;"]Create your character using the provided character generator.[/div] [/nobr]
This is a reference for all BBScript 1 functions. Parameters in brackets are optional; their default value is indicated using "=". TARGET, by default, refers to the specific element which triggered the event. If the function returns a value, its type will be indicated using "->"; returned values can be used by some functions as parameters.
Post Functions
addClass CLASS [TARGET]
Adds the specified class to the target.
removeClass CLASS [TARGET]
Removes the specified class from the target.
fadeIn [DURATION=1000] [TARGET]
Makes the target fade in over the specified amount of time.
fadeOut [DURATION=1000] [TARGET]
Makes the target fade out over the specified amount of time.
fadeToggle [DURATION=1000] [TARGET]
Makes the target fade in or fade out, depending on its current state, over the specified amount of time.
hide [TARGET]
Instantly hides the target.
show [TARGET]
Instantly shows the target.
getText [TARGET] -> string
Gets the text value of the target, excluding all child tags' names.
setText TEXT [TARGET]
Sets the text value of the target.
getVal [TARGET] -> string
Gets the value of the target input tag. To be used with input tags only.
setVal VALUE [TARGET]
Sets the value of the target input tag. To be used with input tags only.
slideDown => [DURATION=1000] [TARGET]
Makes the target slide down over the specified amount of time.
slideToggle => [DURATION=1000] [TARGET]
Makes the target slide down or up, depending on its current state, over the specified amount of time.
slideUp => [DURATION=1000] [TARGET]
Makes the target slide up over the specified amount of time.
Variable Functions
dec VARIABLE [DECREMENT=1]
Decreases the value of the variable by the specified amount.
inc VARIABLE [INCREMENT=1]
Increases the value of the variable by the specified amount.
set VARIABLE VALUE
Sets the value of the variable to the specified value.
Flow Control
if TEST_FUNCTION IF_FUNCTION [ELSE_FUNCTION]
Performs a test using one of the comparison functions. If the test is successful, IF_FUNCTION is executed; otherwise, if specified, ELSE_FUNCTION is executed.
stop
Prevents execution of further statements in this script; useful when combined with if functions.
Comparison Functions
eq VALUE1 VALUE2 -> boolean
Tests if VALUE1 is equal to VALUE2.
ge VALUE1 VALUE2 -> boolean
Tests if VALUE1 is greater than VALUE2.
geq VALUE1 VALUE2 -> boolean
Tests if VALUE1 is greater than or equal to VALUE2.
le VALUE1 VALUE2 -> boolean
Tests if VALUE1 is less than VALUE2.
leq VALUE1 VALUE2 -> boolean
Tests if VALUE1 is less than or equal to VALUE2.
Randomization Functions
random LOWER_BOUND UPPER_BOUND -> integer
Generate a random integer between LOWER_BOUND and UPPER_BOUND (included).
This is a reference for all BBScript 2 functions. Parameters in brackets are optional; their default value is indicated using "=". TARGET, by default, refers to the specific element which triggered the event. If the function returns a value, its type will be indicated using "->"; returned values can be used by some functions as parameters.
The below functions are exclusive to BBScript 2. To start using them (and the BBScript 2 syntax), add the
version=2
parameter to your script tag.
BBScript 2
Post Functions
addClass CLASS [TARGET]
Adds the specified class to the target.
removeClass CLASS [TARGET]
Removes the specified class from the target.
fadeIn [DURATION=1000] [TARGET]
Makes the target fade in over the specified amount of time.
fadeOut [DURATION=1000] [TARGET]
Makes the target fade out over the specified amount of time.
fadeToggle [DURATION=1000] [TARGET]
Makes the target fade in or fade out, depending on its current state, over the specified amount of time.
hide [TARGET]
Instantly hides the target.
show [TARGET]
Instantly shows the target.
getText [TARGET] -> string
Gets the text value of the target, excluding all child tags' names.
setText TEXT [TARGET]
Sets the text value of the target.
getVal [TARGET] -> string
Gets the value of the target input tag. To be used with input tags only.
setVal VALUE [TARGET]
Sets the value of the target input tag. To be used with input tags only.
slideDown => [DURATION=1000] [TARGET]
Makes the target slide down over the specified amount of time.
slideToggle => [DURATION=1000] [TARGET]
Makes the target slide down or up, depending on its current state, over the specified amount of time.
slideUp => [DURATION=1000] [TARGET]
Makes the target slide up over the specified amount of time.
addDiv CLASS [TARGET]
Adds a div inside the TARGET class, with CLASS as an initial class.
removeDiv CLASS [TARGET]
Removes CLASS divs inside the TARGET div.
Array/String Functions
count VARIABLE -> integer
Counts the number of elements in an array or string. If array, returns number of elements in array. If string, returns number of characters in the string.
contains VARIABLE NEEDLE -> boolean
Tests if VARIABLE (string or array) contains the NEEDLE, which can either be an array element or a substring, as appropriate.
find VARIABLE NEEDLE -> integer
Returns the index position of the NEEDLE inside VARIABLE (string or array).
index VARIABLE INDEX [VALUE] -> any
Access the value in VARIABLE (string or array) at INDEX position. If VALUE is provided, it will set the value of VARIABLE at INDEX to the provided VALUE.
append ARRAY VALUE -> integer
Adds VALUE to the end of the ARRAY. Returns ARRAY's new length.
insert ARRAY INDEX VALUE -> any
Inserts VALUE in ARRAY at the position INDEX, where INDEX is a number. Returns the inserted value.
pop ARRAY -> any
Removes the last element of ARRAY and returns it.
remove ARRAY INDEX -> any
Removes the element at INDEX from ARRAY and returns it.
reverse ARRAY -> array
Reverses the order of elements in ARRAY and returns it.
join ARRAY [SEPARATOR] -> array
Combines all elements of the ARRAY together in a string. If SEPARATOR is provided, each element will have that separator between them.
shuffle ARRAY -> array
Shuffles the elements in ARRAY and returns it.
slice VARIABLE START END -> array
Returns an string or array containing the elements between the START and END values of an VARIABLE (string or array).
each ARRAY FUNCTION
For each element in ARRAY, perform FUNCTION. The special variable
_
gets set to the value of the current element in the array.
split STRING [SEPARATOR] -> array
Splits STRING into elements of an array, as separated by SEPARATOR. If no separator is provided, it will return an array where each character is an element.
replace STRING NEEDLE REPLACEMENT
Replaces the NEEDLE inside STRING with REPLACEMENT (e.g.
(replace "Hello world!" "world" "RPNation"
would result in "Hello RPNation!").
lower STRING
Returns a copy of STRING where every character has been replaced by its lowercase value.
upper STRING
Returns a copy of STRING where every character has been replaced by its uppercase value.
trim STRING
Returns a copy of STRING where whitespace from both the beginning and the end of the string has been removed.
Variable Functions
= VARIABLE VALUE
Sets the variable to the value.
+ VALUE1 VALUE2 [VALUES#]
Adds together all values. If values are strings or has a string, creates a new string of consisting of the values, for example
(+ "A" "B" "C")
becomes "ABC". Can include any number of values.
- VALUE1 VALUE2 [VALUES#]
Subtracts all values from the first value.
(- VALUE1 VALUE2 VALUE3)
becomes
VALUE1 - VALUE2 - VALUE3
. Can include any number of values.
* VALUE1 VALUE2 [VALUES#]
Multiplies all values together.
(* VALUE1 VALUE2 VALUE3)
becomes
VALUE1 * VALUE2 * VALUE3
. Can include any number of values.
/ VALUE1 VALUE2 [VALUES#]
Divides values from the first.
(/ VALUE1 VALUE2 VALUE3)
becomes
VALUE1 / VALUE2 / VALUE3
. Can include any number of values.
% VALUE1 VALUE2
Finds the remainder of
VALUE1 / VALUE2
.
** VALUE1 VALUE2
Returns
VALUE1 ^ VALUE2
, where VALUE2 is the exponent of VALUE1.
++ VARIABLE
Increases the value of VARIABLE by 1 and returns its new value.
-- VARIABLE
Decreases the value of VARIABLE by 1 and return its new value.
and TEST_FUNCTION1 TEST_FUNCTION2 [TEST_FUNCTION#]
If all TEST_FUNCTION are true, returns true. Otherwise returns false. Can include any number of tests.
or TEST_FUNCTION1 TEST_FUNCTION2 [TEST_FUNCTION#]
If one TEST_FUNCTION is true, returns true, regardless if all other TEST_FUNCTIONs are false. Returns false if all TEST_FUNCTIONs are false.
Comparison Functions
== OPERAND1 OPERAND2
Tests if OPERAND1 is equal to OPERAND2. If equal, return true, otherwise false. OPERANDs can be any type of variable or value.
!= OPERAND1 OPERAND2
Tests if OPERAND1 is not equal to OPERAND2. If not equal, return true; if equal, return false. OPERANDs can be any type of variable or value.
> OPERAND1 OPERAND2
Tests if OPERAND1 greater than OPERAND2. If it is greater, return true, otherwise return false.
>= OPERAND1 OPERAND2
Tests if OPERAND1 greater than or equal to OPERAND2. If it is greater or equal, return true, otherwise return false.
< OPERAND1 OPERAND2
Tests if OPERAND1 less than OPERAND2. If it is less, return true, otherwise return false.
<= OPERAND1 OPERAND2
Tests if OPERAND1 less than or equal to OPERAND2. If it is less or equal, return true, otherwise return false.
> OPERAND1 OPERAND2
Tests if OPERAND1 greater than to OPERAND2. If it is greater, return true, otherwise return false.
Flow Control
group FUNCTION1 [FUNCTION#]
Groups together any number of functions as one single executable function. The entire group can be used as the resulting function of any function that executes a command. Functions inside the group can be separated by newlines as long as it is contained by parentheses. Groups can be nested within groups.
random
Returns a random single floating-point number between 0 and 1.
randomInt MIN MAX
Returns a random integer between MIN and MAX.
time
Returns the number of seconds since January 1st 1970 UTC (i.e. the UNIX epoch).
setTimeout SECONDS FUNCTION
Delays executing FUNCTION by SECONDS seconds. Only full seconds are allowed, no milliseconds. Can be set to a HANDLE name, such as
(= HANDLE (setTimeout SECONDS FUNCTION))
, for later manipulation. Does not block script execution.
setInterval SECONDS FUNCTION
Repeatedly executes FUNCTION every SECONDS seconds. Can be set to a HANDLE name, such as
(= HANDLE (setInterval SECONDS FUNCTION))
, for later manipulation. Does not block script execution.
clearInterval HANDLE
Stops the interval that is declared as HANDLE.
clearTimeout HANDLE
Stops the timeout that is declared as HANDLE.
 
Last edited:

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
Feel free to post any questions specific to BBCode+ here (regular BBCode questions should go elsewhere); you are also free to suggest improvements to the guide, as writing instructions is not my strong suit.
 

ewolf20

the aspiring roleplayer
I am not sure what you mean - I haven't planned on adding any additional examples yet, and the ones featured here are complete.
I meant the examples already done being shown. (Sorry for the way I speakq. It tends to be very vague or confusing to a lot of people).
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
I meant the examples already done being shown. (Sorry for the way I speakq. It tends to be very vague or confusing to a lot of people).
I'm afraid I still don't understand what you mean. Are you referring to the examples provided in the guide above?
 

Vesuvius

‘ —◆— so cry me a river of gold ”
would someone be able to change the appearance of one div by hovering over another?

also wondering if it supports pseudoclass stuff since i haven't seen a way to do it?

thanks!
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
would someone be able to change the appearance of one div by hovering over another?

also wondering if it supports pseudoclass stuff since i haven't seen a way to do it?

thanks!
There might be some trickery possible using things like "inherit", but no, right now there's no way to directly control a div's child's appearance.

There is partial support for pseudo-classes (hover, active and focus, as listed in the Reference section); I may add more complete support later on, but there's no guarantee. At some point, I'd really just be re-implementing CSS, which becomes dangerous because it risks breaking more than just your post's style.
 

Lyro

Errant Chronicler
Moderator
Lord of the BBCode
I have just noticed the guide looks awful on the dark theme. I will attempt to fix the colors in an upcoming update to it.
 

Users Who Are Viewing This Thread (Users: 1, Guests: 1)

  • Top