Styling Custom Portlets

Adding CSS to your OSGi portlet

This post is a simple example about how to add CSS files to your portlets in Liferay 7.x ( for OSGi based portlets ).

Let's start with a simple portlet:


@Component( immediate = true,
         property = {
               "com.liferay.portlet.display-category=category.hidden",
               "com.liferay.portlet.instanceable=false",
               "javax.portlet.portlet-mode=text/html;view",
               "javax.portlet.init-param.template-path=/",
               "javax.portlet.init-param.view-template=/conversions.jsp",
               "javax.portlet.init-param.mvc-command-names-default-views="+RENDER_LIST_ARCHIVES,
               "javax.portlet.name=" + PORTLET_CONVERTER_VIEWER,
               "javax.portlet.resource-bundle=content.Language",
               "javax.portlet.supports.mime-type=text/html",
               "com.liferay.portlet.preferences-company-wide=false",
               "com.liferay.portlet.header-portlet-css=/css/main.css"
         },
         service = {
               Portlet.class,
               TaskViewer.class
         } )
public class ConverterViewerPortlet extends MVCPortlet {}

As we can see this is a very small and simple portlet, we are just declaring the OSGi component that will provide the portlet service while extending Liferay's MVCPortlet.

Simple enough!

Although there are interesting things to discuss around this example, let's focus on the following line:


"com.liferay.portlet.header-portlet-css=/css/main.css"

This is the line responsible for adding the main.css file into the page when loading your portlet. The file is only a regular resource put on the following path:

/src/main/resources/META-INF/resources/css

In this location we can add our CSS files and have as many CSS declaration properties (com.liferay.portlet.header-portlet-css) as needed.

Not only can we have many CSS files, we can also add SCSS to generate the code refereed  by com.liferay.portlet.header-portlet-css.

It is also worth noticing that we can find extra properties that allow us to place the CSS link entries where they are most convinient inside the rendered HTML.

  •             "com.liferay.portlet.footer-portal-css"
  •             "com.liferay.portlet.footer-portlet-css"
  •             "com.liferay.portlet.header-portal-css"
  •             "com.liferay.portlet.header-portlet-css"

Pick the ones you need and you will be ready to go. For reference, you can always check the DTD: http://www.liferay.com/dtd/liferay-portlet-app_7_1_0.dtd


<!--
Set the path of CSS that will be referenced in the page's header relative to the
portal's context path.
-->
<!ELEMENT header-portal-css (#PCDATA)>

<!--
Set the path of CSS that will be referenced in the page's header relative to the
portlet's context path.
-->
<!ELEMENT header-portlet-css (#PCDATA)>

<!--
Set the path of CSS that will be referenced in the page's footer relative to the
portal's context path.
-->
<!ELEMENT footer-portal-css (#PCDATA)>

<!--
Set the path of CSS that will be referenced in the page's footer relative to the
portlet's context path.
-->
<!ELEMENT footer-portlet-css (#PCDATA)>

<!--
Set name of the CSS class that will be injected in the DIV that wraps this
portlet.
-->
<!ELEMENT css-class-wrapper (#PCDATA)>


It is worth noticing that another approach is around the web, which consists of creating a web context in the bnd file to enable the following code:


<link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css"/>

Not only this code has a pretty ugly scriptlet in it, it also leads to inefficient placements and processing.  header-portlet-css for instance will put your CSS inside the head tag while this code will lead to inline placements. But it is a functional approach for CSS and other types of resources, valid.. but why? if there is a pretty easy and specific method to do this.

More Blog Entries

0 Comments