I'm very proud of myself today. I'm in NO way a PHP programmer, I've just been a Joomla user since before Joomla was Joomla and have never been afraid to jump in and beat it to submission whenever I've had an idea. Sometimes, extension developers will solve your crisis for you. Other times, you have to dig in and create your own solutions.

Yesterday, I was customizing one of my sites and working on getting JomSocial looking pretty. It's often a case of viewing the source to see what IDs and classes are involved and then going into Dreamweaver and using the 'find and replace' function to find every instance of a CSS call. It can be crazy, but I'm stubborn about getting what I want.

I had filled in a sample user profile in JomSocial that included links to the users social network profiles and got a shock - Ewww, the links went off the rails and extended past the containing column! I was NOT happy. This had to be changed ASAP.

In JomSocial, you can create your own fields from a base set of field types. I had created custom fields in my profile to collect the URLs for a users Facebook, Twitter, etc. but the default URL field type only created links using the entire link as the anchor text. This was a problem as the long URLs spread over the column and were very ugly. Why can't they link from an image? And so, I was off to find a solution.

I did my usual Google searches; 'jomsocial custom profiles link image' and 'jomsocial custom profile link image field value' and some other variations, trying to locate posts where others have managed to do what I wanted to do. There were a few posts from the JomSocial forum (note: if you do not have an account with JomSocial, you'll need to click the 'Cached' link out of Google's search results) but it wasn't until I set Google to search only the JomSocial site for 'add field' that I started to get some results.

I found this post 'how to add a new field type as a plugin' where the poster was asking for help, the response he got was less than helpful, "it's impossible, you need to add these files to /components/com_community/libraries/fields/" but that gave me the location of the files! So, I then did a search of JomSocial.com for 'add /libraries/fields' and found the post I really needed; "Duplicate field types?" and I was off and running!

Now, this forum exchange was from 2009 so I was hoping it would still be relevant for the latest release of JomSocial. I was able to deduce that I'd need to duplicate the url.php file within the /libraries/fields/ location, change the name (i.e. urltwitter.php), create a copy of the url.xml file (copy and name it urltwitter.xml) and add that new file into the customfields.xml file.

Now, I needed to make some changes to urltwitter.php. On line 22, I had this:

return '<a rel="nofollow" href="' . $value . '" target="_blank">' . $value . '</a>';


I changed it to this:

return '<a rel="nofollow" href="' . $value . '" target="_blank"><img src="/../images/twitter.png" width="168" height="19" /></a>';


Of course, I created a nice twitter image that I loaded to the main Joomla images folder.

I thought that was all I needed, so I loaded all the new files via FTP - urltwitter.php, urltwitter.xml and customfields.xml into 'components/com_community/libraries/fields' and went into the backend to edit my fields in JomSocial to the new field type. I went to the front end of my website and loaded the JomSocial profile and.... blam, no workie! The page loaded up to the Twitter field without ANY template styling, it looked very 1995.

I was missing something! Here is where it would have been nice to know how to program PHP, I was lost. So, I decided to open up each of the fields pages - birthday.php, text.php, radio.php and I pored over the code to see what they had in common. I was starting to lose hope of making this work, my Google searches couldn't get me any further when...

Eureka! I noticed that each field page, right after "defined('_JEXEC') or die('Restricted access');" had listed a "class."

So, the url.php page listed "class CFieldsUrl," the text.php page listed "class CFieldsText," etc. This must be it! 

On my new urltwitter.php page I simply changed "class CFieldsUrl" to "class CFields Urltwitter." I loaded the file and refreshed the page.

It worked! W00t! Here's what it looks like, live on my JomSocial install!

With just a bit of smart searching and some persistence, anyone can beat Joomla into submission! What types of customization have you been able to create? Tell us about it in the comments!