6 Replies Latest reply on Oct 11, 2007 7:06 AM by s sfd

    How to do rich:toolBar css styling?

    dsleeper Newbie

      Is there a css stylesheet hidden somewhere inside the richfaces-ui-3.1.1-GA release? I can't find it..

      Basically I need to change a lot of the styling on the rich:toolBar and rich:menuItem components and I don't know how to do it. I'm guessing there is a standard css stylesheet somewhere. Ie. where all class names are defined.

      If not, can someone show me an examples of how to style it? First issue I have is to change the background gradient color.

        • 1. Re: How to do rich:toolBar css styling?
          Sergey Smirnov Master

          no hidden stylesheet file.

          Did you read section 6.43.8 of the Dev. Guide ?

          • 2. Re: How to do rich:toolBar css styling?
            dsleeper Newbie

            Sorry, I missed out on that one. Have only been reading the TLD definitions.

            That clears up alot!

            Thx

            • 3. Re: How to do rich:toolBar css styling?
              dsleeper Newbie

              Ouch.. still having some problems here though.

              I thought the best way to fix the styling in my application was to create a seperate skin properties file for redefining styles of all the components.

              I did this and created a myskin.properties file which is an exact copy of the blueSky.properties file mentioned in this post: http://blog.exadel.com/?p=25

              I also changed this web.xml definition of skin:

              <context-param>
               <param-name>org.richfaces.SKIN</param-name>
               <param-value>myskin</param-value>
              </context-param>
              


              I've now tried to put this file in META-INF/skins folder and in classpath of my project, but in startup of the application this exception is triggered:
              org.richfaces.skin.SkinNotFoundException: Skin with name myskin not found. Am I referencing or placing it wrongly?

              Anyways, I'm not too experienced using either richfaces or CSS in general, but what I need to do is the following:
              1. I need to reskin the toolBar component completely. First of all take away the white background color (The other components can stay the way they are)
              2. I would like to do this via a regular CSS file, but I've tried this with both inline:
              <rich:toolBar style="background-color: white;"> ... </rich:toolBar>


              and via a css styleclass definition:
              .rich-toolbar-exterior
              {
               background-color: white;
               headerBackgroundColor: white;
              }


              To no avail. I cannot seem to get to change the background color on the toolbar.

              So I am a bit lost at the moment:(

              Any help would be highly appreciated

              • 4. Re: How to do rich:toolBar css styling?
                dsleeper Newbie

                I mean switch the blue gradient toolBar background with a white one

                • 5. Re: How to do rich:toolBar css styling?
                  David Spark Newbie

                  Hi, for any background gradients the colours are generated at runtime and assigned as an image. This is done using the background-image style property. If you don't want the gradient and just a block of colour then you need to set the background image to nothing by adding the property:

                  background-image: url();


                  • 6. Re: How to do rich:toolBar css styling?
                    s sfd Newbie

                    Thx!

                    I now use this inline style to get the toolBar to have a white background:

                    <rich:toolBar style="background-image: url(); background-color: white;">