Featued image 3 Steps to Customize Joomla Templates - 3 Steps to Customize Joomla Templates

Joomla is a very practical and easy to handle open-source content manager for uploading any kind of web content. When you are using it, more than 8,000 extensions will be at your disposal to play with and customize the content you work with.

Joomla templates are rather easy to customize, whether you know CSS or not. With these steps, you will learn to change some items on your website and they will serve as an example you can apply to every customization.

Post image 3 Steps to Customize Joomla Templates Without Knowing CSS - 3 Steps to Customize Joomla Templates

Without Knowing CSS

For those of you that are still not well versed in CSS and wish to do it another way, these are the steps you should follow to customize the menu colour quickly and easily.

First Step

Open your browser and log in to the Joomla admin panel from there. Once you have entered this panel, you go to the top Extensions menu and click on Template Manager.

Second Step

You will choose the default template you want to work with and then go to the Styles tab on the left side. Find the Custom Style option to enable it.

Third Step

Go to the header part and click on the colour icon where you can either choose the colour from the palette or enter the #HEX code of the colour you want. Don’t forget to save after you are done.

Post image 3 Steps to Customize Joomla Templates With CSS Knowledge - 3 Steps to Customize Joomla Templates

With CSS Knowledge

If you are well versed in CSS, you might want to customize your template through CSS programming by following these steps. We will use customizing your font size as an example of this.

First Step

Open your browser’s developer tool and right-click on the area that you want to change the font size for and select the Inspect element option. This will prompt your developer panel to open.

Second Step

Your developer panel has 2 columns, you will go to the right one where it shows all the CSS codes and look for the CSS Class/ID. Copy it along with the CSS property that you want. As we are working with the font size, you need to paste it on the Custom CSS Box.

Third Step

Write the actual CSS code for the font size you want, which should read font-size: 16px;. The full code should end up looking like .ex-menu li > a { font-size : 16px; }. After you are done, you need only save, and it is ready.

These are only a couple of examples of the things you can customize on each Joomla template that you work with. The steps to changing other items and features are very similar and once you get the hang of it, you will find yourself making changes without any issues.