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.