Difference between revisions of "Customizing Template"

(Customizing the Template File)
(Customizing the Template File)
Line 15: Line 15:
  
 
===Customizing the Template File===
 
===Customizing the Template File===
'''Identify the template file of the JomSocial section you wish to modify'''<br/>
+
'''Identify the template file of the JomSocial section you wish to modify'''.<br/>
 
If you intend to modify the Frontpage, then the file would be '''frontpage.index.php'''. 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.<br/><br/>
 
If you intend to modify the Frontpage, then the file would be '''frontpage.index.php'''. 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.<br/><br/>
  
'''Copy the template file from JomSocial default template folder to your override folder'''<br/>
+
'''Copy the template file from JomSocial default template folder to your override folder'''.<br/>
 
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/.<br/><br/>
 
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/.<br/><br/>
  
'''Edit the copied template file.'''<br/>
+
'''Edit the copied template file'''.<br/>
 
You can now edit the template file to your own liking using your favorite text editor.
 
You can now edit the template file to your own liking using your favorite text editor.
  

Revision as of 04:44, 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.

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 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.

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 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 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.