Simplifying Community Builder Layouts

Community Builder is a nice Joomla component. It adds extended user management, member lists, member profiles – everything you need to create a community-based website.

So, I started to build a social networking site using Community Builder. I added a few niceties – a gallery plugin, a user blog feature, a profile book – then took a look at it. It was all there, and it was quick – but it didn’t look right. So, I started digging into the code….

I noticed that the profile layout was hard-coded within the userProfile function in comprofiler.html.php. And by ‘hard-coded,’ I mean hard-coded, echoing the code out directly from php.
Community Builder already provides a templating system. But after a bit of looking, I realized that the templates only allow style changes. Yes, I could use some serious CSS to position those DIVs, but… no. That’s difficult to maintain across browsers. I wanted to customize the profile structure.

Externalizing The Profile Layout

Since Community Builder already provides templates, why not take advantage of that by letting the template handle the profile layout? We could move the profile layout to the template.
Moving the profile layout to the template provides some benefits:

  1. The profile layout is no longer hard-coded.
  2. Layout changes are safe against upgrades.
  3. Only basic HTML skills are needed to modify the layout.
  4. Sharing a new layout is simple – it’s installed with the template.

If that’s not enough, well… it is prettier code.

All code changes are made with respect to Community Builder version 1.1. Remember to backup your files before making changes.

How To Do It

Locate comprofiler.html.php inside the /components/com_comprofiler directory. The profile layout code is inside the userProfile function, starting with this line (393):

/positions: head left middle right tabmain underall

The layout codes ends with these lines (500-501):

END TABS OLD WAY */
}

Cut all of that code (lines 393 – 501) and place it into a new file named index.php.
Save a copy of your new index.php file into the root directory of each template. For example, place a copy in the /components/com_comprofiler/plugin/templates/default directory.
Finally, we need to load our new index.php file. Inside comprofiler.html.php, right where you cut out the layout code (line 393), insert this line:

include($mainframe->getCfg( ‘absolute_path’ ).’/components/com_comprofiler/plugin/templates/’. $ueConfig[‘templatedir’].’/index.php’);

To output the tabs for a particular position, just do something like this in your new index.php:

echo $userViewTabs[“cb_head”];

Now you can modify index.php to your liking. If you like tables, use tables; if you want DIVs, do DIVs.

That’s It

There you have it: profile layouts in Community Builder that are easy to modify, easy to share, and relatively safe against upgrades.

This article is the first in a series of articles in which I’ll discuss improving member profiles in Community Builder. Topics will include: adding custom tab positions, allowing members to add custom CSS to their profiles and to choose the CB template, and allowing members to choose which tabs they want to show and to whom, among others.