5 Replies Latest reply on May 29, 2013 9:57 PM by Brian Leathem

    CSS styles compatibility - RF3 to 4

    Edward I Newbie

      Is there any plan to fix RF4 css handling to be compatible with RF3?

       

      I'm not sure if it's all bugs or a combination of bugs and just different behaviour.  I have been unable to port my RF3.3 app to RF4 due to this even though all code changes are done and the app otherwise works - it just looks terrible because half the time the CSS I speficy in the styleClass attribute gets overwritten by the native RF4 styles... perhaps they're more specific and shouldn't be.

        • 1. Re: CSS styles compatibility - RF3 to 4
          Brian Leathem Master

          There is the Xcss2EcssConverter tool for converting RichFaces 3 .xcss files to RichFaces4 .ecss files.  Other than that you will have to port your skin from RF 3 to RF 4.  Many of the css class names have changed.

          • 2. Re: CSS styles compatibility - RF3 to 4
            Edward I Newbie

            Hi Brian, thanks for the response, but I'm dealing with regular styles defined in a .css file, not a skin or .xcss

            Here are two examples where I have problems:

             

            Example 1. My CSS file defines:

             

            a.toolbarText {

                link: text-decoration: none; color: white;

                active: text-decoration: none; color: white;

                visited: text-decoration: none; color: white;

                hover: text-decoration: none; color: white;

            }

             

            My .XHTML has:

            <rich:toolbar itemSeparator="grid" height="28">

                <h:outputLink value="index.xhtml" styleClass="toolbarText">Home</h:outputLink>

            ...

             

            In this case, the text "Home" is white to start with, but then changes to dark blue once visited.  In RF3, the text stays white, as expected given the style definitions.

             

            Example 2.  If I define:

            <rich:collapsibleSubTable value="#{item.mySet}" var="myItems" rowClasses="oddRow, evenRow">

            ...

            The rowClasses do not take effect - the table is just all white.  If I use the exact rowClasses parameters for rich:dataTable, it works as expected with alternating row colors.

             

            These are just two examples where style class handling does not work in RF4 and did work in RF3, there are several others I see in my web site I've been trying to convert.

             

            Thanks

            • 3. Re: CSS styles compatibility - RF3 to 4
              Brian Leathem Master

              Your css class definition for the "toolbarText" class looks fine.  Can you inspect the css values of the link and see what is overriding it (using chrome developer tools or something similar).

               

              CollapsibleSubTable indeed has the rowClasses attribute (see the vdldoc).  Again, inspect it to see what is overriding your values.  Try and come up with a simple example demonstrating that your css classes aren't getting applied, and file a jira issue with that sample attached.

               

              Are you sure your css file is being included? (it sounds like it's not).

              • 4. Re: CSS styles compatibility - RF3 to 4
                Edward I Newbie

                I can't easily tell what's overriding my styles, but I know the CSS is certainly being included because the styles work in the dataTables, but not the collapsibleSubTables that are nested within the same dataTables.

                I'm curious whether anyone has actually tested/used the rowClasses attribute with collapsibleSubTable - this is something very basic that, as I said, works fine with dataTable.

                • 5. Re: CSS styles compatibility - RF3 to 4
                  Brian Leathem Master

                  Chrome developer tools (as an example) will tell you exactly what is overriding your styles.