9 Replies Latest reply on Apr 7, 2011 1:00 AM by narvava

    Rounded Corners with CurvyCorners

    arkmobile Feb 1, 2010 10:41 AM

      After a weekend of messing around with richfaces skins, i finally found what appears to be a workable solution for rounding panel corners.  I tried several approaches (jquery.corners.js, images, and finally settled on curvycorners).

      1. download curvycorners js file.

       

      2. place this code in your xhtml header.

       

      <script type="text/javascript" src="path/to/jsfile/curvycorners.js"></script>

       

      <style type="text/css">

       

      /*<![CDATA[*/

      .rich-panel

       

      {

       

      -moz-border-radius:1ex;

       

      -webkit-border-radius:1ex;

      }

       

      /*]]>*/

       

      </style>

       

       

       

      3. That's it, you're done! 

       

      Now, i haven't done full browser support testing but my initial testing shows this to be a very promissing solution.  Hope this helps someone.

      • 14457 Views
      • Tags:
        • 1. Re: Rounded Corners with CurvyCorners
          jbalunas
          jbalunas Feb 1, 2010 10:45 AM (in response to arkmobile)

          Hello Aaron,

           

          Thanks so much for this tip.  We'll review it and turn this into an article for inclusion into the FAQ if it is ok.

           

          -Jay

            • Actions
          • 2. Re: Rounded Corners with CurvyCorners
            arkmobile Feb 1, 2010 6:14 PM (in response to jbalunas)

            sounds good. Let me know if you experience any issues but so far it seems to work fine for me.

             

            I made one modification to round the header of the panel and now i'm using this in my css.

             

            .rich-panel

             

            {

             

            -moz-border-radius:1ex;

             

            -webkit-border-radius:1ex;

            }

            .rich-panel-header

             

            {

             

            -moz-border-radius-topright:1ex;

             

            -moz-border-radius-topleft:1ex;

             

            -webkit-border-top-right-radius:1ex;

             

            -webkit-border-top-left-radius:1ex;

            }

             

            In IE 7 the header background image degrades to a solid color but i'm using solid colors anyway so this isn't a problem for me.

              • Actions
            • 3. Re: Rounded Corners with CurvyCorners
              arkmobile Feb 10, 2010 12:28 PM (in response to arkmobile)
              Sadly, i am discovering that there are many issues with using CurvyCorners so I no longer recommend this as a solution.  I'm about to try using custom page elements instead of using the richfaces panels since it seems prohibitively difficult to create panels with nicely rounded corners.  I'll post if this works for me.
                • Actions
              • 4. Re: Rounded Corners with CurvyCorners
                ilya_shaikovsky
                ilya_shaikovsky Feb 11, 2010 6:47 AM (in response to arkmobile)

                yes.. my main doubt was about crossbrowser compatibility of such solution.

                 

                You could easilly create your custom panel component with CDK as described there - http://community.jboss.org/wiki/CDKGettingStarted. Just check how the panel component done (sources in SVN repository) and modify template to add additional elements for corners.

                  • Actions
                • 5. Re: Rounded Corners with CurvyCorners
                  nepster48
                  nepster48 Mar 18, 2010 12:42 AM (in response to arkmobile)

                  Hey It applies to the panel nicely. Can i apply the same to the rich:datatable? I tried the similar ways like adding a class namely rich-table-header and rich-table and rich-table-thead but it didnot work

                  Please suggest me a way to apply rounded corners to data integration components. Cross-browser compatibility is not an issue. The solution shown for rich:panel s fine enough. So is there any similar solution for rich:datatable?

                    • Actions
                  • 6. Re: Rounded Corners with CurvyCorners
                    ilya_shaikovsky
                    ilya_shaikovsky Mar 18, 2010 3:33 AM (in response to nepster48)
                    explore that css properties in documentation.. I do not sure them are applicable to tables.
                      • Actions
                    • 7. Re: Rounded Corners with CurvyCorners
                      nepster48
                      nepster48 Mar 18, 2010 3:41 AM (in response to ilya_shaikovsky)

                      Thanks for your reply.

                      i tried to apply this css in html tables. It worked fine enough. But the problem is, They are not being applied to datatables. In firebug i can see those classes as applied to the element but i couln't get rounded corners.

                      I could not figure out any problem in the generated html from richfces

                        • Actions
                      • 8. Re: Rounded Corners with CurvyCorners
                        ilya_shaikovsky
                        ilya_shaikovsky Mar 18, 2010 3:49 AM (in response to nepster48)
                        then maybe them just conflicts with some other default properties? try to mark them with !important.
                          • Actions
                        • 9. Rounded Corners with CurvyCorners
                          narvava
                          narvava Apr 7, 2011 1:00 AM (in response to arkmobile)

                          Hi Aaron,

                           

                          Could you please post solution if  you find one for this rounded corners issue.

                           

                          Regards,

                          Naresh.

                            • Actions