JomSocial Templates vs Joomla! Templates

The look-and-feel of a website reflects the website's identity and content. Therefore it is important for one to know and distinguish the difference between joomla! templates and jomsocial template. In order to have a complete look-and-feel of your site, you have to change both templates.

Let's clarify here first. By analogy, Joomla! Platform is an operating system and the Jomsocial Component is the application in Joomla!. JomSocial is a Joomla! component. In Joomla!, there can only be one component displayed at a time.

Now, Let's talk about Joomla! template. Joomla!'s templates can be found in Joomla!'s backend (Extensions -> Template Manager). You can go ahead and change the Joomla! template, it won't change the look-and-feel of the Jomsocial component.

Position of the JomSocial Component in Joomla

So some of you might be wondering, where the heck does the position of JomSocial component is placed in Joomla? To answer that question please open templates\[template_name]\index.php found in your joomla directory.

The line responsible for displaying JomSocial is

<jdoc:include type="component" />

Go ahead, search for it, and play as you like with it.

You can easily modify the appearance of a JomSocial template via JomSocial Template manager. To do so, please view Component > JomSocial > Template and select your default JomSocial template.

The configurable options are listed below:

You can easily modify the appearance of a JomSocial template via JomSocial Template manager. To do so, please view Component > JomSocial > Template and select your default JomSocial template.

The configurable options are listed below:

Template folder structure

All JomSocial templates reside under the folder "JOOMLA/components/com_community/templates". Each template has its own folder with the following folder structure.

templateName (folder)
|__css (folder)
|  |_ style.css
|  |_ styleIE6.css  (Styling fixes for IE6, if any)
|  |_ styleIE7.css  (Styling fixes for IE7, if any)
|
|__images (folder)
|
|_ templateFile.php
|_ templateFile.php

How JomSocial template files are loaded

When a template file is requested, JomSocial will first look for the template file the current template folder (the template that is currently being used). If the template file does not exist in the current template folder, it will look for it in the default template folder.

For example, if you are using currently using Blueface template and the file "frontpage.index.php" is being requested:

1. JomSocial will first look this file at the following path: "JOOMLA/components/com_community/templates/blueface/frontpage.index.php".
2. If the file does not exist, JomSocial will load from default template at the following path: "JOOMLA/components/com_community/templates/default/frontpage.index.php".

Template overrides

Template overrides refer to template files that are placed in Joomla! template folder, e.g. "JOOMLA/templates/%templateName%/html/com_community/".

When template overrides is in effect, JomSocial will revert back to default template even though you may be using other templates as your current template.

Recommended practice

As our JomSocial default template will go through continuous revisions and additions as new features are being added, we highly suggest that you follow our recommended practice below while creating your own JomSocial template. This will help you to reduce the amount of work required to maintain and update your template whenever a new version is released.

1. Import default template's stylesheet before adding your own css modifications
   You are required to import the default template's stylesheet in your template's style.css file. The main reason is to ensure your template will continue to receive new css stylings as we add them in JomSocial.
   To import default template's style.css file, add the following code to the first line of your template's style.css file.

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

2. Do not copy the entire default template into your new template folder.
   Keep your template as minimal as possible by including only the templates files that you want to customize.
3. Your JomSocial template should support a minimum width of 640px.

Creating your own JomSocial template

1. Create template folder. Create a folder in "JOOMLA/components/com_community/template/" with the template name as your folder name.
2. Create css folder & style.css file. Within your template folder, create a new subfolder called "css" and create a blank "style.css" file.
3. Import default template's style.css file. Open "style.css" file in your favourite text editor, and insert the following code to the first line on your style.css file.

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

4. Add your own modifications. Depending on the customization that you require, copy the necessary template files from default template to your template folder. You can now start editing the files to your own liking.