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
Jürg
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
Jürg
| Type: | Discussion |
|---|---|
| Status: | Archived |
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'.
See the template 'self_contained_starter'.
The new template is really a great starting point. That was the help I needed :-).
Thanks, John. Great support.
Thanks, John. Great support.
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
http://www.concrete5.org/marketplace/addons/magic-tabs/forums/unwan...
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. Seehttp://jqueryui.com/themeroller/...
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.