Learning to Edit a Joomla Template

Video Showing How To Edit a Joomla Template

Seeing Your Template Code

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:

Joomla Template Change

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.

Would you like 100s more of these Joomla tutorials - the same used by Apple, Sun and IBM to learn Joomla? Every day, people are building great websites with Joomla. With Open Source Training, they have access to online classes and support from the best teachers in the Joomla world. Our professional teachers have created videos and tutorials for you that walk you step-by-step through everything you'll need to build wonderful Joomla websites. These are the same lessons we use to help clients like Apple, Sun, IBM, Hewlett-Packard and NASA. What's In Your Joomla Training?
	Your Joomla Subscription [-]
Same-Day Support	Unlimited Joomla questions, all answered within 24 hours.
Beginner-level Class	8 hours of video tutorials introducing you to all the key Joomla concepts.
Template Design Class	A complete video class showing you how to build and modify Joomla templates.
Search Engine Class	45 detailed tutorials on optimizing your Joomla site for search engines.
New tutorials every week	New weekly step-by-step tutorials on topics suggested by members.
Bonus Templates	Two commercial Joomla templates, Bolt and Breeze
Intermediate-level Class	Due July 2010

Open Source Training are the teachers trusted to train many of the world's most famous companies ...

Our Students Love the Training

The class was incredible. I really feel like it was money well spent.

Donna Becton

Thanks for everything. I look forward to trying new things after taking the course. You were great and made the class fun.

Carol Mesa

Learn Joomla Or Your Money Back ...

We're so confident that you can learn Joomla with our classes and with our help that we'll refund your money at any point during your membership.

If you're not able to build a high-quality Joomla website, we'll give you a 100%, unconditional refund.

Why Learn Joomla From These Expert Teachers?

You'll be able to learn at your own pace, 24 hours a day, 7 days a week.
You need no Joomla or web-design knowledge.
You'll get rapid Joomla answers from teachers who have taught 1000s of students.
You'll have fun! The videos are entertaining and make your Joomla experience enjoyable.
You get two professional Joomla templates, Bolt and Breeze, worth $120.
You'll learn from comprehensive and organized classes, not random tutorials.
You'll save dozens of frustrating hours digging around the web for answers.
You won't waste thousand of dollars on webdesigners. You can build Joomla websites.