my custom theme can't be used

Hello,

i am really new in vaadin.
I want to user a custom theme for my vaadin portlet instead using reindeer theme.
After downloading Vaadin Plug in for Eclipse, i used online tutorials to create a vaadin theme.

A good tutorial is this one:
https://vaadin.com/de/book/-/page/themes.eclipse.html

After deploying the vaadin project into my liferay server, I tried to display my vaadin portlet on liferay portal.

And as the result: the vaadin portlet is still using reindeer theme instead of my custom theme even tho i already add

setTheme("customtheme); on my Application.

And then i tried to open the styles.css from this http://localhost:8080/html/VAADIN/themes/customtheme/styles.css

And it didnt exist.

Can anyone please help me??

Hello there,
I am new to Vaadin as well, I am just wondering if you have proper structure to your project. Check the image from the vaadin book. Make sure you have the right structure for the Themes.
12313.jpg

Hello,

thank you for your fast answer.

Well, for my opinion, yes. The structure in my project is correct.
See the picture below…

My theme is inside the folder VAADIN/themes… What do you think?
12314.jpg

okay, Can you please post your styles.css?

of course…
There are only three rows in my styles.css

here it is


 @import url(../reindeer/styles.css);
.v-app{
	background: yellow;
}

Hi,

please see
this thread
for solution on using themes when running on Liferay. In short: Portlet 2.0 specification does not offer static resource serving from within the portlet package, so you must install the theme into your Liferay instance.

-Tepi

Try:

@import url(…/reindeer/styles.css);

.v-app {
background: yellow !important;
}

This will force the color to be used.

Thank you for ur information.

If Portlet 2.0 specification does not offer static resource serving from within the portlet package, that means: this tutorial (
https://vaadin.com/de/book/-/page/themes.creating.html
) does not work??

I tried already. It didn’t work and i am starting to get frustrated now.

How did u create your custom theme?
With Vaadin-Eclipse?? First, you made a vaadin project, right? After that, you create a vaadin theme that connected to this project?

Yes, thats how I do it. You will have to recheck the link provided by Tepi above.

I checked already the link from Tepi. It’s an explanation that a theme can’t be added in a vaadin portlet.

But if how you do it, is creating a vaadin project and then vaadin theme… I wonder, why is it working on you but not on me??

Could u please give me some example of your source code?

which version of liferay and vaadiin do u use?

which eclipse version do u use?

I am not using LIferay! sorry :frowning: probably thats why it works for me :rolleyes:

Correct, it will not work. I use a hook plugin to deploy the style changes, then your portlet plugin can use the setTheme() to set the theme to the one you deployed via a hook.

Note that under Liferay, you cannot do any imports within your styles.css file; it must be the complete CSS for your theme.

I’ve posted a question about whether I could use the vaadin build process to leverage creating my single styles.css file by processing imports, but as of yet there have been no replies, so I’m still left w/ manually pasting the styles.css file together…

In Vaadin themes on Liferay, relative imports can be used if the theme is in the shared static resources directory together with the standard themes.

One more option: you could use one of the standard Vaadin themes already deployed on Liferay, but doing your customization of the theme using Liferay specific mechanisms (parameter header-css in your liferay-portlet.xml) instead of as a Vaadin theme - you can still use mostly the same CSS rules in it. Although slightly less clean, this way, you can include all the CSS etc. in your portlet and the portal will take care of mapping the paths to access the related resources etc.

thank you very much for your information.

It worked after i use header-cee and css-class-loader :slight_smile:

i am happy now.