Learning to Edit a Joomla Template - Joomla Tutorial

Seeing Your Template Code

This tutorial will show you how to start editing Joomla templates. I'd recommend starting with a plain Joomla installation - a test site. Don't try this for the first time on your live site! If you need help installing Joomla on your computer we have intsructions for both the P.C. and the Mac. We're going to be using the default rhuk_milkyway template.

We'll start by looking at the index.php file. It is located here: / templates / rhuk_milkway / index.php. Every template has this file and it places all of the different elements on the page.  

• Go to Administrator >> Extensions >> Template Manager and open the rhuk_milkyway template.
• Click "Edit HTML" in the top-right corner. You'll see the code that controls your template's output.
• Backup! Select all of the code and copy it into a text editor. Save the file somewhere safe.

Editing Your Template Code

This is a little trick that will swap the modules in the left and right-hand columns.

• Scroll down in the code until you see:

  < jdoc:include type="modules" name="left" style="rounded" / > (I've inserted a space at the beginning and end to stop the code from working here)

• This line of code tells Joomla to show all the module in the "left" position.
• Then scroll down until we see:

  < jdoc:include type="modules" name="right" style="xhtml" / >

• Let's do the reverse of what we did earlier and change name="right" to name="left"
• Click "Apply" and check the front of your site.

Seeing Your CSS Code

Next we'll look at the CSS file which controls the color, fonts, images and much more for your template. There was only one index.php file but often there are many CSS files. Each one controls a different aspect or style of the template - for example, one might control the red variation of the template, another green variation and a third the blue. Template designers split them into different files so you don't have to load them all each time - you don't have to load the green and blue code if you're only using the blue code.

However, 99% of the time Joomla designers put all of the most important code into template.css (fairly logically named). It is located in this folder: / templates / rhuk_milkway / css /.

• Go to Administrator >> Extensions >> Template Manager and open the rhuk_milkyway template.
• Click "Edit CSS" in the top-right corner.
• Scroll down until you find the template.css file and open it up.
• Backup! As above, select all of the code and copy it into a text editor. Save the file somewhere safe.

Editing Your CSS Code Part 1

First, let's change part of our site's style. We'll modify the design of links on our site:

• Scroll down in the code until you see:

  a:link, a:visited {
  text-decoration: none;
  font-weight: normal;
  }

• This line of code tells Joomla how to style the links on your site.
• Let's change that code so that our links will be underlined:
  

  a:link, a:visited {
  text-decoration: underline;
  font-weight: normal;
  }

• Click "Apply" and check the front of your site.

Editing Your CSS Code Part 2

Next we'll move the search box from the top-left to the top-right:

• Scroll down in the template.css code until you see:

  #search {
  float: right;
  width:320px;
  margin-top: -20px;
  margin-right: 30px;
  height: 40px;
  overflow: hidden;
  text-align:right;
  }

• Let's change that code so that our search box will move to the left:
  

  #search {
  float: left;
  width:320px;
  margin-top: -20px;
  margin-right: 30px;
  height: 40px;
  overflow: hidden;
  text-align:right;
  }

• Click "Apply" and check the front of your site:

Great, I've Got That ... What Next?

If you're feeling confident after these first steps, see if you can follow our tutorial on changing the logo on a Joomla template.