Joomla Template Add Custom css Code

This tutorial will guide you through including custom CSS code in the Joomla template you have downloaded at the website.

Why would you add custom CSS code to the template

1. You have downloaded a 3rd party module or extension and installed it at your website. The 3rd party module or extension may need some custom styles written for it so it fits in with the overall style of the template and renders correctly across the various browsers.
2. It is easier to manage and update one CSS file with any custom changes you have made or may need to make in the future.
3. When you come to upgrade the template for Joomla you will not loose any of the customization work you have made

How do I create a custom CSS file

1. Open notepad.exe installed on your computer and create a new file name called custom.css
2. Save the CSS file to a location on your computer
3. Open the custom.css file using notepad.exe and include the CSS code you have written for the 3rd party extension or module
4. Save the changes to the file

How do I apply the changes to the template

Note: change the /template-name/ directory referenced in this article to the name of the template you have downloaded at the website.

1. Open the FTP software installed on your computer and browse to the /templates/template-name/css/ directory
2. Upload the custom.css file you have created to the /templates/template-name/css/ directory
3. Browse to the root of the /templates/template-name/ directory and download the index.php file to your computer
4. Before you make any changes to the index.php file make a backup of the file first
5. After you have made a backup of the file open the index.php file using notepad.exe
6. Now search this code </head>
7. Copy and paste the code in point 8 into the index.php file so it appears just before </head> tag
8. <link rel="stylesheet" type="text/css" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/custom.css" />
9. The code noted above will basically call the custom.css file every time the template loads at your site and apply the customized style changes to the 3rd party extension or module.
10. Once you have updated the index.php file save the changes
11. Upload the updated index.php file using the FTP software installed on your computer to the root of the /templates/template-name/ directory

You have now completed all the required steps to create and apply custom CSS styles to the template.