How to create a template with a smooth transition from tabs to tabs body?

Permalink Browser Info Environment
I just purchased Magic Tabs. I would like to style my tabs as shown in attachment "desired-look.png". It has smooth and nicely integrated transistions from the tabs to the tabs body. I did this with the standard jQuery tabs component and some css.
I couldn't figure out how to achieve that look with Magic tabs. The included templates all show a distinct separation between tabs and tabs body (see attachment "current-look.png").

Any help would be greatly appreciated.

Best regards

2 Attachments

Type: Discussion
Status: New
View Replies: View Best Answer
JohntheFish replied on at Permalink Reply
The styles that most Magic Tabs templates take from Concrete5's own css can have difficulty removing the horizontal line between the tab and the tab body.

If you want to build your template on from the C5 styles based templates, then I have addressed how to get round this line in

However, for a blended look, a better starting point is usually the template jquery_ui_with_body. The example you have posted looks very much like a jQuery.ui style. As with the example in the Magic Tabs documentation page, you can 'roll' the relevant css with the ui theme roller and them cut and paste it into a template for Magic Tabs. See

If you have a look at the various standard jQuery.ui themes and experiment in theme roller, you will see what can be easily achieved. For the example you posted 'smoothness' may be a good starting point, with some changes to the 'clickable' text colour.

Then it is a case of following the example I have given in the Magic Tabs documentation to generate css for just the tabs part that can be copied into your Magic Tabs template.

The very important step is to qualify the theme roller output with an #id that encloses the body of your page.

If having used 'theme roller' you need help converting the output to a magic tab template let me know and I can help with that stage.
JohntheFish replied on at Permalink Best Answer Reply
v1.1 of Magic Tabs contains an additional starter template for those designing from scratch who do not want to overcome c5 styles or roll a design with theme roller.

See the template 'self_contained_starter'.
Juerg replied on at Permalink Reply
The new template is really a great starting point. That was the help I needed :-).

Thanks, John. Great support.

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.