Alternative Languages: 日本語
Deploying a Theme#
There are two methods to deploying a theme in Liferay. First you can download a prepackaged theme from the Software Catalogue or you can hot deploy a theme from a WAR.
Using the Software Catalogue#
You can also access the Software Catalogue in the Control Panel under "Plugins Installation". From there you can search or browse for a new theme.
Hot Deploying a WAR#
To deploy a packed theme WAR you'll need access to the directory that Liferay listens to for auto deployment (by default this directory is the user folder). Simply copying the theme WAR file in this directory will deploy your theme.
Developing a Theme #
- Plugins SDK for your Liferay version.
- The plugins SDK is needed because it generates a framework. You don't need to use any fancy editors or install anything crazy though -- an SDK is simply a bunch of files and scripts that make your life easier. You can download the SDK from the Liferay main page, unzip it, set up the file called build.username.properties, and you're good to go. You simply need it to do the first step -- everything after that is what you already know: CSS in your editor of choice. Don't get scared because it's called an SDK!
- Good understanding of CSS (you cannot edit the HTML -- only CSS can be modified to style Liferay)
Recommended Tools #
- Firefox with Firebug
- Google Chrome (has the inspect tool, to allow you to look at various elements on a page)
Writing your Theme #
- Navigate using command prompt or terminal to the $PLUGINS_SDK/themes folder. Run:
create newtheme "My New Theme"or, on Linux/Mac:
./create.sh newtheme "My New Theme"
- Navigate to the newly created $PLUGINS_SDK/themes/newtheme/_diffs and add some customizations to the default theme. The way to do this is to create a directory called 'css' in _diffs, then add/edit the file css/custom.css. Liferay doesn't allow you to directly modify the "base" CSS -- you can however hide elements at will using CSS (display:none;) and move them around to your liking. This follows the principle for separation of content and style.
- Issue 'ant all' in the $PLUGINS_SDK/themes/newtheme folder to build and deploy.
- Log in into Liferay and check out your new creation.
Your modifications to the theme should go into the css/custom.css file in the _diffs folder. All the changes you make in other css files will be overwritten when you deploy the theme again.
Side tip for non-noobs (power users): If you want your theme to be developed from an existing theme other than the classic plain theme, you can modify the file build.xml (inside the folder of the theme) and change the parent.theme attribute to the id of the theme you want it to be copied from (for example, classic) and then deploy again. Generally you just want to use the basic plain Liferay setup however, because it's pretty empty and you style everything yourself.
The theme's folder is set up like this:
Additional Notes #
- Liferay's theming process is pretty unique: a pre-made theme, the "_unstyled" theme (default) is applied first when you create a new theme (when you do create newtheme "My New Theme"). In fact, try creating a theme but not adding any _diffs files -- you'll see that the site is still styled! That's because it's the "_unstyled" theme, which does give your site minimal structure. It looks very plain though. That's because it's ready for you to make your modifications.
- On top of the classic theme's code, you add your own styles, images, dock customizations and et cetera by creating the above directory structure in your theme _diffs folder. If you don't want to overwrite a file (you like the classic/default way it looks), you don't have to. If you want to rewrite everything, you can do that too. Liferay is super flexible. Say you want to change something in the dock. Open up dock.vm from the classic theme, and make your modifications. Save it to your _diffs (take care that you put it in the right directory, e.g custom.css goes in yourtheme/_diffs/css/custom.css) and you should have a functional theme.
A lot of questions are asked about the Dockbar. Starting in Liferay 6.0.x, the dock was moved to being a portlet instead of something directly in themes. What that means is that dock.vm no longer exists: instead, to edit dockbar requires that you create a hook or ext plugin that overrides the dockbar's JSP or whatever else you're seeking to change. It sounds involved, but it really isn't hard -- once you've created the new hook, you simply overwrite whatever you want on the JSP or other files.
Styling the dockbar is easy still too, since the CSS is all in dockbar.css.
Creating the links on the dockbar while removing the dockbar itself is a common request also. For more information on linking dockbar items, see Link to Dockbar