...
Unfortunately the JSR-168 specification doesn't provide a way for a portlet to contribute to the <head> of a document for things like loading CSS files. That leaves the best option for a developer to load the CSS frameworks that the portlet needs inline in the HTML markup of the page. Below is an example of loading a CSS file in the portlet content.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!-- Store the portlet namespace string in the JSP page variable "n" --> <c:set var="n"><portlet:namespace/></c:set> <link rel="stylesheet" href="/MyPortletWebapp/css/my_portlet.css" type="text/css"/> <div class="MyPortletWebapp" id="${n}container"> <!-- portlet content here --> <div> |
The benefit of a namespaced id in the div containing the portlet content is discussed on the page JavaScript Best Practices.
CSS Scoping
You'll notice in the example above that immediately after the CSS <link> element is a div with a class name specific to the portlet web application. This div is used to scope all style rules created for the portlet.
...
| Code Block | ||
|---|---|---|
| ||
.MyPortletWebapp a {
text-decoration: none;
}
.MyPortletWebapp a:hover {
text-decoration: underline;
}
|
...