Joomla makes it possible to re-design almost any aspect of your site.
In a previous post, we explained how template overrides work. In this post, we're going to talk about layout overrides.
Layout overrides are more narrow and specific than template overrides. Layout overrides allow you to customize small portions of a design, for example: social icons, article titles and tags.
Core layouts are located in the folder called /layouts/. For this tutorial, we will use the default Protostar template.
How to override the Joomla tags layout
Let's customize the HTML output for tags which, by default, looks like the following screenshot:
Here's how we use a layout override to change the color of those tags:
- Copy the tags.php file from: /layouts/joomla/content/
- Paste the tags.php file into: /templates/protostar/html/layouts/joomla/content/
- In line 22 of tags.php, add theses classes to the <a> tag: btn btn-primary (leave an empty space after that). The full line of code will look like this:
<a href="/<?php echo JRoute::_(TagsHelperRoute::getTagRoute($tag->tag_id . '-' . $tag->alias)) ?>" class="btn btn-primary <?php echo $link_class; ?>">
- Your tags layout will now look like this:
How to override the Joomla icons layout
The print and email icons on category blog pages look like this:
Here's how we use a layout override to change the design of those icons:
- Copy the icons.php file from: /layouts/joomla/content/
- Paste the icons.php file into: /templates/protostar/html/layouts/joomla/content/
- In the file icons.php, delete the code starting from line 16 to the end. Replace it with the following code:
<div class="icons pull-right">
<?php if (empty($displayData['print'])) : ?>
<?php if ($canEdit || $displayData['params']->get('show_print_icon') || $displayData['params']->get('show_email_icon')) : ?>
<?php // Note the actions class is deprecated. Use dropdown-menu instead. ?>
<ul>
<?php if ($displayData['params']->get('show_print_icon')) : ?>
<li class="print-icon"> <?php echo JHtml::_('icon.print_popup', $displayData['item'], $displayData['params']); ?> </li>
<?php endif; ?>
<?php if ($displayData['params']->get('show_email_icon')) : ?>
<li class="email-icon"> <?php echo JHtml::_('icon.email', $displayData['item'], $displayData['params']); ?> </li>
<?php endif; ?>
<?php if ($canEdit) : ?>
<li class="edit-icon"> <?php echo JHtml::_('icon.edit', $displayData['item'], $displayData['params']); ?> </li>
<?php endif; ?>
</ul>
<?php endif; ?>
<?php else : ?>
<div class="pull-right">
<?php echo JHtml::_('icon.print_screen', $displayData['item'], $displayData['params']); ?>
</div>
<?php endif; ?>
</div>
- If you go to your site, this will be the result:
It's important to note that, in the Protostar template, this will work for articles in the Category blog layout only. In order to use the same layout override in the full article view, you need to do a component override and replace the code that display the icons with the syntax that renders the layout.
- Copy the default.php file from: /components/com_content/views/article/tmpl/
- Paste the default.php file into: templates/protostar/html/com_content/article/
- Edit the default.php file, by deleting the code starting from line 68 to 82 add replacing it with the following:
<?php echo JLayoutHelper::render('joomla.content.icons', array('params' => $params, 'item' => $this->item, 'print' => false)); ?>
There are many more layouts available to override in the /layouts/joomla/ folder and also provided by 3rd party extension developers.