Liferay Theme

What’s Liferay?

It’s a free and open source enterprise portal written in java. It is distributed under GNU Lesser General Public License. Liferay includes a built-in web content management system allowing users to build websites and portals as an assembly of themes, pages, portlets /gadgets and a common navigation. Liferay’s support for plugins extends into multiple programming languages, including support for PHP and Ruby portlets. Liferay Portal is Java-based and runs on any platform capable of running the JRE and application server. Liferay is available bundled with a servlet container such as Tomcat.

Important terms in liferay:

Liferay Portal:

• Liferay Portal is a JSR-168/JSR-286 compliant portal. It is a web application.
• It is a container that holds portlets.
• The portal source builds this portlet container using the Ant build tool and the JDK.

Liferay Portlet:

• Portlets are how all functionality is implemented in Liferay Portal, as well as in any other Java portal.

Liferay Layout:

Layout Templates are ways of choosing how your portlets will be arranged on a page. They make up the body of your page, the large area where you drag and drop your portlets to create your pages. Liferay Portal comes with several built-in layout templates, but if you have a complex page layout (especially for your home page), you may wish to create a custom layout template of your own.

• Liferay Architecture:

 

• Liferay supports Windows, Mac and Linux OS.  JRE is installed on the supported OS to host the JVM.  An application server is required to contain the Liferay instance.  The officially supported servers include, but not limited to Apache Tomcat, Glassfish, Geronimo, Jetty, JOnAS, JBoss, and Resin.  Most of these servers are available as bundled versions for download and are deployed in the JVM container.  The server provides connectivity and interoperability using an Enterprise Service Bus (ESB), and there are multiple services offered by the servers which are leveraged by Liferay.  Some of the services, which are primarily used by Liferay on the Application server, include the following: JNDI, JDBC, JTS, JMS, JAAS, JDO, JWS, JSP/Servlets, and JavaMail.

• Applications can be deployed on the server like SOLR Search engine, or DROOLS Rule Engine, or Tunneling Servlets which can further provide extension or integration of external applications with Liferay.  Liferay uses a number of technologies at its core to offer the various services.  These technologies include EJB, Hibernate, Spring and JBPM.  Liferay implements Lucene Search Engine by default and can be configured to extend the SOLR Search Engine which is built on Lucene to extend capabilities to provide clustering, faceted search, filtering with additional enhancements and scalability.   A Portlet Bridge is provided to deploy JSR 168/286 portlets and supports RIA applications.  Liferay contains Language adaptors such as for Python, Ruby and PHP which allows easy integration.

• What’s Liferay Theme?

Themes are hot deployable plugins which can completely transform the look and feel of the portal. Themes make it possible to change the user interface so completely that it would be difficult or impossible to tell that the site is running on Liferay. Liferay provides a well-organized, modular structure to its themes.

A theme can inherit the styling, images, and templates from any of the built in themes, overriding them only where necessary. This allows themes to be smaller and less cluttered with extraneous data that already exists in the default theme (such as graphics for emoticons for the message board’s portlet).

Do you want to transform the look and feel of your Liferay Portal? Create your own Liferay Theme! Themes are hot deployable plugins unique to a site served by the portal. With themes, you can alter the user interface so completely that it’s difficult or impossible to tell that the site is running on Liferay.

Liferay provides a well-organized, modular structure to its themes. Themes follow the same philosophy as Liferay configuration: they are modifications, or differences from the default. Because of this, every line of markup and every style has a default value that your theme can fall back on if you have chosen not to customize it. In other words, your theme inherits the styling, images, and templates from any of the built-in themes. This saves you time and keeps your themes smaller and less cluttered, because your theme contains only its own resources, using defaults for the rest, like emoticon graphics for the message board’s portlet.

Liferay themes are easy to create. You can start by making changes only in the CSS files. When you need to customize themes more extensively, you can change the HTML.

If you hope to become a theme customization guru, there are several technologies you should know:

• CSS: Create a new theme simply by modifying a CSS file.
• Velocity: Customize the markup generated by the theme.
• JavaScript: Add special behaviors to your theme.
• XML: Some theme settings are specified in XML

How to create a simple, sample liferay theme?!

Our theme will be named Deep Blue, so the project name (without spaces) is deep-blue, and the display name (which can have spaces) is Deep Blue. Let’s create the theme using Eclipse IDE.

• Go to File → New → Liferay Project.
• Fill in deep-blue for the Project name and Deep Blue for the Display name

Setting a base Theme

All themes in Liferay are built on top of two base themes, named _unstyled and _styled. Your newly created theme is based on these by default, but they contain very limited styling. You can take advantage of an existing theme’s styling by setting the theme of your choice as the base for your theme.

• _unstyled – giving you the core of the theme
• _styled – providing the most basic elements

To specify a base theme, edit the build.xml file for your theme and change _styled in <property name=“theme.parent” value=“_styled”> to the name of any existing theme that’s installed.

Deploying the Theme

Deploying in Eclipse: Click and drag your theme project onto your server.

Let’s apply your theme to a page:

Go to your web browser and log in to the portal. Hover over Manage at the top of the page and click on Page. Directly underneath the words Manage Pages, select the Look and Feel tab. Click on your theme to activate it.

Now that you’ve studied, built and deployed a simple liferay theme! 😀