This wiki does not contain official documentation and is currently deprecated and read only. Please try reading the documentation on the Liferay Developer Network, the new site dedicated to Liferay documentation. DISCOVER Build your web site, collaborate with your colleagues, manage your content, and more. DEVELOP Build applications that run inside Liferay, extend the features provided out of the box with Liferay's APIs. DISTRIBUTE Let the world know about your app by publishing it in Liferay's marketplace. PARTICIPATE Become a part of Liferay's community, meet other Liferay users, and get involved in the open source project. 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"
"http://www.liferay.com/dtd/liferay-hook_6_0_0.dtd">
<hook>
<custom-jsp-dir>/WEB-INF/jsp</custom-jsp-dir>
</hook>
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.