Developing templates using jQuery.ui Theme Roller

Using jQuery.ui styles

Magic Tabs does not use the jQuery.UI javascript. However, it can use jquery.ui.css themes. The example templates ‘jquery_ui’ and ‘jquery_ui_with_body’ use the jquery.ui.css supplied with Concrete5 to style the tabs. 

The template ‘jquery_ui_with_body’ also uses jquery.ui.css to style the body of the tabs by defining the optional attribute ‘data-body-selected-class=’. Magic Tabs will look for this attribute in any template for the block and apply it for you; or you can just leave it out.

Rolling a Magic Tabs Template

You can use Theme Roller to begin development from any jQuery.UI theme, including those developed with the theme roller, to style tabs.

You are unlikely to achieve a perfect implementation. Some styles from other parts of concrete5 will bleed through and need to be worked around or simply accepted as a limitation. In general, theme-rollered tabs styles should only be used where other aspects of a site use a jQuery.UI rolled theme and good compatibility is needed.  If all you want is some coloured tabs to match your theme, look instead at the self_contained_starter_template.

Before starting, use the developer console or browse the source of your concrete5 theme. You will need a #id or class to restrict the scope of your tabs css so that the jQuery.ui css does not interfere with the concrete5 dashboard. For example, to scope a jQuery.ui based tabs template within Greek Yogurt, you will need #main-container.

First, copy one of the existing alternate templates for Magic Tabs that uses jQuery.UI to your template folder. Open the view.php file and add a class to define your new UI based template to the proforma. For example, ‘jl_magic_tabs_hot_sneaks’.

Now, go to the jQuery.ui theme roller at http://jqueryui.com/themeroller/, click to the  jQuery.ui theme you want to start with and do whatever modification you want to the tabs widget within the theme roller. One thing worth doing is to set the background and borders to match your concrete5 theme. Have a play, it really is easy to design a new look for a set of tabs.

When you are ready, click ‘Download Theme’ (it is highlighted in the Roll Your Own tab of the left sidebar).

Scoping the  jQuery.ui theme

On the next Theme Roller page you only want the css for the tabs, so you can click ‘deselect all’ and then select just the Tabs widget. All that will be left are ‘Core’, ‘Widget’ and ‘Tabs’.

You now need to look for a small box ‘CSS Scope:’ right at the bottom.

Add a theme folder name for your jQuery.ui theme (this is just a file name) and a CSS scope which should be the same class you added to the proforma but with ‘.’ prepended. In our example, this will be ‘ .jl_magic_tabs_hot_sneaks’.

Some of the concrete5 themes may also specify styles that are a bit greedy, so to overcome these while not interfering with the dashboard you may also need to specify an #id for the CSS scope such as ‘#main-container .jl_magic_tabs_hot_sneaks’. (note the space between these to indicate that our tabs are a descendant of the main container). This selector bullies its way in over Greek Yogurt, but purely within the scope of the magic tab design.

If you are rolling a theme for concrete5.7, the scope would be div.ccm-page main .jl_magic_tabs_hot_sneaks.

Now you can download the rolled  jQuery.ui theme by clicking ‘Download’ and saving the zip file.

Transferring to view.css

Now open the downloaded zip file. You are only interested in two of the items within the css part of the downloaded zip. First, copy the associated images folder across from the zip into your custom template. Then open the jquery-ui-…custom.css file, copy its contents and edit them into your view.css. If you have deselected all the unwanted code as above, this will be something like 27kbytes of css.

If you understand the details of jQuery.ui css, you can prune this down considerably further to just the css needed for the tabs and make any further tweaks you want to the styling. In the example provided with Magic Tabs, some of this bloat has been commented out rather than simply deleted so you can see what is possible. More could be removed because only a few lines are relevant, but we are doing this the easy way rather than the precision way.

Note how theme roller has prefixed every selector with a scope specific to your tab design. In our example, ‘#main-container .jl_magic_tabs_hot_sneaks’.

Overcome greedy concrete5 styles

Finally, there may still be some existing theme styles you need to bully your way past. 

In our example with Greek Yogurt, the font from the theme was deliberately allowed to bleed through, but a style was added to remove the text shadow bleeding over from the Concrete5 ui theme. A style has also been added to change the hover colour to yellow so it stands out better than the grey that hot sneak started out with.

The example them roller generated tab templates supplied with Magic Tabs are commented in detail to note where specific modifications have been made.

Editing again

A final thing that is useful to know about theme roller. Within a comment in the css is a link that will get you back to theme roller with your UI theme, so you can make changes easily.

Last updated: over a year ago