Edit Profile tabs | turn into DIVs or sliders ?

12 years 8 months ago #172818 by pepperstreet
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!

Please Log in to join the conversation.

12 years 8 months ago #172925 by krileon
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.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

12 years 8 months ago - 12 years 8 months ago #172951 by pepperstreet
Replied by pepperstreet on topic Re: Edit Profile tabs | turn into DIVs or sliders ?
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).

Please Log in to join the conversation.

12 years 8 months ago #173005 by krileon
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.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
The following user(s) said Thank You: pepperstreet

Please Log in to join the conversation.

12 years 8 months ago #173024 by pepperstreet
Replied by pepperstreet on topic Re: Edit Profile tabs | turn into DIVs or sliders ?

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 ;-)

Please Log in to join the conversation.

11 years 9 months ago #204880 by swhung
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.

Please Log in to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.247 seconds

Facebook Twitter LinkedIn