Template overrides are wonderful because they are allow you to safely redesign almost any part of your Joomla site.
Here at OSTraining, we teach people how to create template overrides in Joomla.
However, for Joomla template beginners, it can be difficult to find the right file. If you're looking at the front of your site, how do you know which file is controlling the layout?
This tutorial will show you an easy way to find the file you need.
In this example, let's say you'd like to move the "Read more" link on a K2 site. You want to move the link so that it is above the "Published in" and "Tagged under" areas, instead of underneath.
The trick in this situation is to use the menu link.
Go to your menu item in the backend. The "Link" attribute will give you the details you need.
In the example, the Link is this:
Let's break this down. The link is telling me that the file is in the component "k2". It's using the "itemlist" view and the layout called "category". The pattern will always be like this:
So the file I'm going to need for the template override is:
This trick will work in most cases. Give it a try!
More Advanced Techniques
Some extensions are unique and need a few extra steps.
In the above example, category.php is an empty file with just a few lines of code.
The reason is that K2 creates its layouts in a unique way. It stores them in: components/com_k2/templates/default/
First we'll try looking at the category.php file in there. We see the following code:
// Load category_item.php by default $this->item=$item; echo $this->loadTemplate('item');
So it's loading each of the K2 items from category_item.php.
In category_item.php, we see the following code:
<?php if ($this->item->params->get('catItemReadMore')): ?> <!-- Item "read more..." link --> <div class="catItemReadMore"> <a class="k2ReadMore" href="/<?php echo $this->item->link; ?>"> <?php echo JText::_('K2_READ_MORE'); ?> </a> </div> <?php endif; ?>
There's the code we'll need. The "Published in" code is above it in the same file. In our template override, move the "read more" code above the "Published in" code. Be sure not to do it in the actual file, but rather move it into the template override.
Use the menu item's link for an easy way to find the file you need. The code you need will be in there most of the time or referenced in it.
If the code isn't in there, it's likely that the component uses a unique approach. It requires a bit more investigation.