Developing tab templates

Magic Tabs comes with a selection of templates for normal horizontal/top tabs and vertical tabs to the left or right. Some of these use existing concrete5 core styles in whole or in part, while others are completely self contained.

Custom templates contain two parts, a view.php and a view.css. You need to create both of these files in a new template folder:

(v7, v8) siteroot/application/blocks/jl_magic_tabs/templates/your_template_name

(5.6) siteroot/blocks/jl_magic_tabs/templates/your_template_name

This follows the same principles as any other block template, as described in Creating a Template File.

You can start from scratch, or copy and modify the default view for magic tabs or any existing template supplied with the package. A good starting point for a completely custom set of tabs is one of the 'self_contained_starter' templates for regular tabs or left or right vertical tabs. You can also develop templates based on jQuery.ui using the Theme Roller.


The part ot the view.php file you need to modify looks like this:

Naming conventions

Magic Tabs will pull in additional css resources depending on the name of a custom template.

jQuery.ui based custom templates

If a template name contains '_ui' or 'ui_', then the core jQuery.ui css will be loaded.

This is generally a good idea for any ui based theme because it gets loaded anyway when a user is logged in. So while leaving it out may make ui based custom templates easier to develop, leaving it out could end up with differences in how tabs look when a user is logged in.

Core style based custom templates

Several of the templates provided by Magic Tabs, including the default template, make use of the core styling, as used by tabs in the concrete5 dashboard.

If your template extends core styles, you will need to include '_ccm' in the template name. Magic tabs will then know to load the core css file in addition to the view.css from your custom template.

Tabs are best represented by a div containing an unordered list (ul). But Magic Tabs can use any DOM structure as long as it has ‘_proforma’, ‘_proforma_inner_container’ and ‘_proforma_tab_element’ parts.

This proforma is never actually shown on the page. It is used by Magic Tabs to decide how to show a set of tabs. As a minimum, you need 2 customisations:

Insert a class ‘your_template_name’ to the ‘class=’ attribute of the div.

Insert a class (or list of classes) to the ‘data-selected-class=’ attribute. This class will be applied to the currently selected tab element, as in ‘_proforma_tab_element’ and also applied to a link that Magic Tabs automatically inserts within the ‘_proforma_tab_element’.

For additional styling, you can then add classes and styles to any part of the proforma and these will be used for the tabs on your page. 

You can add styles from your site theme, from, from the concrete5 version of jquery.ui.css and from the view.css associated with your template. Examples of all of these can be found in the existing templates.

The associated view.css template is officially optional but for a good set of tabs is usually required unless you have implemented all tab styling in your site theme. 

In the associated view.css stylesheet any class selectors should all begin with ‘.your_template_name’. Within this selector you can then safely define css to style your Magic Tabs template without risk of breaking styles elsewhere on your site.

Different styling for adjacent tabs

Magic Tabs adds 2 classes to each tab element. jl_magic_tabs_ix_NN and jl_magic_tabs_gix_NN, where NN is incremented for each tab within a set (ix) or for each tab on a page (gix). For examples, have a look at the ‘rainbow’ and ‘continuous_rainbow’ templates.

Template configuration quick reference:

  • id=“…_proforma” – the outer container of the tabs header, usually a ‘div’.
  • id=“…_proforma_inner_container” – the inner container of the tabs header, usually a ‘ul’.
  • id=“…_proforma_tab_element” – the element repeated for each tab. Usally an ‘li’. If you don’t specify an ‘a’ within this element, Magic Tabs will add one for you.
  • data-selected-class=“…” – the class or classes to assign to the selected tab.
  • data-body-selected-class=“…” – (optional), the class or classes to assign to the body of the tabs.

Last updated: 4 months ago