7 Replies Latest reply on Nov 25, 2011 1:24 PM by Brian Leathem

    Precedence of custom ecss over those of frameworks

    Nikhil Patil Newbie

      I'm using the lovely Richfaces 4 M6 (libs from thenightly snapshot)

      This might have been answered somewhere else, but I couldn't understand it properly

      I'm trying to include my own ecss file with <h:ouputStylesheet>. However, while rendering this file is included after all the framework's files (eg: datatable.ecss). So the style rules I wrote are not applied to the elements. How can I change this precedence? Or as I learned in some other posts, I have to change the datatable.ecss flie from the richfaces-components-ui-x.jar/META-INF/resources/org.richfaces , rebuild and use the jar?

        • 1. Re: Precedence of custom ecss over those of frameworks
          Andrew Wheeler Newbie

          A bit late on the reply. The best way to override a richfaces eccs is to install it in your resources directory under the library name org.richfaces. E.g. /app-root/resources/org.richfaces/datatable.ecss. Your app's resource directory has precedence over the resources in the richfaces libs. Do not manually include the ecss file using outputStylesheet as this will include both richface's and your own.


          This should be included in the richfaces documentation.

          • 2. Re: Precedence of custom ecss over those of frameworks
            Nick Belaevski Master



            Actually, the last stylesheet has bigger priority than preceding ones, so the order is correct. Check in Firebug/IE developer toolbar why your styles are not applied.

            • 3. Re: Precedence of custom ecss over those of frameworks
              Andrew Wheeler Newbie



              You are correct that in so far as if he included the outputStylesheet in the h:body tag then the stylesheet is added after the richfaces built-in stylesheets. However I have found that if the outputStylesheet is included in the h:head section then it is added before the built-in stylesheets thus has little or no effect. You would use this method if you want to extend (or override) a subset of the built-in style rules for a datatable. My original advice still stands if you want to completely replace the built-in style sheet.

              • 4. Re: Precedence of custom ecss over those of frameworks
                Nick Belaevski Master



                Yes, you are right - but Nikhil says that in his case stylesheet is included after datatable.ecss, not before, so they should work. IMHO replacing original stylesheet can be somewhat dangerous keeping in mind that original stylesheet can change between versions - so you'll have to maintain it.  

                • 5. Re: Precedence of custom ecss over those of frameworks
                  moldovan Newbie

                  I also have the strange situation, that my own css/ecss - Files are inserted on higher position as the richfaces ones, in the h.head-Section. So my custom properties-file will be taken to style the components, but not my custom css/ecc files - the eccs-files from the richfaces-jar will be taken.


                  I'm thinking richfaces styles and javascript should be inserted at highest position in the header, but this is not the case.


                  I cannot use the "workaround", to locate all the css inside org.richfaces folder, which Andrew hat written, because my webapp imports a Skinning-jarfile, which holds different custom skins for several webapps. So in these JAR are a own skin for webapp1, a own skin for webapp2,....


                  Has anyone the same situation? Or I'm making anything wrong? I only wrote my custom css for different richfaces-components and imported them via h:outputStyleSheet-Tag....


                  thanks for any answer!

                  • 6. Re: Precedence of custom ecss over those of frameworks
                    Karsten Wutzke Expert

                    I am experiencing the same: custom ECSS styles aren't applied at all when placing the h:outputStylesheet into h:head. I honestly consider this a pretty serious bug.


                    I filed it here: https://issues.jboss.org/browse/RF-11734



                    • 7. Re: Precedence of custom ecss over those of frameworks
                      Brian Leathem Master

                      A good practice is to place all your <h:outputStylesheet> tags at the bottom of your template/page (they will still be targeted to the html "head").  This way, all components will have there stylesheet resources rendered before the h:outputStylesheet resource is rendered.  This is how JSF 2 works at the moment.


                      If there is enough of a demand, we can look at providing a RichFaces stylesheet component that lets you specify where the resource get's placed.  But until such a component is developped, just put your h:outputStylesheet tags at the bottom of your template/page.



                      Edit: Removed a reference to the _target_ attribute (I was thinking of h:outputScript when I wrote it)