Hello All,

Within the past several months, Liferay has been actively working on improving the way community themes are designed and developed. Now for all you developers out there (and I know you are many), the theming process and environment has not changed much, yet. However, the very approach to theme design has changed drastically and therefore changes will need to be made on the development side to accomodate the new designs. (Not the other way around).

Before reading any further, I would highly recommend that you read my very detailed blog post on what has been changing in the way of themes recently. This post can be found here: Liferay Themes - What's New?

In summary, Liferay Community themes have not been meeting their full potential and have been generally overlooked for quite some time. I have been working for almost a year now to re-structure and re-engineer the way theme creation is approached. Previously, Liferay themes were not a real asset or benefit to the community. They didnt help the end user and they didnt make Liferay an easier to use. We are now actively pushing to change that.

Now, themes are being strategically designed for more specific audiences and industrys and include basic dummy content, layouts, structures, images, etc that will be likely to benefit the user and make creating a website easier. User can simply choose a theme style, replace the existing content and be done. Our feeling is that themes should not be an afterthought, because in fact, they are often the primary filter by which users decide whether to explore Liferay further. Themes should not only be a bunch of CSS files and images, but they should also be dynamic, content-driven, thoughtfully designed, multi-page website templates that already benefit the user, right out of the box.

So why is this in the forum section? Well, we need your help. We need your thoughts and ideas on what you would like to see in a Liferay theme and how you'd like to see them function. What would benefit you? How can themes make your experience using Liferay a better one?

We cant promise that all ideas will be implemented, but this is a place to share your thoughts and ideas to give the Liferay theme designers and developers an idea of how to serve you better. We are eager to hear your thoughts and feedback, thank you.

Maybe this is skewed by my history of working w/ Liferay themes, but for the most part my challenge has always been trying to use an existing site as the template for Liferay...

Many times an organization will have a bunch of monolithic web apps (either internal or external) but they want to introduce the functionality of a portal (dynamic placement, etc.) or the functionality of portlets (smaller targeted apps that are easier to maintain and (hopefully) less co-dependent).

But in order to get an organization to consider Liferay, I know I have to have it resemble some of what they currently have in regards to CSS styling, placement of the login portlet, the footer w/ links to their 'contact me' and other pages, changing from tabs to a horizontal menu, etc...

Sometimes it's a matter of making LR look similar to an existing SharePoint installation, sometimes it's a custom site that leverages other JS libraries...

I'm not certain what you could really do to make this job easier... For CSS as an example, I've got to map current CSS into the expected Liferay classes, and it's not always a one to one scenario and it is often a lot of trial and error to get right.

Most of the time I end up starting with the Classic styled theme and then do a lot of work customizing the CSS, merging in necessary imagery, pulling in appropriate JS resources, etc. If I'm lucky, I can leverage some of the work I've done previously or the work others have done on the shared/open templates...

I understand your concept about getting the theming to be as simple (?) as wordpress, for example, but as you've already indicated Liferay is much more complex than wordpress, and it is more about building a website as opposed to just a blogging system.

It's really impressive to see SesameStreet.com and know that it is actually a Liferay site. The difference between SesameStreet.com and a fresh install of Liferay and the Classic layout is night and day. How do you envison a templating system that allows for someone to drop in a SesameStreet.com template and customize for a particular business (other than another SS clone)?

Absolutely excellent feedback! You bring up a great point here David. I think the answer to your concerns is actually pretty simple. What I have been pushing for is not to make custom theme development a streamlined process, but rather to change the way Liferay builds community themes from a design standpoint. You are referring to building a theme for a client (that has specific content already in place) from scratch, which is a slightly different scenario than what I have been addressing here.

Currently, I think you would agree, that Liferay themes are some very basic CSS and images packed into what is essentially a zip file. My goal is to offer the community more than just that. My goal is to offer the community themes that already have a solid layout, targeted design aesthetic, and basic dummy content to show off how good this theme could look if you swapped out its current content with your own. Thats what I am working on pushing forward right now.

SesameStreet.com is an enterprise level theme for a large client. Its hard to compare that to a community theme. Sesame Street knew exactly what they wanted. Everything was designed and coded for a very specific set of content. With community themes, we dont have that kind of content to design for. These themes need to be designed somewhat generically, even using our new strategy. (Imagine how hard it was to design a theme BEFORE we started placing our own dummy content in the design. There was no purpose and no direction at all. We were arbitrarily designing website shells). With the new strategy in place, at least the community themes will have a style, variety, and functionality that will hopefully give the user more than what they are getting out of a theme right now.

For custom themes for specific clients, I would have to recommend that you begin with the un-styled theme as it tends to prevent a lot of time spent debugging problems, but if using the classic theme works for you, thats great too. I hope this helps a little, and I apologize for not being able to address your concerns more throughly. Thank you very much for posting feedback. Your willingness to discuss the issue is much appreciated!

Hi,

2 things I would like to find in a theme :

- Having a Global menu, that merge communities pages, organisations pages and personal pages, in order to simplify the user navigation inside the portal.
- Managing a layout for the theme (header, footer, border columns), with drag &drop abilities from portlets board.

Christophe

Thank you Christophe for taking the time to respond! Would you mind sharing more specific thoughts on managing a layout? Liferay offers a decent selection of layouts for you already. Are you referring to creating your own layout?

I developed a custom theme in Liferay 5 and found it technically easy and visually appealing. But my thought was that instead of having the SDK development method have an on the fly method that had predictable results. Because I think the SDK development method can be captured in a workflow type method for each element. Of course you can have the advanced themes for those needing complete control.

I always install all the themes I can to see how my data will be presented in each. In some themes the elements where hard coded into the theme and difficult to track down and fix.

Good to see somebody is seriously looking at higher level theme development methods.

Here are few things that will be nice to have.
1. layout
- toggle that will turn on visibility of the full layout
- also making the the full layout visible when dragging a portlet on a page
if you are dealing with a complex layout with multiple columns, you easily get lost when trying to drag a portlet on a page.

2. being able to make some basic changes to a deployed theme.
- banners
- footers
- colors/backgrounds of body, wrapper ,etc.

3. enhance eclipse ide to provide a more advanced theme developer similar to the template authoring tool(with some visual guidance). I had a chance to talk to Gregory Amerson(during one of the roadshows) and he had mentioned he was looking into this, not sure how far he got.

4. last, but probably the most important of all improvements is to have a set of templates configured with well thought out combination of layout,theme and content. content writers will only have to deal with editing/changing available articles.

Thanks again for taking this up Mat. I am very excited about this.

This is great to hear because it is exactly what I am pushing for right now more than anything else. There are a large number of ways in which Liferay themes can and should be improved, but for now I'm working precisely on this point.

We need a TV/media style theme for our project http://visionon.tv we even have a tiny amount of money to through at it (we are a small not for profit) if any one wonts to have a go.

To Help you to see where your drop areas are for the layout.
you could add the css below to your theme

Would it be helpful if in the new themes there was a custom-developer.css file that would have common elements already targeted in a file such as:

cool.. thx for tip

Hey,
In which css file do we have to include the css code mentioned for the visibility of layout while drag-drop of the portlet ?

.aui-dd-drop-active-valid {
background: rgba(0,0,0,0.5);
border: 5px solid #FFF;
}