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

    Overriding CSS in RichFaces 4.x

    Russell Collins Newbie

      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.

        • 1. Re: Overriding CSS in RichFaces 4.x
          Pavol Pitonak Master

          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
          • 2. Re: Overriding CSS in RichFaces 4.x
            jprats Newbie

            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
            • 3. Re: Overriding CSS in RichFaces 4.x
              Russell Collins Newbie

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

              • 4. Re: Overriding CSS in RichFaces 4.x
                ramkumarps Newbie

                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:)

                • 5. Re: Overriding CSS in RichFaces 4.x
                  Russell Collins Newbie

                  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.