Sinisakrisan (Talk | contribs) (→Customizing template file) |
|||
| Line 1: | Line 1: | ||
| − | Our template design philosophy is to ensure tight and seamless integration with Joomla | + | 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. |
| − | ===Before | + | ===Before You Begin=== |
| − | Before you begin customizing 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 | + | 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 [[Create Template|Creating JomSocial Template]] article. |
===Customizing JomSocial=== | ===Customizing JomSocial=== | ||
| − | Most | + | Most users' first intuition is to edit the JomSocial template files directly. Although this is possible, we generally do not recommend users 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 [http://docs.joomla.org/Understanding_Output_Overrides output override] feature, which our component supports. |
| − | ===Setting | + | ===Setting Up the Override Folder=== |
| − | Before you can start customizing, you will need to create an | + | Before you can start customizing, you will need to create an '''Override Folder''' for JomSocial in your Joomla template folder. The path of the override folder is:<br /> |
| − | + | JOOMLA/templates/yourTemplateName/html/com_community | |
For example, if you are using rhuk_milkyway as your Joomla! template, your override path would be:<br /> | For example, if you are using rhuk_milkyway as your Joomla! template, your override path would be:<br /> | ||
| − | + | JOOMLA/templates/rhuk_milkyway/html/com_community | |
| − | ===Customizing | + | ===Customizing the Template File=== |
| − | * '''Identify the template file of the JomSocial section you wish to modify''' - If you intend to modify the | + | * '''Identify the template file of the JomSocial section you wish to modify''' - If you intend to modify the Frontpage, then the file would be '''frontpage.index.php'''. To identify which JomSocial section belong to which file, you may look at the filename, which is usually (but not all of them) 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'''. |
* '''Copy the template file from JomSocial default template folder to your override folder''' - 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/"'. | * '''Copy the template file from JomSocial default template folder to your override folder''' - 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/"'. | ||
* '''Edit the copied template file.''' - You can now edit the template file to your own liking using your favourite text editor. | * '''Edit the copied template file.''' - You can now edit the template file to your own liking using your favourite text editor. | ||
Revision as of 04:38, 8 March 2013
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.
Contents
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 article.
Customizing JomSocial
Most users' first intuition is to edit the JomSocial template files directly. Although this is possible, we generally do not recommend users 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, which our component supports.
Setting Up the Override Folder
Before you can start customizing, you will need to create an Override Folder for JomSocial in your Joomla template folder. The path of the override folder is:
JOOMLA/templates/yourTemplateName/html/com_community
For example, if you are using rhuk_milkyway as your Joomla! template, your override path would be:
JOOMLA/templates/rhuk_milkyway/html/com_community
Customizing the Template File
- Identify the template file of the JomSocial section you wish to modify - If you intend to modify the Frontpage, then the file would be frontpage.index.php. To identify which JomSocial section belong to which file, you may look at the filename, which is usually (but not all of them) 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.
- Copy the template file from JomSocial default template folder to your override folder - 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/"'.
- Edit the copied template file. - You can now edit the template file to your own liking using your favourite 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 would 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.