Styling JomSocial – A Blank Canvas Template

One of my long term freelance gigs has involved a lot of work in recent months with the JomSocial plugin for Joomla! It adds Facebook style functionality to a Joomla! site, allowing users to create profiles, upload content, swap messages etc. It’s a great piece of kit from Azrul, far better than the clunky Community Builder alternative. It’s easy to set up and administer, and lets you add a genuine and user friendly community aspect to any website.

Designing For My Site?

JomSocial ships with four base templates. They’re OK, functional if not amazingly inspired. What I really wanted to do was to develop a template from scratch, but like so many open source applications and plugins, there wasn’t a “blank slate” option to work from. Unfortunately the JomSocial support page on ‘Creating A JomSocial Template’ just has a “coming soon” note on it, and to be fair the application developers make it clear they aren’t supporting templating queries.

It always surprises me that so few applications have a blank template option. There’s a couple of WordPress ones out there, including a recent and excellent guide from Themeshaper on creating a theme from scratch. It’s a much better way to work as a designer, dealing with other people’s code is never that much fun and a lot of the time application developers include a lot of unnecessary structure into the layout HTML.

Starting From Scratch

What I wanted, then, was a blank template to start my JomSocial design from. If the resources aren’t out there then it’s best to go ahead and make them yourself. So I took the default template, copied all the files, and went through all 96 of them stripping out every piece of extraneous information I could find. I wanted to get as close as possible to raw data output as I could – JomSocial’s functionality is awesome – without the surrounding code. That meant removing inline styling, tables, lists, tags and classes from all the files, and structuring them as simply as possible. That provides a blank canvas to work from.

A Resource For Everyone

I’ve benefitted from the blank templates that others have put together for various open source applications. I’m going to pass on that benefit – you can download the blank JomSocial template at the end of this article.

Bear in mind that this is NOT the finished product. I’m aware that there are a couple of PHP glitches (though many of them can be solved by referring to the equivalent .php file in JomSocial’s default template, and comparing code). You’ll also need to add the “hasTip” class to thumbnail images that you want a tooltip for. The images directory is exactly the same as the JomSocial default template. I’m continuing to eliminate these problems as I work with the template more often.

Despite the issues, though, my design work for JomSocial has become much more efficient and much more enjoyable since I created the blank canvas template. I hope that other designers will find it worthwhile, and it might lead to growth in templating options for what is a genuinely excellent Joomla! plugin.

JomSocial Blank Template (draft version)