Edit Profile tabs | turn into DIVs or sliders ?

I spend a lot of time to style and structure the profile view. I guess, the average end-user is confused by the tab-based display on edit-profile. I mean, all visual layout is lost on edit, because of the endless tabs-row. (Reminds me on MS-Windows properties

If there are many tabs, and the user klicks on one of the inner tabs... the display is shifted. Not easy to follow.

My idea was to get rid of the row-style or even the whole tab-styles. Is it possible to have them vertical (top-to-botton)? It would be nice to turn them into DIVs with a heading... or maybe sliders (accordions).

Any suggestions and tipps are very much appreciated!

It can be completely restyled with a new CB plugin acting on the triggers executed on profile edit. Aside from that or CSS there's no other way to restyle it. This is to be significantly improved with CB 2.0.

I tried to use only CSS... with moderate success.

Since all tabs have ID and classes... and I heared you are a jQuery-guru Would you suggest to manipulate the DOM? Please, can you give a hint or an example?

I would prefer a slider-style, also known as "Accordion". Am i right with my jQuery thoughts? I don´t want to change any core files. The CB template seems to get the tabs-content and order from the core files... Is there any jQuery stuff inside CB, that we could utilize? Something that changes the output on display.

EDIT:
I checked the jQueryUI homepage, and the accordion is easy to understand and use. But the HTML-code has to be in a special order/structure The accordion title DIV is right above each content DIV. Unfortunately, that is not the case for the CB Profile Edit code. So, the output has to be re-arranged...
Is this possible with jQuery (in a reasonable time and effort).

Quite easy to accomplish with about 100 lines of jQuery. You'll need to manipulate the DOM and move elements around (include titles) to get the layout you need. Wouldn't be able to suggest anything without significant time investment, sorry. You can review CB Conditional and see how it re-arranges the DOM if you like.

krileon wrote: Quite easy to accomplish with about 100 lines of jQuery. You'll need to manipulate the DOM and move elements around (include titles) to get the layout you need. Wouldn't be able to suggest anything without significant time investment, sorry. You can review CB Conditional and see how it re-arranges the DOM if you like.

Thanks for pointing me to CB Conditional... might be a good source for my jQuery journeys Definitely interested in that stuff... but you mentioned it: Where to steal the sparetime

Good to know its not impossible and my very rough idea is no nonsense. Hope to accomplish that before CB2.0 comes out... let the race begin

Hi Kyle,

I'm also trying to style the Edit Profile. I've applied a template (from RocketTheme) on my website, but the styling did not take effect on the Edit Profile.

You mentioned a "It can be completely restyled with a new CB plugin acting on the triggers executed on profile edit. Aside from that or CSS there's no other way to restyle it. This is to be significantly improved with CB 2.0."

Can you elaborate what CB plugin are you referring to? Thanks.