Joomla Template Overrides - Blog layout

joomla template overrides

Template overrides are a very cool feature in Joomla which basically allows designers to manipulate its HTML output easily and securely.

With template overrides we are able to change the way our pages look, compared to a default Joomla installation and we can do this without compromising security. Furthermore, even if you update Joomla, you will not lose the customisation you have made through your templates overrides. Awesome!

This tutorial shows how to code some basic template overrides to make your blog area look neater.

I will show how to add a nice number in front of your titles just like in our portfolio area:

portfolio

Once the template override is applied, the number in front of the title will be generated and inserted automatically.

Let's start.

Step 1

BACKUP YOUR WEBSITE FIRST.

Launch your FTP program (I use Filezilla) and connect to your server.

On your server, check if you have the folder templates/YOUR_TEMPLATE/html/com_content/category

ftp view 001

 

If you don't have it, create it.

Note: YOUR_TEMPLATE is your template name.

Step 2

With your FTP program, look for the folder components/com_content/views/category/tmpl

ftp view

Once you are inside it, grab the file blog_item.php and download it onto your computer.

Step 3

Open the file blog_item.php that you have just downloaded and look for (it should be on line 25):

PHP Code:
  1. <?php if ($params->get('show_title')) : ?>
  2.  

Underneath it add the following code:

PHP Code:
  1. <?php
  2. // EDIT TO SHOW NUMBERS IN FRONT OF ARTICLE TITLES in BLOG VIEW
  3. //a counter
  4. global $myArtCounter;
  5. //get variables
  6. $catID = JRequest::getVar('id');
  7. $view = JRequest::getVar('layout');
  8. // ensure that you apply this to a only one specific category
  9. // otherwise you will have the number appear in all your categories
  10. if($view=='blog' && $catID==100){
  11. $myArtCounter= $myArtCounter + 1;
  12. //Add a zero before the number. It just looks better.
  13. $dcxlArtNum = "<span class='artnumdcxl'>".str_pad($myArtCounter,2,'0',STR_PAD_LEFT)."</span>";
  14. }
  15. ?>

IMPORTANT CHANGE: on line 10 of the code above, where it says $catID==100, you must change the number 100 to the ID of the category you are applying this override to.

Go in Category Manager and on the far right of the table in the last column, you will see all the category ID's. Get it and use  it instead of the number 100 in the code above.

Step 4

Find the line with this code

PHP Code:
  1. <?php if ($params->get('link_titles')
  2.  

Above it, look for an H2 tag

HTML Code:
  1.  
  2. <h2>
  3.  

Replace the whole line with the following code

PHP Code:
  1.  
  2. <h2><?php echo $dcxlArtNum ; ?>
  3.  

Step 5

Once you have changed the code with your category ID, you can save and upload the file to:

templates/YOUR_TEMPLATE/html/com_content/category

Now, if everything went right, you can refresh your website page and you should see the numbers in front of your article titles.

You will notice however that the numbers have no style.

Step 6

To make the numbers look pretty, open the CSS file of your template. It should be in the folder:

templates/YOUR_TEMPLATE/css/

At the bottom of your file on the last line, add this code:

CSS Code:
  1. .artnumdcxl {
  2. background: none repeat scroll 0 0 #F16000;
  3. color: #FFFFFF !important;
  4. padding-left: 9px;
  5. padding-right: 9px;
  6. }
  7.  

Save and upload it back to templates/YOUR_TEMPLATE/css/

 

If you liked the tutorial don't forget to like and comment.

Thank you!


Additional information