2 Replies Latest reply on Jan 25, 2010 6:55 PM by maxmcbyte

    Question: How to config RF (skin/CSS/custom class) to allow a DataGrid to use a page-level gradient background to display between cells?

    maxmcbyte

      Hello RichFace'ers;

       

      *** I am very new *** to RF.

       

      I am using RF 333-Beta-1 and have an existing html/css system that I am converting to JSF2/Facelets/RichFaces/GlassFish v3 application and want to keep the look and feel as close as possible to the original as it is a work of art!!! Kidding.

       

      I am employing a DataGrid component and more on a page that is using a gradient for the page background. The original has a table where the cells employ a  white background and the spaces between the cells display the gradient of the page background.

       

      I am have not been able to get the  gradient nor positioning the content (centering images) within the cell with the DataGrid component, I have tried 3 differnt approaches;

       

      1. Made a custom skin based upon the DEFAUT skin and tried to making changes to it without success, learned some things though.

       

      2. Modified RF classes like "rich-table", "rich-table-cell", etc. in my CSS with without sucess and  learned some more things.

       

      3. Lastly, I tried using my own custom classes on the component  styleClass="myClass", again without sucess.

       

      I really like the RichFaces functionality but getting it to look the way I want is $&$(@#@_#(_+#&$&$&$ !!!

       

      Listed below are the original html/css version and the RichFaces version.

       

      To recap;

      1. I am looking to get the gradient background to display between the cells.

      2. Center the image within the DataGrid cells. Currently they are left-justified.

       

      Much appreciate any pointers.

       

      Thank You!

       

       

       

      ORIGINAL  HTML VERSION                                                                         RICHFACES DATAGRID VERSION

       

      Screenshot.png          Screenshot-1.png