Foren

Großes Problem Liferay und Vaadin Themes

Jens Bergmann, geändert vor 11 Jahren.

Großes Problem Liferay und Vaadin Themes

New Member Beiträge: 6 Beitrittsdatum: 24.07.12 Neueste Beiträge
Hi,

ich habe langsam den Eindruck, dass Liferay und Vaadin im Bezug auf die Themes nicht richtig funktioniert. Besonders setTheme() funktioniert gar nicht richtig:
Ich habe jetzt schon einiges probiert, aber nichts hat etwas gebracht:

Das erste Bild zeigt, wenn ich setTheme("reindeer") gesetzt habe
Das zweite Bild zeigt, wenn ich kein Theme gesetzt habe, Dann ist die Darstellung okay.
Ich möchte aber das Theme reindeer verwenden. Gibt es da irgendwelche Hinweise, wie das Theme richtig dargestellt wird?
Meine Vermutung ist irgendwie, dass beide Themes geladen werden. Hinter dem reindeer Theme liegt anscheinend nochmal das standard liferay Theme.

Ich habe mal das "testTheme-portlet.war" angefügt. Bitte testet mal, ob das bei euch auch so aussieht!
thumbnail
David H Nebinger, geändert vor 11 Jahren.

RE: Großes Problem Liferay und Vaadin Themes

Liferay Legend Beiträge: 14914 Beitrittsdatum: 02.09.06 Neueste Beiträge
Sorry for the english reply, but I'm using Vaadin and wanted to help...

It's not so much that they work together, they're just working at the same time.

Liferay, by default, will theme all widgets on a page. The Vaadin theme applies itself on top of those elements, so there typically is some crossover involved.

In the first image, you're seeing that bleed over of the Liferay theme into the selected Vaadin theme.

This bleed over can be a good thing, though, depending upon your perspective...

If you create a custom Liferay theme for your site, many of the theme styles will carry over. Unfortunately, you still have to create a custom Vaadin theme to also override the defaults that the various Vaadin themes use.

We've settled here on just sticking with the Liferay vaadin theme. We have a custom theme where we do our primary theme development, and this theme is used on all of our pages. We then make necessary overrides to the liferay vaadin theme to match the changes up (always keeping our overrides at the bottom of the styles.css file so we can support vaadin updates).

To use reindeer, you'd need to interrogate the elements and see what styles are carrying over from the liferay theme, then specifically add overrides to the reindeer theme to undo the liferay styling.
Jens Bergmann, geändert vor 11 Jahren.

RE: Großes Problem Liferay und Vaadin Themes

New Member Beiträge: 6 Beitrittsdatum: 24.07.12 Neueste Beiträge
Thanks for the answer!

Can you show me an example, how should I customize the css? Take the tabsheet. Where should I start?
thumbnail
David H Nebinger, geändert vor 11 Jahren.

RE: Großes Problem Liferay und Vaadin Themes

Liferay Legend Beiträge: 14914 Beitrittsdatum: 02.09.06 Neueste Beiträge
Well I'd use Chrome on your rendered page to inspect the element that has the style problem. You can see all of the css that applies to the specific element and uncheck the styling info that is giving you the problem.

After you've identified the stuff that needs to be undone, you can change /ROOT/html/VAADIN/themes/reindeer/styles.css (ignore the directories, they are not used) and add appropriate stuff to undo/override what the Liferay theme is applying. I.e if the liferay theme is adding a border-bottom style, you'd be putting in "border-bottom: none" to exclude it.
Jens Bergmann, geändert vor 11 Jahren.

RE: Großes Problem Liferay und Vaadin Themes

New Member Beiträge: 6 Beitrittsdatum: 24.07.12 Neueste Beiträge
emoticon thats very very bad, that's a huge expense. Are there any vaadin themes that work with liferay without issues?
thumbnail
David H Nebinger, geändert vor 11 Jahren.

RE: Großes Problem Liferay und Vaadin Themes

Liferay Legend Beiträge: 14914 Beitrittsdatum: 02.09.06 Neueste Beiträge
The liferay vaadin theme is sync'd up w/ the liferay classic theme. If you use both of those, everything will be consistent.

Most people do not use the classic theme, instead they use a custom theme to give their site the look and feel they want (as they should). Unfortunately this means that, when using Vaadin, your theming work doubles in order to get the vaadin theme to sync up w/ your custom Liferay theme.
thumbnail
Chethan Barike, geändert vor 11 Jahren.

RE: Großes Problem Liferay und Vaadin Themes

Junior Member Beiträge: 29 Beitrittsdatum: 27.03.12 Neueste Beiträge
Hi All,

This is might be helpful..

1. Set the below property in portal-ext.properties of Liferay. Which will override portal.properties whch has got ( vaadin.theme=liferay ).

# using base theme will not get any conflict with other theme. Since other vaadin themes like runo, reindeer etc extends base theme.
vaadin.theme=base

2. Now in Vaadin Application. set the Vaadin theme you like as shown below:

@Override
public void init()
{
.....
setTheme("runo");
......
}

Thats it!

Thanks,
Chethan Barike
thumbnail
David H Nebinger, geändert vor 11 Jahren.

RE: Großes Problem Liferay und Vaadin Themes

Liferay Legend Beiträge: 14914 Beitrittsdatum: 02.09.06 Neueste Beiträge
That's not going to solve the original problem...

Liferay has its theme that it loads, and vaadin has its theme that it loads (in your suggestion, runo).

The vaadin themes assume there is no other CSS loaded and have CSS to control styling from a blank state, so it will not undo/reset/specify a style that is not set by default.

In Liferay, the Liferay style sheet is loaded and applied before vaadin's, so some of the Liferay styling bleeds into vaadin and throws off the rendering..,

Besides, if you've created a custom theme for your site, you'd really rather have vaadin reflect that theme and not runo...