How to Edit the Code of a Joomla Template

 

Below is how you can edit a joomla template and make it look like you did the whole job. An average Nigerian is now a web designer all because Joomla has made everything easy.

 

 

When you customize a template in Joomla, you typically make changes to its CSS code.

To open a template’s CSS file for editing, follow these steps:

1. In the template’s Details page, click the Edit CSS button.
   The Customize Template page opens. This page lists the CSS files associated with the template — usually, a lot of them.
   
2. Click the name of the style you want to edit.
   The style’s CSS file (template.css) opens for editing in Template Manager.
   

The template.css file is a long one — about 16 pages — and that’s just one of the files that goes into a Joomla template. It’s a bona-fide CSS file, and here’s how it starts:

/*****************************/
/*** Core html setup stuff ***/
/*****************************/
html {
 height: 100%;
 margin-bottom: 1px;
}
form {
 margin: 0;
 padding: 0;
}
body {
    font-family: Helvetica,Arial,sans-serif;
    line-height: 1.3em;
    margin: 0px 0px 0px 0px;
    font-size: 12px;
    color: #333;
}
a:link, a:visited {
    text-decoration: none;
    font-weight: normal;
}
a:hover {
    text-decoration: underline;
    font-weight: normal;
}
input.button { cursor: pointer; }
p { margin-top: 0; margin-bottom: 5px; }
img { border: 0 none; }
/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
    padding: 10px 0;
    margin-bottom: 1px;
}
div.center {
 text-align: center;
}
div#wrapper {
    margin-left: auto;
    margin-right: auto;
}
body.width_medium div#wrapper {
    width: 950px;
}
   .
   .
   .

Unfortunately, to edit this file you really have to know what you’re doing in CSS to make your own changes. (A good WYSIWYG code editor built into Joomla would be great for this situation.)

There’s a lot of debate about whether it’s better to use HTML tables or CSS to arrange components and modules in Joomla templates; both sides of the argument have strong points.

HTML tables, for example, are pretty rigid structures that make it hard for search engines to understand the content of your page. CSS implementations, on the other hand, vary widely from browser to browser, and some older browsers allow you to use only minimal CSS. The Beez template in Joomla is an example of a tableless CSS template.
As you can see, truly customizing a Joomla template is not something to be undertaken lightly. So how do you get the template you want? You can download it. There are Joomla templates online. Some are free while others require a small fee to download.