Customizing Template

Revision as of 09:13, 3 June 2015 by Michal (Talk | contribs)

Note: This article may contain obsolete data. While using the methods explained here will work in most cases, an example used may not as its been updated. Read more about it here

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
Attention:

If you set the override folder like those marked in red, it is the same as you would want to override the content of the JOOMLA/components/com_community/templates/default/templates/default or
JOOMLA/components/com_community/templates/default/templates/whatever folder

Remember, Joomla override can override only active output. It does not know the difference between JomSocaial Templates and at any given moment, you can have only one override that will always override the selected JomSocial template.

Customizing Single Template File

To customize the single template file, you will first need to identify what is the proper file to modify
The most common area that users would like to modify is the "Get Connected" area of the JomSocial template.

Getconnected.png

The output of this area is shown with this file

  • JOOMLA/components/com_community/templates/default/frontpage.guests.php

To override it properly, our override file needs to be

  • JOOMLA/templates/yourTemplateName/html/com_community/frontpage.guests.php

You can now start editing the override file and apply your changes. Once saved, the override will take effect, no matter what JomSocial template you have set JomSocial to use.

Reminder:

At this point you should figure out that Joomla override folder always override the active component output. Regardless of what JomSocial template you use in JomSocial Template configuration.
Similarly as you do with files, you can also override the content of other folders within JomSocial template.
For instance, if you want to override content of
JOOMLA/components/com_community/templates/default/css folder, your override path will be
JOOMLA/templates/yourTemplateName/html/com_community/css
If you want to override content of
JOOMLA/components/com_community/templates/default/images folder, your override path will be JOOMLA/templates/yourTemplateName/html/com_community/images

Be aware however, that overriding images, will require you to override CSS as well.

Example

  1. Go to Joomla! backend and from Components dropdow, select JomSocial -> Templates
  2. Select default template to be used on your site
  3. With file manager, navigate to ROOT/components/com)community/templates/default/
  4. Find the file frontpage.guests.php
  5. Copy that file to ROOT/templates/yourTemplateName/html/com_community
  6. With your favorite code editor, open the file for editing. We do not recommend you to do this with native Windows tools. Use something like Notepad++
  7. Edit the content of file as shown on the image bellow
    Overridefile.png
  8. Save the file and navigate to frontend of your site
  9. Check the result on the frontpage
    Helloworldfrontpage.png
  10. To revert the change, rename the edited file to frontpage.guests.php.MODIFIED or whatever name you want to use as long as its not the same as original
Note:: JomSocial also have some template files within modules folder. You can also override them but you need to follow the folder structure
If for example, you want to modify the JOOMLA/components/com_community/templates/default/modules/profile/userinfo.php then your override file will be JOOMLA/templates/yourTemplateName/html/com_community/modules/profile/userinfo.php

Customizing CSS Stylesheets

Hopefully, you have already realized that customizing style sheet will require you to create the css folder within Joomla override because they are in their own folder at the jomsocial template
Override always follow the structure of the template that has been overriden, so our override file will e.
We will repeat it again, just in case you forgot

  • Original File: JOOMLA/components/com_community/templates/jomsocial/assets/css/style.css
  • Override File: JOOMLA/templates/yourTemplateName/html/com_community/css/style.css

The drawback of this override is that CSS stylesheets which originally came with this file will be lost.
In other words, if you put blank style.css file there, preparing the customization, the entire JomSocial component will lose all of the styling.
Ofcourse, you could just copy the entire style.css file from default folder and start modifying it, but then you are not doing yourself a favor, because it will be hard to maintain it later.
To prevent this from happening, create the blank style.css file and insert the following @import code to the first line of it

@import url("../../../../../components/com_community/templates/jomsocial/assets/css/style.css");
/* Add overrides bellow */


Styleimport.png

This will import all JomSocial styles from default style.css file and you are set to modify your override.

Example

  1. Install Firebug for Firefox or any other developer tool we suggested here
  2. For this example, we are going to override the blue links in the profile page
    Cssoverride1.png
  3. Using Firebug, identify the element you want to change styling for by right clicking on it, then pressing "Inspect Element with Firebug"
    Cssoverride2.png
  4. The Fierbug window will open giving you the exact selector of the element
    Cssoverride3.png
  5. Edit the color value to see if change will take effect. Lets change it to red color. Click on the selector shown on the image above, and change the value for color property
    Cssoverride4.png
  6. Success???!! No! It is only changed on the Firebug window. You need to apply it to the override.
  7. Copy entire selector from Firebug
    Cssoverride5.png
  8. Paste it into your override CSS
    Cssoverride6.png
  9. Save it and refresh the profile page. The links will now be red.

Customizing Images

With template overrides, you can also customize the images as well, and first intuition is that copying and pasting the image from source folder to override folder would be enough. This however, is not the case. Images in modern day web are loaded through CSS
Just a few moments ago, we imported the CSS from default template of JomSocial in our css, remember. Images, are still loaded from default template, even if you paste them to the override folder. That being said, if you want to override the image, you need to add it to the proper override folder and define it in override CSS

Example

  1. Determine which image you want to override. For our exercise, we will change the image in the "Get Connected" box as this is one of the top asked questions.
  2. Use the Firebug to see where image is located.
    Imageoverride1.png
    • Firebug will conviently show you the image location within the folder where is located. For us it is still in JOOMLA/components/com_community/templates/default/images/
    • You can also see the image size so you can easily create the new one with same dimensions.
  3. Create the new image named guest-bg.jpg and place it in JOOMLA/templates/yourTemplateName/html/com_community/images
  4. Go back to firebug and copy the entire selector for the image
    Imageoverride2.png
  5. Paste it into CSS override file
    Imageoverride3.png
  6. Save and refresh the page (If no change occurs, do a "hard refresh" with CTRL+F5)
    Imageoverride4.png
  7. You can clear up your CSS override and just use what you really need. In this case, It is the image. Clear up the CSS class selector as shown bellow
    Imageoverride5.png
    The rest of the styles in that selector will be used from default template. We only wanted to change the image right.

Sample Override

A sample override from example guides can be obtained from the link bellow
Download Override

To use it, extract the archive on your computer hard disk and copy the com_community folder in

  • JOOMLA/templates/yourTemplateName/html

Override will automatically take place.
If you rename the frontpage.guests.php.MODIFIED back to frontpage.guests.php you will see the Hello World! message from the beginning of the tutorial.

See Also