Liferay is a Gartner Magic Quadrant Leader for the Sixth Year! Find out why
« Back to Themes

Non-Developer Theme Customization

Document state: 2012.03.03 early draft; if this already exists somewhere let me know. Ditto if a dumb idea. If useful, you want more - post a comment. I'm just learning myself so be kind :)

Purpose / Context #

Although admittedly not having read all those "how to make a theme" documents, I have an inclination that theme development is difficult. Especially for the mere, non-web developer, mortal. Given the lack of quality themes (web-developers dig), this is probably a fair assumption. This article is here to help! Using the techniques in this document, you'll be able to start with your favourite theme and tweak it into something unique and styled to your tastes, without leaving the confines of the Liferay user environment. Sure there are admittedly limits, but it's something. I am hoping that once started out, other (more expert) people, can share what they have been able to accomplish through style overrides.

What you need / need to know? #

  • Liferay "credentials"; the ability to "Manage Site Pages" or at the portlet level - the ability to configure "Look and Feel".
  • Firefox with the Firebug plug-in (google it)
  • Some rudementry knowledge of HTML and CSS wouldn't hurt
  • May need a graphic editor along the way
  • You don't need to know Java, Velocity, or any of that other stuff

How we going to do this? #

  • Site and/or portlet "theme" (looks) changes will be achieved by overriding the styles applied to the elements (paragraphs, headings, even graphic imagry in some cases, The designers of Liferay were kind enough to put place-holders in the system to easily specify customizations.

Sample #1 Site Level - "Classic Theme"#

Doing this in LR 6.1 but probably not that different.

Let's start with a before and after picture...

  • see the L1 attachments

Not saying that's a beautiful tweak but you get the idea. What we did here was;

  • add a background image to the page-header (all pages in the site);
  • tighten up some of the white space,
  • re-style the breadcrumbs
  • put in a custom logo

Steps to achieve this;

  1. You need to make/find a background image (the background colour in the heading) and save it to the Site Content -> Documents and Media.
  2. You need an alternate image for the chevron between the breadcrumb items. Use google image search breadcrump to find one you like (small one). Save it in you content (docments).
  3. You need a logo; you don't need to upload this - just have it available on your computer.
  4. Load your logo; this is out-of-the-box functionality; just follow this menu path: Manage -> Site Pages -> Logo ; save that and take a look
  5. Go to Manage -> Site Pages and scroll down to the bottom to the CSS entry block; paste this CSS "code" in there;
   html.ltr {
      background: url("/documents/19/b4fd2b1d-3f17-47f0-bbb1-78300589996a
") repeat-x scroll 0 0 #F8F8F8;
html.ltr div#wrapper header#banner {
   margin-top: 4px;
.site-title {
    margin-bottom: 2px;
    margin-top: 0px;
.site-breadcrumbs ul {
    background-color: transparent;
    border: 0px solid #C0C2C5;
    margin: 0;
.site-breadcrumbs li span {
    background: url("/documents/19/ec95c82a-1151-4cb1-9f66-48c9763d89b7
") no-repeat scroll 100% 50% transparent;
    display: block;
    padding: 0.5em 15px 0.5em 0;
.site-breadcrumbs li span a {
    font-size: 80%;
    text-decoration: none;
    color: inherit;
.site-breadcrumbs li.first a {
    color: inherit;
    font-weight: normal;
.site-breadcrumbs li.last a {
    color: inherit;
    font-size: 80%;
  1. ....
  2. ...

(That code block not being rendered right -- sigh -- I'll end this here now but I'll be back to finish it up later.)

2 Attachments
Average (0 Votes)
The average rating is 0.0 stars out of 5.