Customizing Your Joomla Template

You just installed Joomla on your hosting account and everything’s ready to go but you kind of want to change how things look? Customizing Joomla is easy. Before you get to modifying though, make a copy just in case something goes wrong. Log in your Joomla back-end and go to Template Manager –> Customise Template. The easy way of copying your template is to click on Copy Template in the toolbar, give it a name and that’s it. What we’ve done is create a copy of our template which we can modify and test things on see how they look, etc. When we break it and we don’t know why it doesn’t work anymore (my experience shows that’s only a matter of time, haha) we can just delete that template copy and use the original – everything is back the way it was.

Now from the Customise Template screen you can edit pretty much all the files you need to change the look and feel of your site like the CSS and Javascript files of the theme you’re using. See an example bellow:

customise-template-1

Joomla comes with some default templates you can choose from and it’s pretty easy to get new ones and completely change how your site looks. There are lots of high quality resources for templates online and a big chunk of them are even free.

Getting a theme that suits your needs as is will save you the hassle of heavily modding it. And to be honest I’d be surprised if from the sea of templates available out there you can’t find a good one that does what you want it to. Of course you’d still want to make some customizations, no mater what theme you get but most people just want to change the main image of their website – also known as the header image.

The header image. Every theme comes with one and it’s usually some generic stock photo that looks nice but maybe doesn’t represent the purpose of your website all that well. Let’s change it with something else.

After you’ve logged in the administrative area go to Extensions and then select the Module Manager from the menu. You’re looking for the Image module. By default it should be at position-3 and is a Custom HTML type. Now select the Custom Output tab and you’ll be able to edit the module that contains the header image. Click on the existing image and select the Image button at the bottom of the editor.

The Media manager will pop up and you can select your new picture from there. Make sure that the size fits the width of the theme or just check how wide the current picture is and resize the new one to fit the same dimensions. Get the picture you want and hit the Save button. Your header image is now updated.

This the basic principle of working with extensions in Joomla. Most of the functionality can be managed via extensions which include the modules, plugins, templates (yes, the templates are technically extensions too), components and languages.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s