Creating Button Set for Joo!BB

Since Version 1.0.0 there is a revised button set system in Joo!BB. There is more flexibility for designers. It is possible to control the button behaviour with CSS.

Before we start, we should have a look at the HTML outputs of a button. There are two of them. This is the standard in the Joo!BB template. Of course, you can customize it your own way if you wish.

1. Form Button 

<button class="class from xml" title="title from xml">
   <span>text from xml</span>
</button>

2. HREF Button 

<a href="href of this button" class="class from xml" title="title from xml">
   <span>text from xml</span>
</a>

Button sets in Joo!BB are located in “JOOMLA_ROOT/components/com_joobb/designs/buttons/” There are 3-4 steps creating a button set:

  1. Creating button set folder
  2. Creating button set xml file
  3. Designing nice button(s)
  4. Creating Translation(s) (optional)

Creating button set folder

For the first you need to create a unique folder. This folder stands for the internal name of your button set. For example “my_button_set”.