How to Edit a Joomla 3 Template

Much like Joomla 2.5, the Joomla 3.x series includes a template editor available within the admin dashboard. The template editor allows you to edit your template directly within your browser. This is helpful and sometimes more efficient than editing files using ftp or another method.

In this tutorial, we will walk you through the steps of editing a template file in Joomla 3.

Please note! This tutorial walks you through the steps of editing template files. Before editing any template file, we recommend that you first make a backup of the original file.

Joomla 3.0

  1. Log into your Joomla admin dashboard.
  2. In the top menu, click Extensions and then click Template Manager
  3. In the left menu, click Templates
  4. You will see a listing of templates you have installed. Find the template you want to edit, and then click the Template Details and Files link.
  5. Click the file you want to edit

    You are now on the Customise Template page. The left menu of the page shows Template Master Files and in the right menu it says Stylesheets. Click any of the files in those two lists to edit the corresponding file. Below is a list of the files that you can edit:

    Edit main page template: index.php
    Edit error page template: error.php
    Edit print view template: component.php
    Edit css/template.css: css/template.css

  6. Edit the file and then click Save

    After clicking one of the above files, you’ll be brought to the Template Manager: Edit File page. On this page you will see an editor that you can use to edit the code of the file you chose. Make the changes you wish, and then click the Save button in the top menu. Congratulations, you just edited your template!

Results of our Joomla 3.0 testing

In our testing, we were working with Protostar Details and Files and chose the Edit main page template option. Under the opening of the body tag, we added the following text:

<h1>Look, I edited my template!</h1>

Below you can see screenshots showing where we made the edit, and how it changed our template:

Making changes in the template editorViewing the changes we saved
Make changes in the 3.0 template editor
View the changes on front end

Joomla 3.1

The steps for editing a template in Joomla 3.1 are the same as they are in Joomla 3.0.

Joomla 3.2

  1. Log into your Joomla admin dashboard.
  2. In the top menu, click Extensions and then click Template Manager.
  3. In the left menu, click Templates.
  4. You will see a listing of templates you have installed. Find the template you want to edit, and then click the Template Details and Files link.
  5. Click the file you want to edit.

    By default, the Editor tab is shown. In the left menu, you will see a listing of files and folders for the template you chose. Click the name of the file you want to edit.

  6. Edit the file and click the Save button.

    After clicking a file name, you will see an editor showing the code within that file. Make the changes you wish, and then click the Save button towards the top left of the page.

Results of our Joomla 3.2 testing

In our testing, we edited the index.php file. Under the opening of the body tag, we added the following text:

<h1>I edited my template!!!!</h1>

As you can see in the screenshots below, after saving the changes and going to our website, we can see the change that were made.

Making changes in the editorReviewing the results of the change
Make changes in the 3.2 template editor
View changes on the front end

Changelog

Joomla 3.0 to Joomla 3.2

The biggest change in the template editor feature between Joomla 3.0 and Joomla 3.2 is the access to which files you can edit. In Joomla 3.0 you are by default limited to editing only the index.php, error.php, component.php, and css/template.css files. In Joomla 3.2 you actually have access to all of the template files. You can navigate and choose which files to edit using a file manager (pointed out in the screenshot below).

3.0 vs 3.2 template editor

30 thoughts on “How to Edit a Joomla 3 Template

  1.  i erased code in my index.php file in templates and now the navigation and footer are refusing to be edited, help out , how do i recover the lost code

    1. Sorry for the problem with your lost code. Unfortunately, if you don’t have a backup, then you may not be able to recover it. If the code is from somewhere public, then you may have re-create it. Otherwise, you may need to speak with a developer to help fix the problem that you’re having.

  2. Please help me on how I can add lines or boxes on my top panel. I am using using Joomla 3.4.5

     

    Thanks.

    1. Once you have the template open, you can add your own HTML and CSS to the template file. As long as you know how to code those, you will then just use some trial and error to get things right.

  3. Hello, I am using Joomla 3.4.1 our website for my organisation Keeps hacked by Anonymous Group!  what can you help for me? I need your Help please! 

    1. Hello Eddy,

      If you’re repeatedly getting hacked by the same group, you may need to look at your site to see if any vulnerabilities are the source of your security issues. Check out this post in the Joomla suppport forums. It may help provide you the answer, or at least provide you a hint at what or where you can go net.

      If you have any further questions, please let us know.

      Kindest regards,
      Arnel C.

  4. I am using Joomla 3.4, i want to edit my favicon using my admin dash board  but i do not know which of the files that contain the favicon. 

  5. Hi, I’m very new to Joomla but would like to resize some of the modules on my page as was handed over to me by my designer who is not available to do that now. How do I go about it. I don’t even know which template to work on. Please help.

    Thanks.

    1. Check to see which is the active template. Once you find that you will likely need to alter the template files for your specific area. It is not a good idea to modify core files of any type, but if you do, be sure you create a copy prior to modifying them so you can always go back.

  6. Hi! am new in joomla,am working in my site using protostar template,howwant  to know how i will make my navigations static while i scroll the site downwards using vertical bar….Thanks for being resourcefull.

    1. Hello Kiprono,

      Unfortunately we do not provide custom solutions, but feel free to ask a question about any specific error you may be getting.

      Kindest Regards,
      Scott M

  7. Hi Folks

    I’m using the JoomShaper template, and want to edit the Meta-Tags directly. I added the following to the Index.php…

    <meta http-equiv=”X-UA-Compatiblecontent=”IE=edge,chrome=1“>

     <meta name=”robotscontent=”index, follow” />

     

     

     

    But it appears to be overridden with this:-

    <meta name=”authorcontent=”Super User” />

     

     

     

    Question is, where are the second lot of Meta-Tags located, they are not within the index.php file.

    Many Thanks, Steve

    <meta name=”viewportcontent=”width=device-width, initial-scale=1.0” />

     

    <meta name=”viewportcontent=”width=device-width” />

     

     

     

     

     

    1. Hello Steveb,

      Apologies for the issues with the JoomShaper template. We unfortunately do not have access to that template here and it is considered third-party. I tried to see if I could find anything on the meta tags and the best thing I could find was a post in the JoomShaper Support Forum. You may want to post your question there for further assistance.

      I hope that helps to answer your question! If you require further assistance, please let us know!

      Regards,
      Arnel C.

  8. i am a new user of joomla 3.4.1.

    i want to know full detail about joomla..please help me

    ex:template,menu,articles,menu manager,extension and all

  9. How do I edit the iProtostar index.html?

    I would like to edit my the Protostar template index.HTM file… the same you see when you right click with your mouse over any page and open “inspect element”. I dont see how to acces these files. The index.php does not show the same code…there are many things that I see in “inspect element” that does not show in that index.php.

    Please advise

     

     

    1. Hello Karin,

      When you use the ‘inspect element’ function you are looking at the output of the page on the screen. What is displayed on the screen is the HTML/CSS output of all the php and the different functions and files it calls. If you cannot edit the file as in the article, you would need to use something like the cPanel or an FTP client and search for the specific file you want to edit.

      Kindest Regards,
      Scott M

  10.  

     

    Hi Scott, thanks for your reply, I deleted the browser cache and now I’m dealing with a protostar empty template and does not show me the picture. In the index.php file I see only one css invocation. I‘ll try to find another template.css.

    Thanks again!

    Daniel

  11. Hi, I’m trying to modify the template.css file adding this line in the body definition ” background-image: url (‘../images/Fondo.jpg’);” but it is not working, I see the file updated in the path ../template/protostar/css, but when I run this and see the file template.css with firebug I can’t see my modification. The path that firebug show me is the same that I have modified.

    Joomla version is 3.3.6.

    Thanks very much for your help!

    Daniel

    1. Hello Daniel,

      Be sure to check and see if there are any other css files called subsequently. If so, and they have a setting for the same element, then that will override the one you modified. Also, be sure to clear your browser cache in case it is a caching issue.

      Kindest Regards,
      Scott M

  12. dear i am facing a problem on my website www.kawun.edu.af when i press the enter button its opened the library pag and i want to be opened the home page how i can fix that problem with your kindness please help this issue as soon as possible.

     

    1. Hello Vadzim,

      Thank you for contacting us. We are happy to help you, but will need some additional information.

      What type of counter are you adding? Is it a Google Analytics counter such as Visitors Counter, or Vinaora Visitors Counter?

      What happens when you add a counter?

      Are you getting any errors? What are they?

      If you have any further questions, feel free to post them below.

      Thank you,
      John-Paul

  13. Thanks Alot,

    I am new to joomla but with the help of people like you design a website for my NGO

    https://www.ssamriddhifoundation.org/

    thanks again

     

    1. Hello Manish,

      We here at the customer community do not design websites or custom code, but we are happy to try and answer specific questions you may have along the way.

      Kindest Regards,
      Scott M

  14. Very nice page. I have a lot of things to learn here. Thanks a lor for your free contributtion.

Was this article helpful? Join the conversation!