Liferay Advance styling

Out of the box (into the fire?)

The LifeRay portal server has a number build-in portlets that allows you to set up a nice portal right out of the box (or is that out-of-the-download?). That's great, you get all this functionality just by dragging a Wiki portlet onto a page, great, love it.

That's until you actually start using it...

Note: In this installation LifeRay 6.0 is used, 6.1 might be different.

Styling, what styling?

LifeRay uses the CKEditor for entering text. It's not the worst choice, many more CMS packages use this editor. What is less fun is that the styling options that the CKEditor offers do not appear to be defined within the LifeRay wiki. Well they are, of course, in some java file somewhere in the system.

A LifeRay theme was developed for the site, but no-one worried about the Wiki styling (or any other portlet styling for that matter). I smelled my opportunity.

Jump, jump right in (advanced styling)

So what can I do, without starting up Eclipse and doing some development work? Well actually, quite a lot, it appears. Every LifeRay portlet has a 'look and feel' section called 'Advanced styling'.

The idea behind this is that you can put your CSS code to style elements like <h1>, <p>, <a> and all the others. Just paste the CSS code in the text area, save it and your portlet content get's styled. How great is that?

Well there are a number of snakes in the grass. Just paste the following CSS code and see what happens:

NOTE: You should not do this on a production page, things may get ugly.

a{color:#ff0000;}

This CSS rule basically says: "color every link red". 


Sometimes a picture says more than a thousand activists on soap boxes...

Yeah, EVERY link on the entire page (including the links on the 'look and feel' panel) are affected. That's definitely NOT what we want. We want it to only affect the styling of the Wiki portlet.

Read, read you dumb person!

So let's see, one of the links on the panel reads, 'Add a CSS rule for just this portlet'. Maybe I should have read this. Click on it a see what happens:

NOTE: Your portlet may have a different name!

So the magic trick is to put #portlet_36 as a CSS selector. Lets try that:

#portlet_36 a{
color:#ff0000;
}

Okay that's better, the red links are only within the Wiki Portlet. But we're still not quite there. Because not only are the links in the content of the Wiki red, but ann the links in the Wiki portlet, including navigation links...

That's silly, maybe we want to style these at some point, but right now I want the links in the content. Obviously we need more CSS selectors. But which one.

I have spend the better part of an evening looking for documentation on the web, but if anybody has a clue, let me me know where to find this. Fortunately we have the developer tools in Google Chrome...

Reverse engineering...

The developer tools in the Google Chrome browser (or the equivalent in any other browser) allow you to inspect the structure of a web page. LifeRay pages are very complex with many nested divs. The quickest way to find what I'm looking for is to right click on a link on the Wiki body and to select the 'Inspect Element' option from the menu:

Now it appears that the whole content of a Wiki sits in a DIV that has the class "wiki-body". Would it work if I added that to the CSS selector?

#portlet_36 .wiki-body a{
  color:#ff0000;
}

YESSSSSSS!!!! BINGO!!!!!!

Now only the links that are in the content of the Wiki are colored RED. That's what I wanted. Now I am able to do some styling for the LifeRay Wiki.

This allows me to create a Wiki content look (or style) in-house, discuss it with the users, make adjustments and al without making any request to an (external) developer. That is a big thing for my project.

NOTE: Since the styling is NOT visible in the editor, the practical application of this method is limited. At some point the CSS should be put in the a LifeRay css file. But for the process of working with the end users to create a styling it is very helpful.

That's it for this blog. I will create blogs as I go on my quest through LifeRay. There's lots to be done here.