Developing Tab 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:
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.
- Copy the template to application/blocks/jl_magic_tabs/templates/your_template_name.
- 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.
- 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
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.