RokCandy Video Tutorial

Learn how to configure and utilise the RokCandy Component with this detailed video tutorial.

Watch Now!

What is RokCandy?

For more information, see the RT Blog. RokCandy is a new component from RocketTheme which provides BBcode-type functionality into Joomla. Therefore, you do not need to worry about the WYSIWYG editor stripping out your custom code, or worry about your HTML abilities in order to use the various Typography and other styled elements. It changes preset syntax, such as [example] to the relevant HTML code, once Joomla parse the article. What does that mean? Well, it means if you type [example] into your content, whether in HTML or normal WYSIWYG mode, it will always show [example] and will not be stripped away on save or reopen. All the changing to HTML, is done via Joomla when it outputs the article onto the site itself.



For example, [example title={title}]{text}[/example] can be set to output the following:-

<div class="example">
	<h3>Title</h3>
	<p>Some content</p>
</div>

How do I configure RokCandy, the Syntax?

RokCandy is outfitted with prebuilt statements, however, with the overriding ability of Joomla 1.5, you can create new ones and override them in the template files, and not have to concern yourself with editing core files. The file is called default.ini and is located in the /templates/rt_akiraka_j15/html/com_rokcandy directory. Similarly, you can also add and control your own in the Administrator (Admin > Components > RokCandy). They will appear in the following format:-

[tag]{text}[/tag]=<tag>{text}</tag>

Such as

[alert]{text}[/alert]=<span class="alert">{text}</span>

As is apparent, each line is separated into distinctive sections. There are two parts, the RokCandy syntax (left of =) and the outputted HTML (right of =). You would create your own tag name and insert them between square brackets, [], followed by {text} and the closing tag with [] brackets again. This segment is followed by the = symbol and following on from that is the HTML output. Note, the {text} is required in both parts to denote what element is to be carried forward. You can use any value between the {} brackets, such as {title} or {link} as long as they are cross referenced in the HTML output as shown in the example below:-

[box title={title} link={link}]{text}[/box]=<div class="box"><h3><a href="{link}">{title}</a></h3><p>{text}</p></div>

Note, the best way to understand the syntax rules is to look at the default.ini file and see what syntax we use.