new-template-installedIf you've been following along in our tutorials series on creating Joomla 3.0 templates, you would have seen in our last tutorial after changing site templates that the template does not look very nice at all (see screenshot to the right).

The reason the template looks a mess is because the CSS file that we created is not being called correctly, and is actually resulting in a 404 error.

In this tutorial we will show you how to properly include CSS and JS files within a Joomla 3.0 template.

 

Before we Begin: Background information

In our template, we have two files that we want to include:

  1. css/style.css
  2. js/main.js

We will be updating our template's index.php file to include these files. As the template is already installed on the server and we are technically not adding any files to it (because the style.css and main.js files are already on the server), we will update the template file directly on the server. This will save us time as we don't need to edit the files on our desktop and then reinstall the template to see the changes.

 

Adding CSS and JS Files to a Joomla 3.0 Template

  1. Open for edit your index.php file

    As our template's index.php file is already on our Joomla Hosting account, we are going to use the file manager within our cPanel to edit the file.
  2. Use $doc->addStyleSheet and $doc->addScript to include files

    At the top of your template, use $doc->addStyleSheet to include your css/style.css file and $doc->addScript to add your js/main.js files. For these functions to work, we must also add $doc = JFactory::getDocument(). So far, we've updated the top portion of our index.php file, and the code in green below shows those changes.

    <?php
    
    $doc = JFactory::getDocument();
    
    $doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
    $doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');
    
    ?>
    <!DOCTYPE html>
    <html>
    
    <head>
  3. Remove the previous calls to include these files

    Within our head tag, we previously included css/style.css and js/main.js. We are now going to remove these two lines of code, which you can see below crossed through.

    <!DOCTYPE html>
    <html>
    
    <head>
    
        <link rel="stylesheet" href="/support/css/style.css" type="text/css" />
        <script src="/support/js/main.js" type="text/javascript"></script>
    
    </head>
    
    <body>
    
  4. Add <jdoc:include type="head" /> within your head tag

    The next thing you'll need to do is use <jdoc:include type="head" /> to programmatically print code within your header. Basically what this will do is add the necessary HTML within your head tag to include the CSS and Javascript files.

    The example code below shows what the top of our index.php file looks like after performing all the steps in this article:
    <?php
    
    $doc = JFactory::getDocument();
    
    $doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
    $doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');
    
    ?>
    <!DOCTYPE html>
    <html>
    
    <head>
    
        <jdoc:include type="head" />
    
    </head>
    
    <body>

    Once we make these changes and save our index.php file, we'll go back to our Joomla site and refersh the page. As you can see, our template is looking a bit better than when compared to the screenshot at the top of this article.
    template-after-incorporating-css

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2228
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5650

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
Stack Exchange Q&A site proposal: Joomla

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!