| 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):
See the two DIVs? Let's wrap them inside a single containing DIV. Add this line immediately before the previous code:
and this line immediately after:
When you are done, your code should look like this:
Done Now you can style your Community Builder tabs by referring to the cb_tab_container class in your CSS file. |