Developing Tab Templates

Custom Templates

Magic Tabs comes with many example tab templates for traditional horizontal tab bars and for left and right vertical tabs. All of these also adapt for accordions. For many sites, one of these will fit in with the site theme with no further modification.

Some of these templates use existing concrete5 core styles in whole or in part, while others use theme styles or 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:

  • application/blocks/jl_magic_tabs/templates/your_template_name

This follows the same principles as any other block template, as described in Creating Additional Custom View Templates.

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.

Self Contained Starter Templates

These templates are wholly self contained, not relying on any theme CSS. They provide all the styles necessary for tabs and accordions. If all you want is a custom colour scheme for your tabs and their borders, these templates are easy to modify with your custom colour scheme.

  1. Copy the template to application/blocks/jl_magic_tabs/templates/your_template_name.
  2. Make a global edit in the css and php to replace the class that identifies the template, such as jl_magic_tabs_self_contained_starter with your_template_name.
  3. Find the colours you want to change and make a global edit on them in the css.

The starter templates are:

  • Self contained starter
  • Self contained starter pills
  • Vertical left starter
  • Vertical right starter

Don't feel you are limited to starting from these templates. If you have a bootstrap based theme, many of the other templates can also be easily modified.

Template naming conventions

If your template requires core assets, Magic Tabs can load those assets based on a naming convention for the template. As long as your template name includers the relevant substring, Magic Tabs will ensure the required asset is loaded. Assets supported are:

  • core/app css : '_ccm' or 'ccm_'
  • jquery/ui css : '_ui' or 'ui_'
  • btnPro/button-css css : '_buttons_pro' or 'buttons_pro_'

For example, the template '/vertical_right_ccm/' will automatically load the core/app css asset.

A corollary of this naming convention is that if your template name matches one of these substrings by mistake, you may end up with Magic Tabs unnecessarily loading assets you don't actually need!

The jquery/ui asset is provided for historical compatibility. For concrete5.6 Magic Tabs included an ability to design tabs using a jquery/ui theme. That compatibility has been carried forward to the current version of Magic Tabs, but is no longer encoraged or officially supported. To be honest, it was becoming increasingly messy to keep jquery/ui based tab templates updated and working. jquery/ui based example templates are no longer distibuted with Magic Tabs.

Nevertheless, for those upgrading from earlier version of Magic Tabs, existing jquery/ui tab templates should continue to work.

 

Buttons Factory Pro

Magic Tabs templates can use themes generated by Buttons Factory Pro. To use these templates, you will need Buttons Factory Pro installed.

Four example templates that use a theme from Buttons Factory Pro are provided by Magic Tabs.

  • Buttons pro example
  • Buttons pro pills example
  • Buttons pro vertical left example
  • Buttons pro vertical right example

All of these pull in tab styles from the theme 'your_theme_name'. To use the templates, you will need to install Buttons Factory Pro and then within that addon create a theme with the handle 'your_theme_name'.

Not all Buttons Factory Pro theme styles create nice tabs. The theme styles that work best are 'Limelight' and the various 'Border...' styles. Other styles can work if you also have a strongly contrasting 'Text Color on Hover'. The best shapes to use are 'Default' and 'Rounded'.

If you want to create a new template that uses Buttons Factory Pro, you will need to name it beginning with 'buttons_pro.......' and within the template view.php edit the theme name to match a theme you have created in Buttons Factory Pro.

You should also edit the defining class name to something unique as you would for any new tab template, so the styling does not interfere with other tabs templates on your site.

The template used for this set of tabs uses Buttons Factory Pro!

Avoiding CSS bleed

All Magic Tabs block templates view.php and view.css use a class name unique to the template to prefix all styles. This ensures that each template cannot unwittingly bleed styles into other templates.

For example, the self contained starter template prefixes all styles in the view.css with .jl_magic_tabs_self_contained_starter. In the view.php the proforma for the tabs assigns to the outermost <div> the class jl_magic_tabs_self_contained_starter so tying it to the classes in the css.

When you copy the self contained starter template to applications/blocks/jl_magic_tabs/.... to create your own template, you need to replace this class with your own class name that is unique to your template. 

You can copy any of the supplied Magic Tabs templates to create your own templates. Once copied, you must edit your template to use a unique class name inside.

More details can be found in the comments inside the templates.

Magic Tabs documentation

To help you get started with Magic Tabs, this Getting Started page is built as a series of Magic Tabs with content and other blocks between. You can…
To use Magic Tabs for a straight forward set of tabs, you only need enter a Tab Heading and save the edit dialog. Magic Tabs takes care of everything…
You can create a set of tabs wholly within a single layout cell. You can create a layout wholly within a tab. The important consideration is that the…
This set of Magic Tabs is configured to always show as an accordion. To read about how it is done, please click to open the first accordion tab.
Global settings can be edited directly from the Magic Tabs block edit dialog. These settings are global and will affect all Magic Tabs blocks on a…
Link within a page using the Magic Tabs Jump block or with an href. Link from other pages with a url ?tab=tab_name parameter.
The Magic Tabs Auto Play block automatically cycles through a set of Magic Tabs. With transitions you can turn a set of Magic Tabs into a simple slide…
The Form to Magic Tabs block can be used to break a form or page list into a series of tabs. It works with forms blocks from Express, Legacy Form,…
Details of how the Form to Magic Tabs block is used to split a form into tabs.
Details of how the Form to Magic Tabs block is used to split a a page list into an accordion or tabs
Magic Tabs comes with many example tab templates. For many sites, one of these will fit in with the site theme with no further modification.
If you start building a page with Magic Tabs and don't see the results you expect, here are some tips to help you solve any problems.
Magic Tabs provides JavaScript events and a php interface for developers to integrate to tabs. If you have the Buttons Factory Pro addon, you can use…