JomSocial templates

JomSocial provides four different templates, Default, Blueface (pro), Bubbles (pro) and Blackout (pro).

Our template design philosophy is to ensure tight and seamless integration with Joomla! template, where CSS stylings on Joomla! template are inherited as much as possible within the JomSocial template, e.g. headings, font colours & sizes, link hover behaviour etc.

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 have a complete makeover on JomSocial, we recommend that you read up on our Creating JomSocial Template article.

Customizing JomSocial

Most user's first intuition is to edit the JomSocial template files directly. Although this is possible, we generally do not recommend users to edit the template files directly. This is because each time you upgrade to a newer version of JomSocial, these templates files will be overwritten and you will lose your modifications.

The faster, safer way to customize 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 template file

1. 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".
2. 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/".
3. 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.