Because modules on the front page don’t pile on top of each other as they did before, if you upgrade to JomSocial 4 and you have many module positions in the same default module position js_side_frontpage, they will look crammed in that position and will look like this:

STEP 1
To quickly eliminate this problem if you’re on live site, first un-publish all the module positions in that position:

Go to extensions -> Modules
Filter by position: js_side_frontpage
Un-publish all modules
Now that the modules not showing badly on front page, you can start correcting this.

First, you should know we added 2 more module positions on the front page:

js_side_frontpage_top
js_side_frontpage_bottom

STEP 2
Decide which modules you actually want to show on the front page. It’s not a good idea to show all of them, just select the ones that you think are essential. Modules that are on the same position will be displayed in tabs, based on their order on the Modules Manager.

STEP 3
Decide where each of the modules go: top, middle, bottom

STEP 4
Open each module and, change the module position to one of the available positions:

js_side_frontpage_top - show at the top of the sidebar
js_side_frontpage - show at the middle of the sidebar
js_side_frontpage_bottom - shows at the bottom of the sidebar

Or change the position to ANY position available on your template, sidebar-1, sidebar-2, top-1, bottom-1, etc. Whatever you want! JomSocial also have lots of other module positions throughout, you can find a full list here



STEP 5
Now change the title of the module to be shorter, we used to add the word “community” and now we add the word “JS” just so that you can easily find the module, but that doesn’t mean you shouldn’t change it to something more reasonable that fits your needs. For example, replace “JS Recent Photos Module” with “Recent Photos”.

Save the changes.

Do this with every module and then publish them.

The Result:
A clean sidebar with tabbed modules.



Read the full article here www.jomsocial.com/blog/js-essentials