With most templates, by default the content of a tab has no border or background. However, the jquery_ui_with_body template will assign the body of a tab the body that a jQuery.ui theme would use.

For other templates, you can add background or borders to any tab body by adding data-body-selected-class to a custom template php (details in the documentation) or by styling the class jl_magic_tabs_divider or jl_magic_tabs_main in your theme or in a custom magic tabs template css.

If you want to assign a different styling to each tab body, each tab boody will have an id like:
#jl_magic_tabs_first_tabname_gix1
#jl_magic_tabs_second_tabname_gix2

Where first_tabname and second_tabname are the lowercased and underscored versions of the tab headings, and gix1, gix2... increments for each tab globally on a page.

hi Johnthefish,

thanks for this....is this done when you are setting up a tab to select the colour you want?? when you are inputting the information??

Magic tabs comes with a selection of alternative block templates that decide how tabs (and in some cases the tab body background) are displayed. These templates are selected by a concrete5 dialog. They cover many of the common requirements of site designers. Each template has a fixed design with no parameters from the edit dialogue.

These templates are each a small php file and a small css file.

To create a custom look for tabs or tab bodies, you can take 2 routes:

1. Edit the css files of your theme to style the elements of magic tabs.

2. Create a custom template by copying an existing template, renaming it, then editing the php and/or css files.

Both approaches require editing css and/or php source files, but only minimal expertise in css or php is required.

Full details of what to edit and how to create a template are given in the Magic Tabs documentation page.