The best way to customize a Jomsocial template is through a template override. You should never hack the core files of Jomsocial unless you absolutely know what you are doing and you are sure that you can go back to original files if you need to. Also, keep in mind that all changes to core files will be lost when you update Jomsocial to the latest version.

Setting up an override folder

First of all you need to create an override folder for Jomsocial inside your Joomla template folder:

templates/yourTemplate/html/com_community

Customize the template files

Select the template files that you want to customize and copy those files to your override folder. Now you can safely edit the files inside the override folder.

Customize the CSS

Create a CSS folder and a CSS file inside the template override folder:

templates/yourTemplate/html/com_community/css/style.css

Now you must import the "css/style.css" file from the Jomsocial template you are using.
For example, if you are using the default template, insert the following css @import code to the first line of your "css/style.css" file in your override folder:

@import url("../../../../../components/com_community/templates/default/css/style.css");

Now you can add your own css after the import line.


{loadposition contentlinks}

The Jomsocial Developers have equipped Jomsocial with a simple and easy-to-use API. You can use this API to create extensions that are integrated with Jomsocial.

1. The Jomsocial User Object

In Jomsocial you can request the User Object with the class CFactory.

How to get the User Object

{code class="brush:php" } // Return current user $user =& CFactory::getUser(); // Return user with given id $user =& CFactory::getUser($userId); {/code}

Including the Jomsocial core

If you are just customizing the Jomsocial template files or adding new functionalities to Jomsocial pages then the above code is enough.
But if you want to call the CFactory class from outside Jomsocial (for example from another component or from within a module) then you must include the Jomsocial core. In this case, the above code should be:
{code class="brush:php" } // Include Jomsocial core $jspath = JPATH_ROOT.DS.'components'.DS.'com_community'; include_once($jspath.DS.'libraries'.DS.'core.php'); // Return current user $user =& CFactory::getUser(); // Return user with given id $user =& CFactory::getUser($userId); {/code}

2. Using Jomsocial Features in your Extension

The Jomsocial API lets you integrate some basic Jomsocial functionalities with your extension.

JomSocial build-in personal messaging system

With this code, you can send a message to a user through the Jomsocial messaging system. You must use an onclick action to add this functionality to any link. {code class="brush:php" } // Include Jomsocial core $jspath = JPATH_ROOT.DS.'components'.DS.'com_community'; include_once($jspath.DS.'libraries'.DS.'core.php'); // Include Messaging library include_once($jspath.DS.'libraries'.DS.'messaging.php'); // Add onclick action $onclick = CMessaging::getPopup($userid); echo ''; {/code} The $userid can be a specific user id or the current user (see code above).

Link to User Profile Page

By using CRoute which is a replacement for Joomla JRoute, you can link to any part of JomSocial and the link will have the correct Itemid.
{code class="brush:php" } // Include Jomsocial core $jspath = JPATH_ROOT.DS.'components'.DS.'com_community'; include_once($jspath.DS.'libraries'.DS.'core.php'); // Get CUser object $link = CRoute::_('index.php?option=com_community&view=profile&userid='.$userid); echo 'User profile'; {/code}


{loadposition contentlinks}

This is a list with the 30 most popular extensions for Jomsocial.

1. MiniSoge - Gender based avatar

MiniSoge automatically changes a users avatar at login when he is still using the default JomSocial one.
What it does is simple:
1. When a user logs in the plugin checks if you are using the default jomsocial avatar
2. If the user is still using it, it checks if the user has set his/her gender
3. If a gender is set it checks if the user is male or female
4. It changes the avatar to a gender specific, random avatar from the MiniSoge folders
5. It displays a warning
Product Info

2. JomSocial Extended Toolbar

JomSocial Extended Toolbar is a JomSocial plugin to extend the possibilities and control of the standard JomSocial toolbar. This plugin gives you the ability to switch on and off specific menu tabs and menu items in the JomSocial tool bar.
Also added are 4 new menu tabs to make core JomSocial features more accessible. Even more so, you can add a Joomla menu to the toolbar. For instance, "User Menu" in the Joomla administrator. Each and every link on the JomSocial toolbar, as well as the menus added by this plugin, can be disabled and enabled in the plugins parameters (or Joomla menu manager when using a Joomla menu)
Compatible on JomSocial 1.6, 1.8, 2.0. Older versions may also work, but it is untested.
Product Info

3. My Facebook Friends - for JomSocial

Members can now proudly display their Facebook friends on their JomSocial member profiles. This application is primarily for members that take advantage of your site's Facebook Connect login option, but can be used by any member.
The app should only visible to the actual owner of the profile, and provides an attractive, linkable display of their Facebook friends' profile avatars. It's best to set the privacy for this to "Only me".
# members can set how many friends to display (unlimited!)
Product Info

4. SIMAnswers - Questions and Answers

SIMAnswers is the complete Questions and Answers solution for Joomla. In fact, imagine Yahoo Answers for Joomla! SIMAnswers works in exactly the same way as Yahoo Answers, down to the last detail, and more!
Product Info

5. MiniRegistration - Enhanced security

MiniRegistration is a plugin that adds more security to the default JomSocial registration.
Product Info

6. My AUP Toolbar - AlphaUserPoints profile in JS toolbar

New, enriched and powerful plugin for your JomSocial powered site.
MyAUP Toolbar for JomSocial.
You'll never again need the standard AUP profile.
Completely configurable. Enable and disable whatever you want.
Medals, rankings, stats, referral link, last activity, social links, styles, sort tabs (tabs optional), and much more.
The plugin is now available for download.
Product Info

7. Mosets Tree Listings

Web Design plugin for JomSocial to show user listings from Mosets tree 2.1+ on profile pages.
Features:
100% compatible with Joomla! 1.5.x, JomSocial 1.8.x, and Mosets Tree 2.1.x! Fully customisable with special HTML tags to create layouts quickly and easily.
Tags available to use include:
{name} {desc} {hits} {votes} {rating} {email} {website} {price} {url} {cdate}
New to plugin version 1.5.1 - {image} with the ability to choose to float the image left or right in the plugin parameters. See the screenshots below for example outputs and settings.
This plugin costs £8 GBP (approximately $13 USD). Buy with confidence via PayPal.
Product Info

8. Jomsocial Photos Module Extended

Show The Jomsocial Latest Photos in any page in your website and customize the display of the photos as much as you want.
Product Info

9. VMVendor suite

VMVendor Suite for JomSocial & Virtuemart is a set of extensions to let each members of your JomSocial community to add products to Virtuemart as Vendors!... And to reward them with a Virtual Currency according to their effective sales thanks to the AlphaUserPoints component!
Product Info

10. Comet chat

CometChat is the first integrated inline chat script which works straight from your website. Increase interactivity by allowing your users to chat with their friends/online users and in-exchange keep them on your site.
Our JomSocial Edition works seamlessly with JomSocial.
CometChat automatically integrates with JomSocial friends system and status updates!
Product Info

11. MiniFriendConnect

MiniFriendConnect is a JomSocial module and plugin that suggests friends by scanning your current friends for matches.
Simular to how facebook suggest friends.
Product Info

12. Events Map Module for JomSocial

Take your JomSocial events to the next level by displaying them in a customizable Google map!
This module will display an interactive Google map of upcoming events listed in your JomSocial events system in a module position.
This module is highly customizable and even offers custom map markers for each event category.
Product Info

13. SocialAds. Targeted Advertising

SocialAds is a intelligent Ad Targeting component for JomSocial. Inspired from Facebook Ads, this extension lets users quickly create advertisements & target them to a specific section of users of the Social Network. Note that we are currently only supporting JomSocial.
Product Info

14. Geommunity Suite

This j1.5 native module lists users with coordinates and shows them on a google map with their Nano profile in the marker info window. It shows dozens of options and datas from popular 3rd party joomla extensions, it can also display your site friendships connections network as polylines on map! Support for Google Latitude accounts etc...
Product Info

15. Profile Completeness for JomSocial

Show the users of your Joomla based JomSocial sites the completeness of their Profile just like Linked in does ! Use this module to encourage users to complete their profiles.
Product Info

16. Birthday Module

JomSocial 2.0-2.2 module that displays the birthdays of friends for the current month. The plug-in displays a two-line information about friends having birthday for the current month:
JomSocial Birthday is tested, optimized and compatible with JomSocial 1.8 -2..2 and Joomla! 1.5.22 using the JS default theme.
We will periodically update and enhance this so check out our website as often as you can. For comments and suggestions, please send us an email through our Contact Us page. Or better yet, register with us to receive update notifications on this module.
Product Info

17. The Gift Exchange

Send Gifts to anyone on the site.
Showcase of gifts received.
Gifts sent are added to jomsocial activity stream.
Email and PM notification Options.
Jomsocial & AUP integration plugins.
Jomsocial profile App.
Product Info

18. SIMGallery

SIMGallery is the true community-driven gallery for Joomla. Integrated seamlessly with JomSocial, SIMGallery allows your users to create and manage their own albums and photos. It is important to note here that in terms of user process and interaction, SIMGallery mirrors the photo/album feature of Facebook exactly (including all the cool AJAX goodness)! Browsing photos is as easy as simply clicking on the current photo itself (and yes there're also the previous and next links), without the need to refresh the page at all.
Product Info

19. My Twitter Updates

Twitter application for JomSocial that uses the OAuth API. Allows user to post status updates to Twitter from their JomSocial account and retrieves a list of twitter timelines in their profile.
Product Info

20. K2 Items in JomSocial Plugin

This plugin allows you to display the latest posts in K2 from an author in his JomSocial profile.
Product Info

21. MyPlayer

This Jomsocial application integrates a great flash mp3 player on user profiles. Each member can manage, and edit his own playlist, uploading mp3 files or linkin distant ones or streams and removing them. Members can also fully customize the player such as any color (background, playlist, buttons, controls, slides, over, etc....) but also size, loop, autoplay, shuffle, volume etc... The upload form can guess ID3 tags or user can use their own title or artist name.
Product Info

22. JomSocial Migrator

Migration from CB 1.2 & 1.3 and UDDEIM 2.x to JomSocial 1.x and 2.0.x fully tested.
JomSocial Migrator is an easy to use tool to migrate your community website from Community Builder to JomSocial. It does not alter or delete any of your Community Builder data.
Product Info

23. AlphaUserPoints integration - Rules for JomSocial 2.0.+

Currently available more than 40 rules.
Product Info

24. Applications in Tabs

Give your profiles a new look. Your apps will be loaded in Tabs with JomSocial Apps In Tabs.
Give it a try now!
And now we also have Home page Tabs and Tabs in Groups! Buy a bundle pack of all 3 and save a lot.
Please note that our application is error free and it works. We always try our best to help our customers. If there is a problem in our product, we pay your money back. We provide a 15 days time for this purpose.
Product Info

25. Database Cleanup for JomSocial

JomSocial leaves behind unnecessary database entries from old private messages (even if they've been deleted in the front-end) and old community activities (also even if they've been hidden in the front-end) that clog your database.
Allowing these entries to pile up will lead to a bloated database (which especially becomes a problem in shared-hosting environments) that will slow down your community as it grows and interacts. To help cure this deficiency and give you more control of how your community backend runs, we've created the Cleanup for JomSocial plugin, which allows you to finally take hold of a database running wild.
Product Info

26. MiniJomTweet - Login through twitter

MiniJomTweet is a component that allows users to login to the site with their Twitter accounts.
Product Info

27. J!MailAlerts. Customized CMS via Email

J!MailAlerts is a automated periodic Email Alerts system. Have you seen mail alerts that networks like Facebook & Linked in send to their users periodically ? Using J!MailAlerts you too can send your users periodic email alerts of whats happening on your site. Users can select if they want to receive daily, weekly, fortnightly or monthly updates. J!MailAlerts is great for Intranets, Social Networks, News Portals & for any kind of site that regularly generates content. Product Info

28. Login By Email

This plugin allows users to login either by their username or by their email address. Simple to install, easy to use.
Product Info

29. Community Answers

Community Answers is a Yahoo Answers like Web 2.0 QnA component using which your users can start discussions on topics of their interest.
Product Info

30. JBolo! Chat

JBolo! is a really cool extension that will integrate Facebook & Gmail like chat into Joomla Websites.
The extension supports showing either a Facebook like chat bar or a Gmail like chat module.
The name JBolo! is derived from the Hindi word 'Bolo' which means to talk. Styled to look like the popular chat on Gmail & Facebook, this application promises to be an exciting thing for Social Networks in Joomla.
JBolo! integrates flawlessly with Joomla, CB, Jomsocial, Mighty / People Touch as per your choice.
A Must have for Joomla!, JomSocial & CB based Social Networking websites.
Product Info

{loadposition contentlinks}

Jomsocial offers many module positions to insert your modules. However, if you need to customize your template you will often need some extra positions in some places. You can easily create a new module position in any Jomsocial template file by using the code below
{code class="brush:php;" } renderModules( 'new_position_name' ); ?> {/code} All you have to do next is to publish your module in the 'new_position_name' position.

{loadposition contentlinks}

In this tutorial, I will show you how you can easily create a new task page in Jomsocial. In this new task page you can display whatever you like; photos, videos or even create a new form to request input from the community members.

First of all, let's see what exactly we will be developing.

The main views in Jomsocial are:

• profile
• search
• groups
• photos
• videos
• events

Each one of these views has a particular number of different tasks (pages):

a. profile tasks

• uploadAvatar
• linkVideo
• edit
• editDetails
• privacy
• preferences
• editPage

b. search tasks

• advancesearch

c. groups tasks

• mygroups
• myinvites
• create

d. photos tasks

• myphotos
• newalbum
• uploader

e. videos tasks

• myvideos

f. events tasks

• myevents
• myinvites
• pastevents
• import
• create

1. What page you need?

So, what kind of new page you need? The page we will be creating will be a task of one view only. Firstly, you must decide under what view your new page will be displayed.

In this tutorial, we will create a new task page for the Photos view. However you can create a task page for any view by following the same steps.

2. Write the code

a. The first thing we must do is to create a new template file for our new page. Let's give the name photos.newtask.php to the template file. We give this name because our new task will be called newtask. You can change the task name to whatever you like.

For now, just paste this code inside the new template file:

{code class="brush:php;" } {/code}

Save this file inside your jomsocial template folder (eg. default).

 

b. Open the file components/com_community/views/photos/view.html.php and create a new function for the new task page:

{code class="brush:php;" } public function newtask() { $config = CFactory::getConfig(); $document = JFactory::getDocument(); $document->setTitle( JText::_('COM_COMMUNITY_PHOTOS_NEW_TASK_TITLE') ); $this->addPathway( JText::_( 'COM_COMMUNITY_PHOTOS' ) , CRoute::_('index.php?option=com_community&view=photos' ) ); $this->addPathway( JText::_('COM_COMMUNITY_PHOTOS_NEW_TASK_TITLE') ); $this->showSubmenu(); $tmpl = new CTemplate(); echo $tmpl->fetch( 'photos.newtask' ); } {/code}

 

c. Open the file components/com_community/controllers/photos.php and create a new function for the new task page:

{code class="brush:php;" } public function newtask() { $document =& JFactory::getDocument(); $viewType = $document->getType(); $viewName = JRequest::getCmd( 'view', $this->getName() ); $view =& $this->getView( $viewName , '' , $viewType ); if($this->checkPhotoAccess()) echo $view->get( __FUNCTION__ ); } {/code}

 

d. The last thing we'll do is to create a link for our new page in the Jomsocial Photos Submenu:

Open the file components/com_community/views/photos/view.html.php again and search for the function public function setSubmenus().

Now go to switch( $task ) and insert the following code inside the case 'myphotos' just before the break; :

{code class="brush:php;" } $this->view->addSubmenuItem('index.php?option=com_community&view=photos&task=newtask', JText::_('COM_COMMUNITY_PHOTOS_NEW_TASK') , '' , true ); {/code}

 

e. Now if you go to www.yoursite.com/index.php?option=com_community&view=photos&task=newtask you will see your new task page!

Now you can deploy your php skills and insert any code you want in this task page. Have fun !

{loadposition contentlinks}