Liferay theme overrides custom primefaces theme

[Issam B, modifié il y a 11 années.]

Hi,

I have made a custom primefaces theme using jQuery themeRoller. There was some graphic bugs at the beginning when I gernerated the jar theme but I solved them all (ex: filter fields in dataTable had the same color as headers and toolbars). I did some modifications in theme.css before generating the final jar

At present, all components look fine except button ! When I inspected button element in Chrome browser I have found that button style of Liferay theme has override the new button style which comes with primefaces custom theme (primefaces button is converted to <button>)

here is the difference the first one is primefaces custom style




Regards,

Issam

[Bikash Ghibila, modifié il y a 11 années.]

HI Issam B,

Could you please tell me which particular css class cause you the problem

[Issam B, modifié il y a 10 années.]

Bikash Ghibila:

HI Issam B,

Could you please tell me which particular css class cause you the problem

Hi Bikash,

it was form.css (a Liferay css file )


Regards,
Issam

[David H Nebinger, modifié il y a 11 années.]

In the browser, the styles are cumulative. So the browser is combining the theme definition from the Liferay page's theme and your overrides defined from the theme roller output.

What you're seeing is the result of the combination.

In order for the theme roller theme to work as you expect, you need to undo what the Liferay theme applies to the elements.

Using chrome, for example, I would compare the styling applied to the element outside of Liferay against what is applied within the Liferay page. You'll see additional stuff from the Liferay side (some new styling, maybe some differences between the two).

Using this info, you go back into your custom theme and 'undo' what Liferay would normally apply.

For example, if Liferay had a "margin-left: 10px" style applied but your theme has no value assigned for "margin-left" and you didn't want the left margin, you'd add a "margin-left: 0px" to your theme in order to 'undo' Liferay's default styling.

[Issam B, modifié il y a 10 années.]

David H Nebinger:

In the browser, the styles are cumulative. So the browser is combining the theme definition from the Liferay page's theme and your overrides defined from the theme roller output.

What you're seeing is the result of the combination.

In order for the theme roller theme to work as you expect, you need to undo what the Liferay theme applies to the elements.

Using chrome, for example, I would compare the styling applied to the element outside of Liferay against what is applied within the Liferay page. You'll see additional stuff from the Liferay side (some new styling, maybe some differences between the two).

Using this info, you go back into your custom theme and 'undo' what Liferay would normally apply.

For example, if Liferay had a "margin-left: 10px" style applied but your theme has no value assigned for "margin-left" and you didn't want the left margin, you'd add a "margin-left: 0px" to your theme in order to 'undo' Liferay's default styling.

Hi David,

Thanks a lot for your explanation.
I wonder if there is another solutions to avoide style cumulations ?

I think that what you suggested requires to test all widgets after generating the custom primefaces theme, from theme roller, and tick those having style cumulation and "correct" them in Liferay theme...

I wonder if there is some JS tips or css properties in order to give priority to primefaces custom theme ??


Thanks in advance


Regards,
Issam

[David H Nebinger, modifié il y a 10 années.]

Issam B:

I wonder if there is another solutions to avoide style cumulations ?

Without writing your own browser, no.

It's the nature of CSS. You could write a basic servlet, have it include two css files. In the first, set the body background color to red. In the second, apply the comic sans font as the default font for the body tag.

When rendered, you'll see the styles from both of the individual sheets get applied.

And it's really what you want to have happen. Liferay uses it's styles to apply to the entire page, but your CSS file is just for styling the content within your portlet. It is your styling that you need to apply the 'undo' actions to.

I think that what you suggested requires to test all widgets after generating the custom primefaces theme, from theme roller, and tick those having style cumulation and "correct" them in Liferay theme...

No, the correct thing to do is not to style your portlet at all.

The portal theme applies to the entire page. Your portlet should look the same as any other portlet, thus enforcing the consistency of the entire portal interface. You should not be rolling your own theme for your portlet as it will make your portlet stand out in ways that will not be visually appealing.