Creating a new template

The templates in CComment5 have a specific structure. So instead of starting a new template from scratch we advise you to copy an existing template and make modifications to it (you can still give it a different name and it won't act as a template override, but as a different template).

Let us create a new template step by step.

  • Go to components/com_comment/templates . Copy the default template

  • Paste the default template in templates/your_joomla_template/html/com_comment/templates

  • Rename the default folder to mytemplate (mytemplate = the name you wish to give to your new template)

Now when you go to your joomla backend -> components -> ccomment -> Settings -> your component settings -> in the template tab you should be able to select the template that you just created.

Table 8.1. Structure of a CCommet5 template

default.phpThis file loads the css & javascript and the necessary template for the javascript of the component to work. You are not advised to change any html ids in here. What you can do and you should do in this file is to change the path to the css file and add any necessary scripts in here.
settings.xmlThis file contains the settings that are available in the backend of the component (in the template tab). You should not modify any of the default settings, but you are free to add your own settings (for example if you distribute this ccomment5 template with your own joomla template & you want to give some special features to your users). This file follows the JForm xml structure.
default_comment.phpThis file contains the structure of each individual comment. You should not change any html ids or classes as this can lead to the malfunctioning of the component. On the other hand you are free to add your own classes to any html element and to move the elements as you see fit. You can remove any html element that has only bootstrap classes (row-fluid, small, pull-right etc), but you should not remove any html element that has a class starting with ccomment)
default_footer.phpThis file is responsible for the footer that is displayed at the bottom of the template (Powered by ...) You can add your own footer text such as "Template designed by XYZ". However the user should be able to hide the footer by using the show footer options in the template parameters in the backend of the component.
default_form.phpThis file is responsible for the comment form. You are free to add new html classes to each element, but you should be carefull when removing html elements. You should not remove any html elements that have a class starting with ccomment -> this can lead to javascript errors and the component will stop to function.
default_menu.phpThis file contains the code that makes the menu in the template (Comments (number of comments) add a comment | RSS| search buttons). Don't remove any elements that have a class starting with ccomment
default_search.phpThis file is responsible for the search form
default_searchresults.phpThis file styles the search results
readmore.phpThis file is responsible for the readmore button that is shown in frontpage view (category view etc). And it also loads the code for the comment preview
readmore_preview.phpThis file is responsible for the comment preview when on frontpage view (category view etc)The


The CComment5 template generate HTML code that is manipulated with javascript. We use Mustache templates . Code like this {{id}} is a placeholder - it will be replaced live on the page with the help of our javascript.


In each of the template files you have access to the global configuration option for CComment. You can access any ccomment options by using $this->config->get('fields_name.field_name')


The following code will work fine if SEF is off and the joomla site is not in installed in a subdirectory:

<a href="/{{{profileLink}}}" target="_blank">

Unfortunatly when SEF is on, the SEF plugin is automatically replacing the content in the href tag. If we are in a subdirectory let us say - joomla25, then the code will become this:

<a href="/joomla25/{{{profileLink}}}" target="_blank">

Because of that when we replace {{{profileLink}}} with the actual link, the URL will be incorrect. The only way to go around this is to use single quote:

<a href='{{{profileLink}}}' target="_blank">