4 Replies Latest reply on May 19, 2010 10:41 PM by Marco M

    Change rich:progressBar color

    Marco M Newbie

      Hi friends,

       

      I have rich:progressBar in my jsp and it runs perfectly.

      But how can i change that orange bar to a green one?

       

      Thanks in advance,

      Marco

        • 1. Re: Change rich:progressBar color
          Ilya Shaikovsky Master

          rich-progress-bar-uploaded or rich-progress-bar-completed css classes should be defined with background-image's or background-color's you need. first should be used if you not redefined label markup and the second if does.

           

          You could quickly look to the classes applied using firebug for example at richfaces-demo.

          1 of 1 people found this helpful
          • 2. Re: Change rich:progressBar color
            Marco M Newbie
            Hi Ilya, thank you for reply!
            With Firebug i´ve found:
            .rich-progress-bar-completed {
            background-color:#E79A00;
            background-image:url("/OverTime/a4j/g/3_3_0.GAorg.richfaces.renderkit.html.images.ProgressBarAnimatedBg/DATB/eAFjmPUcAAIeAYI_.jsf");
            }
            Then i changed background-image to
            background-image: url('../images/redbar.png');"
            and it works great!
            The two progressbars in the page became red because rich-progress-bar-completed acts to all progressBar elements.
            But i have to paint one green and another red.
            How can i do this?
            I tried to set the style property directly on progressBar component with no success.
            Thank you,
            Marco

             

            ps: I read your great blog and recommend to my friends!

            • 3. Re: Change rich:progressBar color
              Ilya Shaikovsky Master

              use simple selectors by id or class

              e.g

              #pbClientId .rich-progress-bar-completed {
              }
              

               

              or

              .pbStyleClass  .rich-progress-bar-completed {
              }
              

               

              P.S. thanks

              • 4. Re: Change rich:progressBar color
                Marco M Newbie

                Ilya,

                 

                It works nicely!

                Thank you so much for your support!

                 

                Best regards,

                Marco