How to Edit a Template in Joomla 3.x

The Template is an extension or an additional facility provided by Joomla, so that your site may appear attractive. You can change the appearance of your template anytime according to your suitability, by editing the Template you are using.

This article will let you know how to edit a template in Joomla 3.x, for that you just need to go through the following steps once and then you will surely be able to edit a template.

Steps to Edit a Template in Joomla 3.x

Step 1: On the Dashboard,  the“Extension” menu is available on the top, click on it, and then choose the  “Template Manager” from the drop down list.

Step 2: Under “Styles” section various templates which you’ve downloaded will appear and some of them comes by default when you install the Joomla.

Click on the one you want to edit, just below the “Template” section.

Step 3: In editor section various files are available associated with the respective template you have chosen. If you want to edit “css” then click on it, various other files are available under css file, choose the one you would like to edit.

css– It store the code related to styling that’s why called as “Cascading Style Sheets”.Here you can set margin, text-area, font-size, font-family, border, alignment, etc of the content in your webpage.

Step 4: If you want to deal with fonts then select “fonts” file.

fonts- In this template fonts is available separately and it is basically used to set the Headings and therefore the tags from H1 to H8 are available. H1 means the largest size whereas H8 is the smallest.

Step 5: Now, comes the html files, the most important one, all your content and its related tags is available in this file. From here you can manage your content size, font, etc,. Just below it, the images file is available where all the images are stored related to the theme.

Step 6: “js” file means javascriprt related content is stored in it. All control operations are linked with javascript.

Click on it to edit it.

Step 7: If you are interested in making the changes in the language file, then, select that file under language and modify it according to your choice.

Step 8: Less file extends the css attributes dynamically such as variables, operations, etc. Want to make the changes then have a look at this file.

Step 9: Some other php and xml file are shown in the figure below. All have its own functioning, if you want to edit then go through it.

One of the most important is “index.php” that contains header, body and footer information.

Step 10: After making the changes, you would like to, click on “Save” to successfully save the changes made.

NOTE:

In this article, I have given you a brief introduction about each and every file that exist in a template, so that you can make the changes in any file as per your requirement.