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.