« Back to FrontPage

Use same CSS and JavaScript in multiple portlets

If you want to use the same css and javascript files within multiple portlets, there is a very easy way to do so by creating a hook. Create a Hook Project using the Eclipse Liferay IDE.

In this project, set the content of the file <docroot>/WEB-INF/liferay-hook.xml as following (if the file does not exist, create it):

<!?xml version="1.0"?>
<!DOCTYPE hook PUBLIC "-//Liferay//DTD Hook 6.0.0//EN"

Now, create the file <docroot>/WEB-INF/jsp/html/common/themes/top_js-ext.jspf. The content of that file is put in the header section of every liferay page. So an exemplary content could look like this:

<link href="/html/css/jquery.slider.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="/html/css/ajaxloader.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/html/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

The referenced files have to be located in <docroot>/WEB-INF/jsp/html/js or <docroot>/WEB-INF/jsp/html/css respectively. You can use background-images in your css of course. To do so, put your images in the folder <docroot>/WEB-INF/jsp/html/img and use the following css rule:

background-image: url(../img/<your-filename>);

After creating the war-file using the build.xml, upload the file via the normal plugin installation form.

0 Attachments
Average (1 Vote)
The average rating is 5.0 stars out of 5.