Board index JavaServer Faces General theme is overriden by default css

theme is overriden by default css

Components, Ajax Framework, Utilities and More.


Posts: 12
hi,

I'm using a custom theme deployed as a jar based on the new theme API in 2.2.1. I noticed that some styles defined in my theme are overriden by default PrimeFaces styles. this is because in the html output, the theme stylesheet is loaded first, followed by the PrimeFaces build-in ones. this is in Firefox 4, haven't tested in other browsers.

shouldn't it be the other way round (i.e. load the theme last)?

my concrete problem is that I would like to have panel headers with no padding. so I tried to set ui-panel to zero padding in my theme, but this is overruled by the ui-panel setting in PrimeFaces panel.css. also tried to change padding of ui-widget, but with the same result (panel header still has padding). as a workaround, I load another stylesheet in my page header (in addition to the theme directive in web.xml) which contains these settings.

cheers
patrick
PrimeFaces 2.2.1
Mojarra 2.0.3.b03
Apache Tomcat 6.0.29


Posts: 23
Location: San Jose
Hi ,

I ran into same exactly same problem. Did you find out solution or any workarround ?


Thank You
Primeface 3.2 | Tomcat 7.0.21 | MyFaces 2.1.5 | Eclipse 3.7 | CentOs 5.6


Posts: 365
Are the default settings using !important? You can check this with firebug/
ie/chrome dev tools. If so I think this will be addressed in PF3. In the
meantime, you would need to also use !important in your own theme.

Regards,
Brendan.


Posts: 12
@healeyb: no, there is no !important flag in the the default styles.

to me, it looks like the sequence in which the different stylesheets are loaded is wrong. if you use the new themes API (i.e. package your custom theme in a jar), then your theme is loaded as the first stylesheet. all other stylesheets come after it. it seems like Firefox 4 reads all the stylesheets in sequence, overriding styles when they are found in multiple files (is this really so? and if so, is this the correct behaviour?). this is consistent with my workaround (loading another stylesheet manually in the facelets template where I override the required styles).

@mitnpatel: see my original post for a workaround.
PrimeFaces 2.2.1
Mojarra 2.0.3.b03
Apache Tomcat 6.0.29


Posts: 14909
Location: Cybertron

Idea of loading theme css first is to make overriding easier. It was other way around before and many users don't like it as theme css was loaded before theme.css which was overriding.

Can you give me a concrete example of your case so we can discuss in detail?
PrimeFaces Lead


Posts: 12
as mentioned in my original post, I'm trying to get panel headers without padding around the panel title. see this screenshot for an example:

Image

the only way to achieve this is to set the padding for .ui-panel to 0. so what I did is I created my theme using Themeroller, manually added the .ui-panel definition to theme.css, and deployed the theme as a jar using the PrimeFaces theme API as described in the user guide section 8.2.

I'm aware that according to user guide (8.3), margins and paddings are considered structural and not skinning css properties, but in this case, I don't agree (the padding around the panel header changes the appearance, not the structure of the layout).
PrimeFaces 2.2.1
Mojarra 2.0.3.b03
Apache Tomcat 6.0.29


Posts: 23
Location: San Jose
@pmeidl .

You suggesting to create another stylesheet and load it at end in head as workaroud then there is not much use of Theme. I want to put it into theme because I am have my own Theme for whole web app.

@Primeface

I created my own them as per instructed in Primefaces 2.2 User guide in Chapter 8.

I created my style for .ui-button in theme.css. I expected that style to apply for every button i creating but the proeble is that style is get overriden by style at location

javax.faces.resource/jquery/ui/jquery-ui.css.jsf?ln=primefaces&v=3.0.M2-SNAPSHOT .

I think this happens because in head theme.css get loaded before any stylesheet and then all default stylesheet..
I think style in theme.css should get prefrence over defaut style.

I do not how to force theme.css to get prefrence over default one.

-
Primefaces 3.0.M2-SNAPSHOT
Tomcat 7.0
Primeface 3.2 | Tomcat 7.0.21 | MyFaces 2.1.5 | Eclipse 3.7 | CentOs 5.6


Posts: 12
You suggesting to create another stylesheet and load it at end in head as workaroud then there is not much use of Theme. I want to put it into theme because I am have my own Theme for whole web app.

yes, that's what I do. since I have this stylesheet in the same jar as the theme, it also applies to the whole webapp (actually it's shared by several webapps). the only difference to loading the theme (which simply requires a directive in web.xml) is that I explicitely specify the stylesheet in my facelets template:

<link type="text/css" rel="stylesheet" href="#{resource['my-primefaces-theme:extra_styles.css']}" />


since the page header is a separate facelet component anyway which is included by all page templates, there is only a single place where I need to make this change.

anyway, mitnpatel, what you describe is exactly the same behaviour I see, and I agree with your description of what one would expect to be the correct behaviour. but as I mentioned in a previous post, the reason for the current behaviour might be the distinction in structural and skinning css (which is in my opinion too strict) and that by design you aren't supposed to override structural css properties.
PrimeFaces 2.2.1
Mojarra 2.0.3.b03
Apache Tomcat 6.0.29


Posts: 73
Location: Netherlands

This is bugging me too. What I observe using Firebug the stylesheets loading order in 3.0 is different from 2.2.1.

In 2.2.1 the loading order used to be (where the latter overrides the former):
- theme (as set in the web.xml THEME parameter)
- styles defined in <h:header> by <h:outputStylesheet>
- component styles
- styles defined in <h:header> by <link rel= > defined stylesheets

In 3.0 this has been changed to:
- styles defined in <h:header> by <link rel= > defined stylesheets
- theme (as set in the web.xml THEME parameter)
- styles defined in <h:header> by <h:outputStylesheet>
- component styles

So, your suggestion to create another stylesheet and load it at the end of the <h:head> doesn't even seem to work anymore in 3.0M3 as it is still overridden by the component styles. I personally find it a bad idea that there is no way anymore to override the component styles. So I agree with mitnpatel and pmeidl. I'm not sure if this is a deliberate change by primefaces, or a consequence of the used libraries (jquery?). But I really would like to have an option of overriding component styles.

Did any of you find a solution, other than change the component styles directly and repack the primefaces.jar? Didn't and don't want to try things like that, of course ;).

Regards, Paul.
JSF 2.2.3, Primefaces 4.0, Tomcat-7.0.40


Posts: 2
I am also facing the same issue. My own theme is overriden by default css and hence all the component design goes on toe.
Please help me to solve this issue.

Next

Return to General