Creating New Template - Revision history

Sinisakrisan at 11:14, 17 March 2015

2015-03-17T11:14:27Z

Sinisakrisan at 11:13, 17 March 2015

2015-03-17T11:13:02Z

Sinisakrisan at 11:12, 17 March 2015

2015-03-17T11:12:37Z

Sinisakrisan: Created page with "{{alert|'''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 a..."

2013-08-27T13:49:48Z

Created page with "{{alert|<center>'''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 a..."

New page

{{alert|<center>'''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, [[Customizing Template|click here]]</center>|alert}}
==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 [[Customizing Template|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::
<syntaxhighlight lang="html4strict">
templateName (folder)
|__css (folder)
| |_ style.css
|
|__images (folder)
|
|_ templateDetails.xml
|_ templateFiles.php
</syntaxhighlight>
* '''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

# JomSocial will first look this file at the following path: '''JOOMLA/components/com_community/templates/youretemplate/frontpage.index.php'''
# 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.
{{alert|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.|alert-success}}

===Progress===
'''Create template folder.''' 
# 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.''' 
# Within your template folder, create a new subfolder called "css" and create a blank "style.css" file.
# 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:
::<syntaxhighlight lang="php">
@import url("../../default/css/style.css");
</syntaxhighlight>
'''Start adding 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.

==See Also==
* [[Customizing Template]]
* [[Built-in Module Positions]]

← Older revision		Revision as of 11:14, 17 March 2015
Line 1:		Line 1:
	{{alert-deprecated}}		{{alert-deprecated}}
		+
		+	{{alert\|'''If you use JomSocial 4 and higher, please [[Template Developer Kit\|click here]]'''\|alert-info}}

	{{alert\|<center>'''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'''<br/>		{{alert\|<center>'''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'''<br/>

← Older revision		Revision as of 11:13, 17 March 2015
Line 1:		Line 1:
−	{{alert-~~obsolete~~}}	+	{{alert-deprecated}}

	{{alert\|<center>'''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'''<br/>		{{alert\|<center>'''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'''<br/>

← Older revision		Revision as of 11:12, 17 March 2015
Line 1:		Line 1:
		+	{{alert-obsolete}}
		+
	{{alert\|<center>'''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'''<br/>		{{alert\|<center>'''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'''<br/>
	If you don't find yourself within this group, please, [[Customizing Template\|click here]]</center>\|alert}}		If you don't find yourself within this group, please, [[Customizing Template\|click here]]</center>\|alert}}