12

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 -

  1. 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?

  2. 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

Pushkar
  • 7,450
  • 10
  • 38
  • 57
  • 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 Nov 04 '11 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 Nov 04 '11 at 16:43
  • Check out Dean Marshall's explanation below - it's a spot on explanation of how. – Hanny Nov 04 '11 at 21:53

5 Answers5

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.

Dean Marshall
  • 1,825
  • 1
  • 11
  • 10
  • 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"** – elk Sep 16 '13 at 11:39
  • $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. – amilaishere Dec 15 '15 at 10:01
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

Alexander Busygin
  • 374
  • 3
  • 9
  • 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");`). – nietonfir Jul 08 '19 at 13:08
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()

hop
  • 2,518
  • 11
  • 40
  • 56
Christophor S. Wilson
  • 81
  • 1
  • 2
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');
Raj Kumar Das
  • 116
  • 1
  • 3
-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">

Wide Vision
  • 17
  • 3