Template Developer Kit - Revision history

Sinisakrisan: /* Example Template */

2015-03-21T05:07:48Z

‎Example Template

Sinisakrisan: /* Structure */

2015-03-18T07:55:28Z

‎Structure

Sinisakrisan: /* How does it work */

2015-03-17T11:22:22Z

‎How does it work

Sinisakrisan: /* Overview */

2015-03-17T11:18:53Z

‎Overview

Sinisakrisan: /* See Also */

2015-03-17T11:11:17Z

‎See Also

Sinisakrisan: /* Template Details and Params files */

2015-03-17T11:10:28Z

‎Template Details and Params files

Sinisakrisan: /* Assets Folder */

2015-03-17T11:08:55Z

‎Assets Folder

Sinisakrisan: /* Example Template */

2015-03-17T10:50:04Z

‎Example Template

Sinisakrisan at 10:18, 17 March 2015

2015-03-17T10:18:12Z

Sinisakrisan at 10:16, 17 March 2015

2015-03-17T10:16:37Z

@@ Line 17: / Line 17: @@
 To follow this article easier, we added the example template to this guide. Please click at the button bellow to download example template
 <center>
-[[File:Download black.jpg|250px|link=http://www.jomsocial.com]]
+[[File:Download black.jpg|250px|link=http://documentation.jomsocial.com/downloads/TemplateDeveloperKit.zip]]
 </center>
 Once downloaded extract the content of the package and copy entire '''example''' folder into:

@@ Line 25: / Line 25: @@
 ==Structure==
 The following is the structure you should always follow when creating new template
-* '''assets''' - folder that contains...
+* '''assets''' - folder that contains compiled css and other assets used through template
-* '''images''' - folder that contains...
+* '''images''' - folder that contains all images that can be overridden, like avatars, covers, thumbnails...
-* '''layouts''' - folder that contains...
+* '''layouts''' - folder that contains all layout files
-* '''scss''' - folder that contains...
+* '''scss''' - folder that contains all SCSS files
 * ''templateDetails.xml'' - file that holds the information about your template, but also, provides possibility to add custom template configurations.
 * ''params.ini'' - file that stores all the custom configuration from '''templateDetails.xml'''.

@@ Line 11: / Line 11: @@
 ===Layout===
 Most of the layout can be controlled through Theme Designer. End user will have options to select default tabs, put sidebar on the preferred side, control styles of avatar, default images etc... In perfect world, third-party templates should '''not''' override layout files, because the more you override, you risk the higher chance of losing compatibility and you will have to update changed file.
 ==Example Template==

@@ Line 3: / Line 3: @@
 ==Overview==
 For a long time, customising JomSocial template has been tedious process and more often than not, every major release of JomSocial component would break templates created by third-party providers, rendering them completely useless.<br/>
-JomSocial 4 implemented a major re-design of entire front end, so unfortunately, this is the case with version 4 too, but ever since iJoomla took over it was one of our top priorities to make third-party templates compatible, from one version to another.<br/>
+JomSocial 4 implemented a major re-design of entire front end, so unfortunately, this is the case with version 4 too, but ever since iJoomla took over it was one of our top priorities to make third-party templates compatible, from one version to another.<br/> Starting from JomSocial 4, we hope to achieve this by implementing different template logic, using '''s-expression based CSS''' known as '''SCSS''' combined with the full potential of Theme Designer. The result is really sexy.<br/>
-We hope to achieve this by implementing different template logic, using '''s-expression based CSS''' known as '''SCSS''' combined with the full potential of Theme Designer. The result is really sexy.<br/>
 In the following article, we will teach you how to harness this power and create awesome templates for JomSocial, making sure they are compatible with the future JomSocial versions

← Older revision		Revision as of 11:11, 17 March 2015
Line 63:		Line 63:
	==See Also==		==See Also==
	* [[Built-in Module Positions\|Module position in templates]]		* [[Built-in Module Positions\|Module position in templates]]
		+	* [[JomSocial VS Joomla Template]]

← Older revision		Revision as of 11:10, 17 March 2015
Line 60:		Line 60:
	In the example template xml file, you have all the supported parameters you can use		In the example template xml file, you have all the supported parameters you can use
	::[[File:Templateparams.png]]		::[[File:Templateparams.png]]
		+
		+	==See Also==
		+	* [[Built-in Module Positions\|Module position in templates]]

@@ Line 40: / Line 40: @@
 In Theme Designer, after clicking the '''Reset to template defaults''' button, that will look like this
 :::[[File:Themedesignerdefault1.png]]
-Notice that '''Primary Buttons''' color changed to bright red.
+Notice that '''Primary Buttons''' color changed to bright red.<br/>

← Older revision		Revision as of 10:50, 17 March 2015
Line 18:		Line 18:
	[[File:Download black.jpg\|250px\|link=http://www.jomsocial.com]]		[[File:Download black.jpg\|250px\|link=http://www.jomsocial.com]]
	</center>		</center>
		+	Once downloaded extract the content of the package and copy entire '''example''' folder into:
		+	* ''ROOT/components/com_community/templates''
		+	After that, navigate to ''JomSocial Backend -> Configuration -> Templates'' and select '''example''' to be default template
		+
		+	==Structure==
		+	The following is the structure you should always follow when creating new template
		+	* '''assets''' - folder that contains...
		+	* '''images''' - folder that contains...
		+	* '''layouts''' - folder that contains...
		+	* '''scss''' - folder that contains...
		+	* ''templateDetails.xml'' - file that holds the information about your template, but also, provides possibility to add custom template configurations.
		+	* ''params.ini'' - file that stores all the custom configuration from '''templateDetails.xml'''.
		+
		+	===Assets Folder===
		+	In this folder, you will find the CSS files, icons, fonts, and other assets used in JomSocial, but most important files in this folder are '''json''' files. <br/>
		+	We already told you not to touch CSS files in this article, but we will repeat it few more times. Every time that user use Theme Designer, CSS will be recompiled and your entire work into this file will go down the drain.<br/>
		+	Therefore, you should focus on '''json''' and '''scss''' files which will be described later.<br/>
		+	The file of interest in this folder is '''default.scss.json'''<br/>
		+	This file holds all the default values for colors in Theme Designer that users will see when they use your template.<br/>
		+	If you open the file, you'll see that value for primary color is '''#ff0000''' which is bright red.<br/>
		+	In Theme Designer, after clicking the '''Reset to template defaults''' button, that will look like this
		+	:::[[File:Themedesignerdefault1.png]]
		+	Notice that '''Primary Buttons''' color changed to bright red.

← Older revision		Revision as of 10:16, 17 March 2015
Line 1:		Line 1:
	{{alert\|<center>From JomSocial 4.0.2</center>\|alert-info}}		{{alert\|<center>From JomSocial 4.0.2</center>\|alert-info}}
		+
		+	==Overview==
		+	For a long time, customising JomSocial template has been tedious process and more often than not, every major release of JomSocial component would break templates created by third-party providers, rendering them completely useless.<br/>
		+	JomSocial 4 implemented a major re-design of entire front end, so unfortunately, this is the case with version 4 too, but ever since iJoomla took over it was one of our top priorities to make third-party templates compatible, from one version to another.<br/>
		+	We hope to achieve this by implementing different template logic, using '''s-expression based CSS''' known as '''SCSS''' combined with the full potential of Theme Designer. The result is really sexy.<br/>
		+	In the following article, we will teach you how to harness this power and create awesome templates for JomSocial, making sure they are compatible with the future JomSocial versions
		+
		+	==How does it work==
		+	===Stylesheets===
		+	We rely on the SCSS compiler to build end CSS so in best case scenario, you should be modifying SCSS files, and never touch any CSS. Basic elements like button colors can be overridden with Theme Designer.
		+	===Layout===
		+	Most of the layout can be controlled through Theme Designer. End user will have options to select default tabs, put sidebar on the preferred side, control styles of avatar, default images etc... In perfect world, third-party templates should '''not''' override layout files, because the more you override, you risk the higher chance of losing compatibility and you will have to update changed file.
		+
		+	==Example Template==
		+	To follow this article easier, we added the example template to this guide. Please click at the button bellow to download example template
		+	:::[[File Download.png]]