2 Replies Latest reply on Aug 13, 2011 5:57 AM by mohammad-noor

    how can i change the rich:progressBar color and size?

    mohammad-noor
    mohammad-noor Jul 13, 2011 7:51 AM

      Hello All,

      i have a simple application that use rich:progressBar. i am using richFaces 4 & JSF2.

      i want to change the default color of the orange-bar of the progress bar.

      my code is attached (bean + .xhtml file)    .

      i had trying to use the initialClass, progressClass, finishClass, remainingClass on the progress bar and pass to them the style classes(attached ). what happened is as follow:

      -   the remainingClass is work fine(i had changed the reminig section in different color than the passed(progressed) one ).

      -   the finishClass and initialClass change the color of background of the whole line behind the progress bar

       

      Untitled.png

      -the progressClass(change the richFaces orange progress bar) does not work(or i don't know how to change it). i tried to pass .rich-progress-bar-uploaded style class but it does not work.

      ...............................................................................................................................

      also want to ask how can i change the progressBar size(width and high), i tried to add them to style attribute, but it does not work.?

        • 1. Re: how can i change the rich:progressBar color and size?
          ovesper
          ovesper Aug 11, 2011 4:44 PM (in response to mohammad-noor)

          Hi,

           

          regarding color I can provide an approach which works fine if you're using Firefox (AFAIK there is no browser-independent solution available). My xhtml-page references a CSS-file like this:

           

          <h:head>

                  <link rel="StyleSheet" href="css/mystyle.css" type="text/css" />

          </h:head>

           

          The CSS file contains the following content:

           

          .rf-pb-prgs {

              background-image: -moz-linear-gradient(

                  center bottom,

                  rgb(255,255,255) 0%,

                  rgb(128,128,255) 50%,

                  rgb(255,255,255) 100%

              );

          }

           

          Regarding changing the width of progress-bar I found a workaround posted by Pavol Pitonak: http://community.jboss.org/thread/166170

          This bug is reported to JIRA: https://issues.jboss.org/browse/RF-10969

           

          Hope this is helpful for you.

           

          -Oliver

          1 of 1 people found this helpful
            • Actions
          • 2. Re: how can i change the rich:progressBar color and size?
            mohammad-noor
            mohammad-noor Aug 13, 2011 5:57 AM (in response to ovesper)

            Thanks so much Oliver,

            i tried it but it does not work with me; on Firefox and IE .

            but i found a good solution that change the background-image and background-color, which is:

            • adding a !important at the end of each style that you want to apply it. as follow:

             

                

                 .rf-pb-prgs { background-color: red !important;

                                   background-image:url('/WebApplication1/resources/progress.gif')!important;

            }

                 .rf-pb-rmng { width: 500px !important;

                                   height: 100px !important;

                                   background-color:yellow !important; } 

             

            adding the !important to your style gurantee to apply it no matter if this rule appear in CSS document.

             

             

            Regards

              • Actions