5 Replies Latest reply on Jul 19, 2012 10:12 AM by vrcollins

    Overriding CSS in RichFaces 4.x

    vrcollins
    vrcollins Jun 21, 2012 6:50 PM

      I have looked at forums and documentation and it seems as though there is no answer to the question that I have.

       

      Could someone please explain (thoroughly) how to override the RichFaces CSS and styles?  Nothing has worked.  I have tried using the styleClass attribute, i have included the class names in my custom css (ex rf-cp-hdr, rf-tgp).  Everytime I try something, the RichFaces styling is still there overriding my custom CSS.  Please help.

      • 7735 Views
      • Tags:
        • 1. Re: Overriding CSS in RichFaces 4.x
          ppitonak
          ppitonak Jun 22, 2012 2:58 AM (in response to vrcollins)

          Hi,

           

          it is a known issue but I cannot find it in Jira

           

          As a workaround, you can append !important to your CSS definitions:

           

          .some-class {

             someproperty: somevalue !important;

          }

           

          Regards,

          Palo

          1 of 1 people found this helpful
            • Actions
          • 2. Re: Overriding CSS in RichFaces 4.x
            jprats
            jprats Jun 22, 2012 7:20 AM (in response to vrcollins)

            OK, there seems to be an issue with the order of resource loading in JSF2

             

            This example works OK

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j">
<h:head>
    <title>Test</title>
</h:head>
<h:body>
    <h:outputStylesheet>
        .rf-tab-lbl { font-size: 15px; }
    </h:outputStylesheet>
    <h:form>        <rich:tabPanel>
            <rich:tab header="Tab 1">
                <h:outputText value="Hello World!" />
            </rich:tab>
            <rich:tab header="Tab 2">
                <h:outputText value="Hello World 2!" />
            </rich:tab>
        </rich:tabPanel>
    </h:form>
</h:body>
</html>

             

            But placing <h:outputStylesheet name="test.css" library="css"/> inside <h:head> causes your script to be loaded before richface's, so your changes won't apply.

             

            Conclusion, load your styles as late as possible (move them to the bottom of your page).

             

            You can also use a styleClass, ex <rich:tabPanel styleClass="myTabPanel"> and then in your css:

             

            .myTabPanel .rf-tab-lbl { font-size: 15px; }

             

            As long as your CSS is more specific, it will be the one that applies.

            1 of 1 people found this helpful
              • Actions
            • 3. Re: Overriding CSS in RichFaces 4.x
              vrcollins
              vrcollins Jun 22, 2012 11:52 AM (in response to jprats)

              Thank you for your resposes.  I will take your suggestions, see what workds and what doesn't, and report back.

                • Actions
              • 4. Re: Overriding CSS in RichFaces 4.x
                ramkumarps
                ramkumarps Jul 13, 2012 12:30 AM (in response to vrcollins)

                hey Russell,

                 

                i just answered for the same kind of Question

                 

                please take a look at my comments in the below link

                 

                https://community.jboss.org/thread/202276?tstart=0

                 

                thanks Ram:)

                  • Actions
                • 5. Re: Overriding CSS in RichFaces 4.x
                  vrcollins
                  vrcollins Jul 19, 2012 10:12 AM (in response to vrcollins)

                  Thank you for all your answers.  It took some work but I was able to get the controls to look the way they should based on what you guys have told me. 

                    • Actions