Difference between revisions of "Customizing Template"

Revision as of 11:44, 27 August 2013

Overview

Our template design philosophy is to ensure tight and seamless integration with the Joomla template, where the CSS styling on the Joomla template is inherited as much as possible within the JomSocial template, e.g. headings, font colors / sizes, link hover behavior, etc.
However, there are much more areas that can not be styled with Joomla Template CSS because there is no appropriate selector for respective element, and most of the layout needs to be styled through own component CSS.
Implementing Bootstrap into Joomla 3 tends to deal with this problem, but, there is a long way to go before all component and template providers adopt it properly

Before You Begin

Before you begin customizing the JomSocial template, identify your overall objective of the customization work that needs to be done. If your goal is to perform light customization on certain parts of JomSocial, this tutorial is right for you. If you intend to do a complete makeover on JomSocial, we recommend that you read our Creating JomSocial Template guide.

Customize Component Using Built in Joomla Overrides

Most users' first intuition is to edit the JomSocial template files directly. Although this will work, we generally do not recommend editing the template files directly. This is because each time you upgrade to a newer version of JomSocial, these template files will be overwritten and you will lose your modifications. The faster, safer way to customize your JomSocial template is to use the Joomla output override feature, that our component supports.

Setting Up the Override Folder

Before you can start customizing, you will need to create an Override Folder for JomSocial Component.
It seems that there is a lot of confusion regarding what files will go where and how to setup the override folder properly, mostly because the folder structure differs, but if you go trough it once, you will see that this is no rocket science and not something that JomSocial invented. We are just using the things that are available in Joomla:
The very important thing to understand is that Joomla Template Override can only override the current component or module output
What this means, is that if you select the default template in JomSocial Template Settings the override will override the default template. If you select any other template to be used as your JomSocial template, the override folder will override that one.
Bottom line, the override folder always override the active component output and is located here:

• JOOMLA/templates/yourTemplateName/html/com_community

If you dont have this folder, feel free to create it manually
The override folder IS NOT

• JOOMLA/templates/yourTemplateName/html/com_community/templates/default
• JOOMLA/templates/yourTemplateName/html/com_community/templates/whatever

Customizing the Template File

1. Identify the template file of the JomSocial section you wish to modify.
   1. If you intend to modify the Frontpage, then the file would be frontpage.index.php.
   2. To identify which JomSocial section belongs to which file, look at the filename, which is usually (but not all of time) in the following format, view.task.php, as seen on the URL arguments, e.g. index.php?option=com_community&view="videos"&task=search is equivalent to videos.search.php.
2. Copy the template file from JomSocial default template folder to your override folder.
   1. Now that you have identified the file that you want to modify, copy the file from "'JOOMLA/components/com_community/templates/default/"' to your Override folder, JOOMLA/templates/yourTemplateName/html/com_community/.
3. Edit the copied template file.
   1. You can now edit the template file to your own liking using your favorite text editor.

Customizing CSS Stylesheets

To include your own CSS stylesheets, you will need to override the default template's css/style.css file. However, when you override this file, the CSS stylesheets that originally came with this file will be lost. Whenever you perform a "css/style.css" override, you should also import the "css/style.css" file from the default template. This can be done by inserting the following css @import code to the first line of your "css/style.css" file in your override folder:

@import url("../../../../../components/com_community/templates/default/css/style.css");

As long as this import code is included in your style.css, you are safe to add your own CSS stylesheets.