From the category archives:

Joomla Templates

One of the joys of using Joomla is that it can be all things to all people. For someone who has a firm understanding of CSS and HTML, Joomla is a system that allows you to keep all of the information in one place and manage everything from a central location. For someone who knows as much about CSS and HTML as the average person, Joomla is a way of creating websites that look impressive in order to display their original content in a way which viewers will find pleasant to look at and easy to navigate. This is due in no small part to the ready availability of Joomla modules.

For people who have some knowledge of CSS and HTML, there may be some concern over an existing Joomla template – the ones which are packaged with the basic Joomla software and the ones which are downloadable from the Internet. Possibly, the modules will be lacking a little something – the images that are included may not be appropriate for their site, or the text irrelevant. If this is the case, editing the Joomla template should be easy.

Editing the Joomla template further is possible if you have more knowledge of CSS and HTML. You may find, for example, that the template you have seen looks all but perfect, but is the wrong color or is imperfect in some other way. Although you want to keep the majority of the coding, you would need to change some of it to achieve the overall look you want. If you are going to do this, you should start by making a copy of the original template. Many people have made the mistake of starting to modify and then losing their place, and end up destroying one good template without creating anything usable.

Joomla templates are different from many others in that the templates feature separate content and design files. This means that depending on how much you want to change, you can usually do what you need to without an excessive amount of disruption.

If you just want to change the images in a Joomla template, then it really is simple. When you open the .zip file that the template came in, you will see a folder titled “images”. Literally all you have to do to change these images to others is overwrite them with your own. You then save the template under a different name (as a .zip file) and install the “new” template.

To change more fundamental elements will require some more knowledge. If you want to make content changes – and this includes displaying information on the right side of the screen or the left – then the index.php file will need to be changed. If you want to make stylistic changes, the file you are looking for is the CSS file. If you go into the index file and entirely remove the references in that file to the CSS one and then display the website, you will see that it is “text-only”. This is why it is important to be careful with the CSS of your site – changes to this dictate how your site looks.

A handy tip when editing an existing Joomla template is to have two or more tabs open – one showing the template itself and the other showing the changes you are making. Refer between these screens to see if your changes are having the desired effect.

0 comments

One of the reasons that using Joomla makes it easy to create a website is the availability of templates that take care of all of the background stuff, so you can concentrate on the content. There is undoubtedly a consideration here, that any template you use will be someone else’s – and may not be quite what you are looking for when it comes to making your website yours. If you are fairly confident with coding, you can create your own templates and use Joomla the same way you do for content – as a management system which keeps everything in one place.

To create a (very) basic template for Joomla, you simply need to have an FTP client – or know how to use the File Manager of your cPanel – and the basic template files that make up every Joomla template. These files are:

  • Index.php – this creates the main body of your template, positions and a path to your stylesheet.
  • TemplateDetails.xml – this is the file that the Joomla software needs to read the information in your template
  • Css/template.css – this is the stylesheet itself. That means it carries all of the information that decides what your website looks like.

There are three basic templates that come with the Joomla application, and to see what the above files look like you can open any of the template files and familiarize yourself with the content of the files. There is a lot of detail in each of these and to list it all here would take up too much space, but if you are familiar with HTML code it will be recognizable to you.

In the index.php file, you will include any code which specifies the position of content – whether that be page titles, meta descriptions and tags, and so forth. It is this file that will govern the layout of your website.

In the templateDetails.xml file, a lot of information is required so that Joomla knows what to show. You can write this code yourself, or base it around the already-existing code for the templates that came with the software. The information in this file will tell Joomla which version of the software the template has been written for, what it is called, who created it and when, as well as a great deal of other information. This is where the licensing information is kept.

The final file that you need to edit is the CSS file. CSS stands for Cascading Style Sheet and is responsible for the colors, fonts and graphics used on your site. When you are editing the index file you will need to place a line of text pointing to the CSS file, so that your website knows where to load the stylesheet file from.

There are many guides on the Internet which will inform you on how to edit the specific information in the three separate files, and it is worth familiarizing yourself with these guides before you attempt to create any intricate template for Joomla. To begin with, it is worth simply playing with the code to see what kind of changes are possible.

0 comments