How to add JS/CSS files to Joomla modules?

Question

I am starting out with Joomla and am writing a simple Joomla module. I am using some custom CSS and JS in my module. Now when I distribute this module I need my JS/CSS files to go with the ZIP. I have added my files in my module ZIP file.

This is what i need to know -

How do I refer to these CSS/JS files in my module so that even if I distribute the module as a zip i would not have to send the css/js files separately?
I tried looking at different solutions including http://www.howtojoomla.net/how-tos/development/how-to-add-cssjavascript-to-your-joomla-extension But I was not able to figure out what the URL for the JS/CSS file should be?

I am using Joomla 1.7 hosted on a cloud hosting site.

Thanks

Can you explain a little more what you're trying to accomplish? Are you trying to include the css/js in the installation file of your module (controlled by the xml installer file); or are you trying to incorporate the use of css/js into your module that's already installed? — Hanny
– Hanny, Commented Nov 4, 2011 at 14:18
@Hanny - I have created a simple hello world module. Now i am incorporating some css/php in the default.php file. My question is how do i go about doing that. — Pushkar
– Pushkar, Commented Nov 4, 2011 at 16:43
Check out Dean Marshall's explanation below - it's a spot on explanation of how. — Hanny
– Hanny, Commented Nov 4, 2011 at 21:53

Dean Marshall · Accepted Answer · 2011-11-04 20:41:58Z

16

I'd say that the HowToJoomla Site's article pretty much sums up the process.

Here is the process with a few more steps added - hopefully this will help.

I am assuming you have got as far as packaging your extension and have been able to get your css and javascript files to install on the server. They may be in your module folder, or probably more correctly they should be within your modules sub-folder under the /media/ folder.

If after installing the module you can not locate your css and js files it is because you haven't referenced them correctly within your component's xml installation file. This page contains info about the xml installation / manifest file for 1.6/1.7 add-ons although it is for a component: http://docs.joomla.org/Developing_a_Model-View-Controller_%28MVC%29_Component_for_Joomla!1.6_-_Part_01 they are very similar.

Either way - find your files within Joomla's folder structure and make a note of their relative path from the root of the website - ie the folder containing configuration.php

Now somewhere within your module's php - add the line that gets a reference to the JDocument object.

$document = JFactory::getDocument();

Now add the line that adds your javascript to the html head area:

$document->addScript('url/to/my/script.js');

obviously replace 'url/to/my/script.js' with the actual relative path to your javascript.

Now add the line that adds your css to the html head:

$document->addStyleSheet('url/to/my/stylesheet.css');

again adjust the path - it may for example be media/mod_mymodule/mymodule.css (if your module were called 'mymodule').

Only things to be aware of are that you need to add these lineswithin executable php tags NOT within a html area after exiting php mode.

answered Nov 4, 2011 at 20:41

Dean Marshall

1,8251 gold badge11 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

elk Over a year ago

thanks! Note that you can use DS instead of the "/" to be independent. Thus, the path would be "url".DS."to".DS."my".DS."stylesheet.css"

amilaishere Over a year ago

$document->addScript('url/to/my/script.js'); add script to the very top of header. If your js need jquery library this might be a problem. Because your js file loads before jquery library loads. In that case I prefer to use other script adding option suggested in Joomla web site.

Alexander Busygin · Accepted Answer · 2012-11-25 23:02:36Z

12

You could add your js/css files to /media folder.

http://docs.joomla.org/Manifest_files#Media_files

Just add to your manifest file:

        <files>
           ...
        </files>
        <media folder="media" destination="mod_your_module">
            <folder>css</folder>
            <folder>js</folder>
        </media>

Inside your installable package, you should now have the /media folder.

Then add to view file:

        $doc =& JFactory::getDocument();
        $doc->addScript("/media/mod_your_module/js/script.js");

This article explains the benefits of this approach:
http://blog.joomlatools.com/2008/09/hidden-feature-joomlas-media-folder.html

edited Nov 25, 2012 at 23:02

answered Nov 25, 2012 at 22:52

Alexander Busygin

3943 silver badges10 bronze badges

1 Comment

nietonfir Over a year ago

It is advisable to prepend the path in the addScript statement with JURI::base(true) to ensure that the script URL is correct and works in directory setups as well (e.g.: $doc->addScript(JURI::base(true) . "/media/mod_your_module/js/script.js");).

hop · Accepted Answer · 2012-02-11 11:23:21Z

8

You could use:

JHTML::script('modules/mod_your_module/js/script.js');
JHTML::stylesheet('modules/mod_your_module/css/stylesheet.css');

This example does not require JFactory::getDocument()

edited Feb 11, 2012 at 11:23

hop

2,55811 gold badges40 silver badges56 bronze badges

answered Feb 10, 2012 at 21:49

Christophor S. Wilson

811 silver badge2 bronze badges

Comments

Raj Kumar Das · Accepted Answer · 2013-11-22 19:42:25Z

6

$document = JFactory::getDocument();
$modulePath = JURI::base() . 'modules/mod_your_module_name/';

//Adding JS Files
$document->addScript($modulePath.'js/myscript.js');

//Adding CSS Files
$document->addStyleSheet($modulePath.'css/style.css');

answered Nov 22, 2013 at 19:42

Raj Kumar Das

1161 silver badge3 bronze badges

Comments

Wide Vision · Accepted Answer · 2014-06-19 14:09:07Z

-2

<script type="text/javascript" src="<?php echo JURI::BASE()?>modules/your_module_name/js/your_js_file"></script>

for Css:

<link href="<?php echo JURI::BASE()?>modules/your_module_name/css/your_css _file" type="text/css" media="all" rel="stylesheet">

answered Jun 19, 2014 at 14:09

Wide Vision

153 bronze badges

Collectives™ on Stack Overflow

How to add JS/CSS files to Joomla modules?

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related