Simplifying Community Builder Layouts (part 2)

I was looking through the Community Builder code and found another area that could use a little tweaking: tab containers. Tabs are to Community Builder what modules are to Joomla – just a little more complex. By default, tabs look like tabs in file folders. But we don’t have to leave them that way.

Tabs in Community Builder can take on many forms: tabs in a tabbed pane, a DIV with a title, or even a DHTML popup, among other things. This hack applies to tabs that appear as DIVs with titles. When a tab is displayed as a DIV with a title, it looks like a regular Joomla module – just some content in a box.

Unfortunately, there is no box. Instead, there are two boxes: the title is wrapped in one DIV, and the content is wrapped in another DIV. It would be nicer if the whole tab were wrapped inside a single container. This would make it easier to style the tab with CSS. Also, if you want to give your tabs a Web 2.0 feature, like making them draggable, you’ll need a containing DIV.

All code changes are made with respect to Community Builder version 1.1. Remember to backup your files before making changes. The file, comprofiler.class.php, is located in the administrator/components/com_comprofiler/ directory.

How To Do It

Inside comprofiler.class.php, we’ll need to modify the getViewTabs function. Look for these lines (3764 – 3766):

$html[$pos] .= “\n\t\t\t<div style=\”width:95%\” class=\”contentheading\”>”

See the two DIVs? Let’s wrap them inside a single containing DIV.

Add this line immediately before the previous code:

$html[$pos] .= “\n\t\t\t<div class=\”cb_tab_container\”>”;

and this line immediately after:

$html[$pos] .= “\n\t\t\t</div>”;

When you are done, your code should look like this:

$html[$pos] .= “\n\t\t\t<div class=\”cb_tab_container\”>”; $html[$pos] .= “\n\t\t\t<div style=\”width:95%\” class=\”contentheading\”>”


Now you can style your Community Builder tabs by referring to the cb_tab_container class in your CSS file.