Sinisakrisan (Talk | contribs) (Created page with "{{alert|<center>From JomSocial 4.0.2</center>|alert-info}}") |
Sinisakrisan (Talk | contribs) |
||
| 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]] | ||
Revision as of 10:16, 17 March 2015
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.
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.
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.
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
