Liferay + themes

Flow
1

Hi! I have made a theme in Vaadin and I would like to get it work in Liferay. How can this be made?

2

If I remember correctly you have to copy the theme to the tomcat-x.x.x/webapps/ROOT/html/VAADIN/themes directory under your liferay installation. If the directory does not already exist then just create it.

And then set the theme in portal-ext.properties like so:

vaadin.theme=your theme name
3

Thank you for your answer. I actually got that to work, but the problem is now with the widgetsets. For some reason, I just don’t get them work. Do you know any answer for this? See thread http://vaadin.com/forum/-/message_boards/message/139832.

4

I’m having trouble with custom theme application in liferay portlet. I can apply the runo theme to my application but when I try to inherit runo in my custom theme and apply that to my application, it goes back to plain theme. I’m using liferay 6.0.5. I have followed the directory structure specified in documentation for creating custom theme i.e WebContent/VAADIN/themes/myTheme/styles.css

This is the styles.css file of my custom theme created by eclipse plugin…

@import url(../runo/styles.css);

Am i missing something??

5

Typically you would have a portal-wide theme installed directly on the portal and configured there are the “default” theme that is automatically loaded for every page with Vaadin portlets. This is already set up by default on Liferay 6.

When using such a setup, your theme could even omit the “import” and simply define its own rules. Then, make sure the theme is served in a way Vaadin expects it - usually that would mean copying the theme to the shared themes directory on the portal. Otherwise, also the relative path would also be incorrect, and depending on how servlets for your portlet are configured (partly automatically by Liferay, behind the scenes) as well as how you have configured the shared Vaadin resource paths, Vaadin may not find your theme from the portlet.

Another (Liferay-specific) alternative for extending themes would be to use the portal-wide default Vaadin theme, but write your extensions in the Liferay style - have directories “css”, “img” (if I remember correctly) etc. in the docroot or WebContent directory of your portlet and then say “/css/myportlet.css” in your liferay-portlet.xml . You can and usually should also use “myportlet” and then limit your custom CSS rules to only apply to something inside that class - the latter is always a good idea, regardless of where you place your portlet’s custom CSS.