User Tools
You don't have to be a HTML or CSS expert to be able to change a Joomla Template to you own needs. You just have to be willing to learn the basics and then everybody can change an existing template to look just like you always wanted it to look with a html to joomla conversion
First you have to ask yourself the question: what do you need toadapt? If you're making a single web site, you have a great lookingtemplate and you only want to replace some image, then this article willbe enough for you. If you need to adapt more, like how thetitles look, changing the size of a part of your template, etc. Thenthis article will only point you in the right direction. In this caseyou will have to learn at least the basics of css & html. There aretons of online tutorials accessible for this. I would recommend the onefrom w3schools. That's a great site, I still use this quit often. Youwill find there not only tutorials, but also a complete reference, lotsof examples and even a quiz.
find out <a href=“http://www.wikihow.com/Convert-HTML-to-Joomla:-7-Steps”>how to convert html to joomla </a> A cleverthing to do is to make a copy of the original template. This way youcan easily compare your changes with the original template. Here's howyou can do this:
Open the zip-file of the original template and open the file templateDetails.xmlIn this file you will find something like template_name. Adapt this name to whatever you want to name your template Open the file index.php from the zip-fileIn this file, scan for the template name and replace it with the nameof your template. You will probably find it as part of a path to thecss file(s).make a new zip-file install this templateNow you should see your new template in the Template Manager.
Replace the images
Ifyou use a template, you will almost always want to replace some of theused images and logo's with your own. It's easy to do this. If you openthe zip-file of the template, you will see a folder called 'images'.This contains all images used in the template. All you have to do isreplace these images with your own, make a new zip-file and installthat template. Of course you can also overwrite the images directly onyour server. Note that you really have to replace the files with adiferent image, but with the same name.
It's also best toreplace the images with images of the same size. It's less work toadapt your images to the right size, then it is to adapt the templateto match to the size of your images.
As a side note Iwould say that in my opinion, replacing images should be made easier.It should be possible to replace the images directly in the TemplateManager, so people without ftp access don't have to make a new zip-fileand reinstall the template each time they replace an image.
Changing the content
InJoomla templates, the content and the design has been separated. Thecontent is present in the file 'index.php', the design is in one ormore css-files. The index.php contains (or should contain) not muchmore then some elements with a part of the content inside it. To adaptthis, first select the template, hit the edit button and click on 'EditHTML'.
Now you see the contents of the file index.php. You will find there lines like:
This is nothing more then aelement that will contain all modules on the left position. If youadapt name=“left” to name=“right”, you will select the right modules instead of the left once, but they will still be shown on the leftposition. Once you understand the html basics, you can adapt hereanything you need.
A fun experiment you can do is to lookfor the lines in the index.php file where you see css-files included.If you remove these lines and then check your site, you will see what Imean with content only. All you will see is plain text. If you don'tunderstand the purpose of css-files, this experiment will make thatcrystal clear for you.
Changing the style
Youcan adapt the css files in the same way. Only this time you select'Edit CSS' in stead of Edit HTML. Now you will see a list of CSS files.If you're lucky, there will be only one. A lot of templates howeverwill have more then one stylesheet. There isn't a real convention onhow to split the CSS code in different files and how to name them. Thismeans you will have to examine them to know what is part of a certainCSS-file. If you select one of the CSS-files and hit the 'Edit' button,you will see the content of the css-file.
Now you canadapt the style sheets any way you like. I won't go into more detailhere, that's what the CSS tutorials I mentioned in the beginning ofthis story are about. One more tip: most browsers now have differenttabs which makes it easy to switch between different sites. Use thiswhen you're changing css-files. One tab where you adapt the CSS andanother tab where you see the template. If you're not experienced withCSS, always change one line and then verify the result.If you find this a bit abstract and you want to see it in action with a practical example: Check out how to do a fast html to joomla conversion
