Liferay & my own theme

Flow
1

I seem to be unable to get my own theme up and running in my Vaadin-Liferay-portlet.
An entier day of browsing the web & several fora have not solved my issue. I have tried numerous things though.

1/ I have the themefolder & css in my project within this folder: src/main/webapp/VAADIN/themes
2/ I have the same themefolder & css copied into this folder on my local tomcat/liferay installation: …\liferay-portal-6.0.6\tomcat-6.0.29\webapps\ROOT\html\VAADIN\themes
3/ the content of my personal (and VERY impressive :wink: ) css is here:


@import "../reindeer/styles.css";

.v-app {
    background: yellow;
}

4/ within my Application class that is loaded I have the ‘setTheme(“MyTheme”);’ call.
5/ I have modified my web.xml to have the following entries:


<servlet-mapping>
		<servlet-name>MyVaadinServlet</servlet-name>
		<url-pattern>/VAADIN/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>MyVaadinServlet</servlet-name>
		<url-pattern>/MyApp/*</url-pattern>
	</servlet-mapping>

6/ The regular themes are in fact installed in my tomcat/liferay installation.
7/ I am using vaadin 6.7.1 & liferay 6.0.6

And I do not see any changes in my portlet…

any ideas anyone?

As a sidenote, I want to modify the appearance of a non-editable textfield.
What I want to try to do is set the textfield as not enabled (setEnabled(false)) and then through CSS modify the ‘graying-out’ of this field. Any suggestions for this are welcome as well :slight_smile:

Pieter

2

calling setTheme(String) should always have some effect. If you call it on a theme that it can’t find, the application should look completely broken (and I mean completely) and you should get this message into the log/console:

INFO: Requested resource [VAADIN/themes/aporj/styles.css]
 not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.

I used setTheme(“aporj”); which was the result of keyboard bashing and is a theme that I don’t have :slight_smile:

If you’re app looks fine, like the standard reindeer, then the line is not getting through, or then your one theme statement doesn’t have an effect for some reason.

I’d recommend temporarily changing @import “…/reindeer/styles.css”; to @import “…/runo/styles.css”;. then you’d at least see a distinct difference when your own theme kicks in.

3

Do you have some other Vaadin portlet deployed also? You cannot have two different themes overriding base css classes since those css files are loaded basically to the same html page.

4

Thanks for the fast replies!!

@Johannes: No, I have no other portlets deployed at this point, so that can’t be the problem I think.

@Jens: Tried it and I didn’t see any real change… Though I must admit that the look & feel doesn’t really look like Runo nor Reindeer… I do notice there is a ‘liferay’ theme present as well… could that be the reason?

Pieter

5

Another thing in this case is that .v-app is overridden with more specific selector .portlet .v-app

6

This might be a very interesting path to search on…

If I may ask Johannes, where did you find the information about the more specific selector?

P.

7

Actually I just looked with Firebug (or with Chrome’s inspect element cant’ remember which) what’s the applied style for the portlet div.

8

If the default Vaadin style is not applied either, then there’s some other problem.

9

I noticed while testing the project you sent me earlier and then creating one myself similar to your example, that ROOT/html/VAADIN/themes/reindeer/styles.css is an empty file. Do you have the same? I was using Vaadin ControlPanel for Liferay. Are you using it also?

10

Hey Johannes,

my reindeer/styles.css is not empty in my liferay installation.
Not using Control Panel for Liferay, just using the default liferay & tomcat bundle that is available on the liferay website.

Still puzzled…

Gonna try & get Firebug working now and see what gives

11

So I had a look at my portlet in Firefox & checked it with Firebug. I’m a bit worried now…

  2. The layout in Firefox is completely messed up. Basically the ‘absoluteLayout’ created with the WYSIWYG editor that comes with Vaadin is ignored and it just seems to use a VerticalLayout all the way.
  3. The ‘setReadOnly(true)’ seems to work in Firefox, but not in Chrome nor IE
  4. Still no real changes to be seen due to the modifications made in my own Theme. Although I do see the theme name as being the correct one in Firebug

So yeah, I’m a bit worried now :blink:

12

Allrighty…

Seems I needed to copy my theme folder into the “\ROOT\html\VAADIN\themes” folder.

What IS weird is that somehow within Chrome if I change something to the styles.css file of my own theme, the changes aren’t automatically picked up…

Anyways, back to the initial theme modifications search of how to make a non-editable textfield look like a regular editable text-field :slight_smile:

P.

13

Hi,

I find that Chrome is really quite aggressive with it’s caching of stylesheets; I usually find a hard refresh (i.e. Shift + Click on refresh icon) updates the css in the browser.

Cheers,

Charles.

14

THIS is very handy :slight_smile:

Windows users: CTRL+SHIFT+‘reload button’ in Chrome :glare:

thanks!