Creating New Template

Alert-trash.png

Support for this feature is deprecated or ceased
This is an old feature that will either be, or it is already removed. You are strongly advised not to use this feature in current version of JomSocial as it's functionality have not been tested, and might not even exist.


If you use JomSocial 4 and higher, please click here
This article is oriented to developers and will describe the best practices we endorse in creating completely new template for JomSocial. As such, we will assume that reader understand all the terms used in this article, and are familiar with creating Joomla or JomSocial templates, have good knowledge of PHP, CSS and HTML, and overall, is skilled designer
If you don't find yourself within this group, please, click here

Overview

Creating the brand new template for JomSocial is not always an easy task to do. there are many ways to do it, starting from Joomla Overrides, through creating your own template folder, or eventually ending up with modifying it through Joomla Template CSS.
All of these methods have its up and downs, and you are really free to use any of them, however, we always advise you to endorse the practice explained bellow.

Your Own JomSocial Template

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.

Preparing The Ground

While overrides will work, and to some extend are actually preferred method to use when you need to override a tiny bit of component, when making a major overhaul, we advise you to create your own JomSocial template.
All JomSocial templates reside under the folder JOOMLA/components/com_community/templates.
Each template needs to have this minimal file and folder structure::

templateName (folder)
|__css (folder)
|  |_ style.css
|
|__images (folder)
|
|_ templateDetails.xml
|_ templateFiles.php
  • css/style.css this file will be your template main style file. You can start with empty file and only add those classes that you're actually going to override
  • images folder will contain all of the images that you want to override
  • templateDetails.xml file is the settings file for your JomSocial template. This is where you can, for example, add new options for your template.
  • templateFiles.php are all files that youre going to override.

How JomSocial Template Files are Loaded

When a template file is requested, JomSocial will first look for the template file in 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 your own template and the file "frontpage.index.php" is being requested, then

  1. JomSocial will first look this file at the following path: JOOMLA/components/com_community/templates/youretemplate/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

A little common sense will imply that you don't have to copy entire default JomSocial template to your own. This is the mistake many template providers have made multiple times.

You can only modify those template files where you want actual change to occur. If you don't plan to change some area at all, you won't need its respective template file in your template at all
Keep your template as minimal as possible by including only the templates files that you want to customize.

Progress

Create template folder.

  1. Create a folder in JOOMLA/components/com_community/template with the template name as your folder name.

Create CSS folder and empty style.css file.

  1. Within your template folder, create a new subfolder called "css" and create a blank "style.css" file.
  2. Import the 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");

Start adding modifications

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

See Also