How To Edit Joomla Templates - part 1How To Edit Joomla Templates - part 1
Posted by: webmaster in Tutorial, Templates, Joomla 1.5, Joomla on Oct 1, 2008
We've been getting a lot of questions on how to a edit a joomla template, so here's an explanation on how to do this. This article will be in 2 parts. This first part will explain how to edit a Joomla template. It's the theoretical part of the explanation. The second part will show an example where you will see how you can change the look of a template completely within minutes.
First you'll have to ask yourself the question: what do you really want to change? If you're just making one website, you have a great looking template and you only want to change some images on the template, then this article will be more then enough for you. If you want to change more, like how the titles look, changing the size of a part of your template, etc ... then this article will just point you in the right direction. In this case you will have to learn at least the basics of css and html. There are tons of online tutorials available for this. One I would recommend is the one of w3schools. That's a great site, I still use this quit often. You will find not only tutorials, but also a complete reference, lots of examples and even a quiz.
Make a copy
A smart thing to do is to make a copy of the original template. This way you can easily compare your changes with the original template. Here's how you can do this:
- Open the zip-file of the original template and open the file templateDetails.xml
- In this file you will find something like
template_name . Change this name to whatever you want to name your template - Open the file index.php from the zip-file
- In this file, scan for the template name and replace it with the name of your template. You will probably find it as part of a path to the css file(s).
- make a new zip-file
- install this template
Now you should see your new template in the Template Manager.
Change the images
If you use a template, you will almost always want to change some of the used images and logo's with your own. It's easy to do this. If you open the zip-file of the template, you will see a folder called 'images'. This contains all images used in the template. So all you have to do is replace these images with your own, make a new zip-file and install that template. Of couse you can also overwrite the images directly on your server.
If you replace images, then the best thing to do is to replace them with images of the same size. It's less work to change your images to the right size, then it is to change the template to match your images.
As a sidenote I would say that in my opinion, replacing images should be made easier. It should be possible to replace the images directly in the Template Manager, so people without ftp access don't have to make a new zip-file and reinstall the template each time they replace an image
Changing the content
In Joomla templates, the content and the design has been completely seperated. The content is present in the file 'index.php', the design is in one or more css-files. The index.php contains (or should contain) not much more then a number of
Now you see the contents of the file index.php. You will find there lines like:
This is nothing more then a
A nice experiment you can do is to look for 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 I mean with content only. All you will see is plain text. If you don't understand the purpose of css-files, this experiment will make that crystal clear for you.
Changing the style
You can change 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 however have more then one stylesheet. There are no real conventions on how to split the CSS code in different files and how to name them, so you will have to examine them to know what is part of a certain CSS-file. Just select one of the CSS-files and hit the 'Edit' button.
Now you can change the style sheets any way you like. I won't go into more detail here, that's what the CSS tutorials I mentioned in the beginning of this article are about. Just one more tip: most browsers now have different tabs which makes it easy to switch between different sites. Use this when you're changing css-files. One tab where you change the CSS and one tab where you see the template. If you're not experienced with CSS, always do just one change and then verify the result.
Now it's time to see it all in action with an example...but that will be covered in the second part of this article.
TrackBack URI for this entry
Subscribe to this comment's feed
written by Nick, November 23, 2008
-
- +7
-
-
written by Largo, February 13, 2009
It's a bit hard to say what's wrong with your zip-file. My first thought is that you made a .tar file in stead of a .zip file. If not, please register on the forum and post your zip-file there, then I'll check it
-
- +1
-
-
written by Randy, February 23, 2009
-
- +6
-
-
written by Largowww, February 23, 2009
With extensions->module manager, you will find the menu and there you can unpublish it
OR
With menus-> menu manager, you can delete the menu
OR
with menu->title of the right menu, you can add/remove items to the menu
-
- +0
-
-
written by karthi, March 18, 2009
-
- +4
-
-
written by Largo, March 23, 2009
-
- +2
-
-
written by Parthiban, July 02, 2009
-
- +5
-
-
written by aya, September 08, 2009
say, in the menu I wanna change the word 'about joomla' to 'Home'
thx
-
- +1
-
-
written by Stas, September 14, 2009
I would like to suggest also free PHP IDE Codelobster PHP Edition with special Joomla plug-in for editing Joomla themes.
-
- +0
-
-
written by coolgagan, October 07, 2009
-
- +1
-
-
written by Momwonder, October 13, 2009
I have searched my control panel and Joomla and just don't find where it is referenced to change it.
Any help would be appreciated. I just started the site so ignore it's look right now.
-
- +1
-
-
written by Largo, October 19, 2009
-
- +0
-
-
written by bhargavi, November 16, 2009
-
- -1
-
-
written by bhargavi, November 16, 2009
the actual question is..
what kind of pictures are compatible to upload in the templates??i mean like gif? or jpeg?...... please reply soon
-
- +0
-
-
written by Arjun, November 18, 2009
Submenu is hiding behind the photo slide show of myphotos page......
-
- +1
-
-
written by Largo, November 24, 2009
@arjun: well, then you have to re-arrange your modules.
-
- +0
-
-
written by alışveriş, November 27, 2009
Thanks a bunch!
-
- +0
-
-
written by Akshay, December 01, 2009
I have install new templete(zip file) from extenstion->install/uninstall. i have added menu items from modules in main menu. but i want it on the specific side (top) on the site. There is facility to set it on top but i want to set it in the specific area, how i can do it? also if i set the menu horizontal-top, there is no blank space between two menu items, How i can separate it?
-
- +0
-
-
written by lacks me, December 07, 2009
-----------------------------------------------------------
This is what I did, Open the zip file but do not unzip, copy the file you want to edit to another folder, do some changes, after editing, save the file.
right click on the file "i'm using winrar", then click add to archive, then from update mode select "add and replace files", that's it.
you are ready to go and install the files again.
-
- +0
-
-
written by ozkan, January 31, 2010
We've been getting a lot of questions on how to a edit a joomla template, so here's an explanation on how to dizi izle do this. This article will be in 2 parts. This first part will explain how to edit a Joomla template. It's the theoretical part of the explanation. The second part will show an example where you will see how you can change the look of a template completely within minutes.
-
- +2
-
-
written by Sara, March 02, 2010
It seems to be a similar problem as that reported above but the suggested tip does not work for me. I am using 7-zip.
Any insights are appreciated. Thank you.
-
- +0
-
-
