How to Create a Custom HTML Module in Joomla
How to Find and Download Joomla Templates on the Internet
Joomla Extensions to Enhance Your Image and Video Management

How to Edit the Code of a Joomla Template

You can get into a Joomla template’s actual HTML and CSS code via its Customize Template page, which contains Edit HTML and Edit CSS buttons. Click the CSS file you’re interested in working with to view the template’s HTML or CSS code.

image0.jpg

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.

    image1.jpg
  2. Click the name of the style you want to edit.

    The style’s CSS file (template.css) opens for editing in Template Manager.

    image2.jpg

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.

blog comments powered by Disqus
Using the Banners Tab in Joomla Banner Manager
How to Install and Configure a Joomla Component Extension
How to Customize a Template in Joomla
How to Download a Joomla Extension
Add and Configure a Search Module on Your Joomla Website
Advertisement

Inside Dummies.com