2 Replies Latest reply on Oct 21, 2011 11:09 AM by lfryc

    Richfaces 4 Final Style class externalization

    subhar2006
    subhar2006 Aug 16, 2011 5:00 AM

      Hi

       

      I am using Richfaces 4.0.0.Final in my project. I want to override some of the style classes available in the different .ecss files under the core-components-ui-4.0.0.Final.jar file. For this I have created a 'external.css' file inside my project and copy the necessary style classes from different .ecss files and modified the style classes in 'external.css' based on my need. But the style classes defined in  'external.css' is not overriding the style classes of .ecss  when I run a page.  The problem is Richface is loading project specific css first and then the richfaces related css. So The richface related css is getting the higher preference over 'external.css'. So my question is how to load project specific css at last so that I can override the style classes via 'external.css'? Or Is there any way to load the richfaces related css at the very beginning of head tag ?(Do not want to use !important in external.css file to give higher preference ) - Below is the code from view source -

       

      <html xmlns="http://www.w3.org/1999/xhtml"><head>

          <link rel="stylesheet" type="text/css" href="/CoreWeb/css/format.css" />

          <link rel="stylesheet" type="text/css" href="/CoreWeb/css/jason.css" />

          <link rel="stylesheet" type="text/css" href="/CoreWeb/css/alignment.css" />

          <link rel="stylesheet" type="text/css" href="/CoreWeb/css/external.css" />

          <script language="javascript" type="text/javascript" src="/CoreWeb/js/main.js"></script>       

          <title>CORE</title><script type="text/javascript" src="/CoreWeb/javax.faces.resource/jsf.js.xhtml?ln=javax.faces"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/jquery.js.xhtml"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/richfaces.js.xhtml"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/richfaces-queue.js.xhtml"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/richfaces-event.js.xhtml"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/richfaces-base-component.js.xhtml"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/panelMenu.js.xhtml?ln=org.richfaces"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/panelMenuItem.js.xhtml?ln=org.richfaces"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/panelMenuGroup.js.xhtml?ln=org.richfaces"></script><link type="text/css" rel="stylesheet" href="/CoreWeb/rfRes/icons.ecss.xhtml?db=eAFTZKncDwACRQFe&amp;ln=org.richfaces" /><link type="text/css" rel="stylesheet" href="/CoreWeb/rfRes/panelMenu.ecss.xhtml?db=eAFTZKncDwACRQFe&amp;ln=org.richfaces" /><script type="text/javascript" src="/CoreWeb/javax.faces.resource/datatable.js.xhtml?ln=org.richfaces"></script><link type="text/css" rel="stylesheet" href="/CoreWeb/rfRes/datatable.ecss.xhtml?db=eAFTZKncDwACRQFe&amp;ln=org.richfaces" /><script type="text/javascript" src="/CoreWeb/javax.faces.resource/jquery.component.js.xhtml?ln=org.richfaces"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/jquery.position.js.xhtml"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/json-dom.js.xhtml?ln=org.richfaces"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/jquery.effects.core.js.xhtml?ln=org.richfaces"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/jquery.effects.highlight.js.xhtml?ln=org.richfaces"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/JQuerySpinBtn.js.xhtml?ln=org.richfaces"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/calendar-utils.js.xhtml?ln=org.richfaces"></script><script type="text/javascript" src="/CoreWeb/javax.faces.resource/calendar.js.xhtml?ln=org.richfaces"></script><link type="text/css" rel="stylesheet" href="/CoreWeb/rfRes/calendar.ecss.xhtml?db=eAFTZKncDwACRQFe&amp;ln=org.richfaces" /></head>

        • 1. Re: Richfaces 4 Final Style class externalization
          matija
          matija Oct 21, 2011 7:26 AM (in response to subhar2006)

          Hi,

           

          I can confirm this being a problem here as well.

           

          Earlier we used RichFaces 3 and then 4.0.0.20110227-CR1, and things worked as expected (i.e., our own css and js files were added at the end of <head/>). Suddenly, ufter upgrade to 4.0.0.Final, RichFaces' files come at the end, causing two issues:

          1. I am unable to override certain styles on RichFaces components with own classes - even if I add them later using jQuery (and thus should have higher priority), the original definitions still have the precedence and my classes are overruled. That is, unless I use !important, but I would like to avoid that.
          2. jQuery is loaded at the end of <head/>, meaning that I can't use it in any of my scripts that are included there.

           

          I tried 4.1.0.20110910-M2 too, but it did not help.

            • Actions
          • 2. Re: Richfaces 4 Final Style class externalization
            lfryc
            lfryc Oct 21, 2011 11:09 AM (in response to matija)

            Hi guys,

             

            the JSF impl is the one who is deciding about reading resource dependencies on components and rendering their respectable equivalents on page.

             

            I remember (and I hope I'm not wrong here ;-), you can trick that using:

             

            <h:body>

              <h:outputStylesheet name="..." target="head" />

            </h:body>

              • Actions