Foren

Primefaces theme override custom Liferay theme

Philip Jastrzębowski, geändert vor 10 Jahren.

Primefaces theme override custom Liferay theme

New Member Beiträge: 12 Beitrittsdatum: 06.10.13 Neueste Beiträge
Hi all,
On the portal we're developing we faced issue with CSS imports. We created a custom theme in which we define all our css classes. We're also using Primefaces library for some portlets. After defining class for particular PF component we stylize it in the theme. And now here come the problem. If this component we stylize has also his own primefaces classes that set different values for any property, it overrides CSS value in our theme. I give example, becouse it might seem vague:

We define button:
<p:commandbutton styleClass="buttonClass" (...) />


And stylize it in our theme:
.buttonClass {
 backgroud: color: green;
}


But the result is not as expected (green), becouse primefaces has also got his own libraries (such as aristo) for classes e.g. .ui-widget-content .ui-state-default and so on that overrides our theme. I noticed that also defining that property in portlet CSS is overwritten.

Now we are looking for solution that avoids using !important clause in each our CSS property or defining our primefaces theme. Is there any simple soultion for that problem?
thumbnail
Juan Gonzalez, geändert vor 10 Jahren.

RE: Primefaces theme override custom Liferay theme

Liferay Legend Beiträge: 3089 Beitrittsdatum: 28.10.08 Neueste Beiträge
Did you try setting the theme to NONE in web.xml?

<context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>none</param-value>
</context-param>
Philip Jastrzębowski, geändert vor 10 Jahren.

RE: Primefaces theme override custom Liferay theme

New Member Beiträge: 12 Beitrittsdatum: 06.10.13 Neueste Beiträge
I guess then it would not use any Primefaces theme at all. I mean we are using some properties from PF theme, but want just to overwrite a few that are defined in our theme.
thumbnail
Juan Gonzalez, geändert vor 10 Jahren.

RE: Primefaces theme override custom Liferay theme

Liferay Legend Beiträge: 3089 Beitrittsdatum: 28.10.08 Neueste Beiträge
Ok I see,

did you try adding the css in <h:head> section?

 <h:head>

<link href="#{request.contextPath}/css/liferay-theme-override.css" rel="stylesheet" type="text/css">

</h:head>
thumbnail
Neil Griffin, geändert vor 10 Jahren.

RE: Primefaces theme override custom Liferay theme

Liferay Legend Beiträge: 2655 Beitrittsdatum: 27.07.05 Neueste Beiträge
With CSS, the last <link href="..."></link> "wins" so you would need to make sure that the PrimeFaces Theme <link href="..."></link> in the head appears before your own customizations.
Philip Jastrzębowski, geändert vor 10 Jahren.

RE: Primefaces theme override custom Liferay theme

New Member Beiträge: 12 Beitrittsdatum: 06.10.13 Neueste Beiträge
Neil Griffin:
With CSS, the last <link href="..."></link> "wins" so you would need to make sure that the PrimeFaces Theme <link href="..."></link> in the head appears before your own customizations.


I know the theory, but don't know how to make my css to be included first. I have no <link href (...) /> for PF css neither in my portlet nor in the theme.
Philip Jastrzębowski, geändert vor 10 Jahren.

RE: Primefaces theme override custom Liferay theme

New Member Beiträge: 12 Beitrittsdatum: 06.10.13 Neueste Beiträge
@Juan Gonzalez
Yea, I tried. But even then this css is included befor primefaces' CSSes emoticon
thumbnail
Juan Gonzalez, geändert vor 10 Jahren.

RE: Primefaces theme override custom Liferay theme

Liferay Legend Beiträge: 3089 Beitrittsdatum: 28.10.08 Neueste Beiträge
Hi Philip,

please try putting

<h:outputstylesheet.. target="head" />


just after <h:body>
Philip Jastrzębowski, geändert vor 10 Jahren.

RE: Primefaces theme override custom Liferay theme

New Member Beiträge: 12 Beitrittsdatum: 06.10.13 Neueste Beiträge
Unfortunately still no expected result. Ouput looks the same like in your previous idea.

This CSS sheet overwrite theme css, but is overwritten by PF CSSes.
thumbnail
Juan Gonzalez, geändert vor 10 Jahren.

RE: Primefaces theme override custom Liferay theme

Liferay Legend Beiträge: 3089 Beitrittsdatum: 28.10.08 Neueste Beiträge
Hi Philip,

can you post here how does your xhtml looks like, and the <head> part in the HTML?

It worked fine for me...
thumbnail
Neil Griffin, geändert vor 10 Jahren.

RE: Primefaces theme override custom Liferay theme

Liferay Legend Beiträge: 2655 Beitrittsdatum: 27.07.05 Neueste Beiträge
Liferay Faces Bridge supports the same type of resource ordering as PrimeFaces found in this blog.

So you can try using <f:facet name="last"> in order to cause your stylesheet to appear last (or at least, after the PrimeFaces theme CSS).