2 Replies Latest reply on Oct 20, 2011 10:20 AM by jc_installer

    ListShuttle images

    jc_installer Newbie

      Hi,

       

      I'm using some ListShuttle components. I'm able to change the fonts of the source and target cells, but I would like to change the copy and remove button images.

       

      I'm changing the style on the page using this:

       

      <style>

       

      .rich-shuttle-source-cell,

      .rich-shuttle-source-cell-selected,

      .rich-shuttle-source-cell-active,

      .rich-shuttle-target-cell,

      .rich-shuttle-target-cell-selected,

      .rich-shuttle-target-cell-active{

      font-family: Verdana;

      }

       

      .rich-shuttle-controls {

      paddle-right: 20px;

      paddle-left: 20px;

      }

       

      </style>

       

      but I don't know how to redefine the image. It seems the classes are rich-list-shuttle-button-..., but which property should I change? Could you show me an example?

       

      Thank you

        • 1. ListShuttle images
          Stan Silvert Master

          Moved discussion to RichFaces forum.

          • 2. Re: ListShuttle images
            jc_installer Newbie

            It seems that the attribute src of an image cannot be overridden using CSS because it's not a style.

             

            I've added JavaScript to update the src of the ListShuttle components:

             

                  function changeSrcImgs() {

                                          var patternCopy = /ICONCOPY/;

                                          var patternRemove = /ICONREMOVE/;

                                          var newCopy="/path.../images/copy.gif";

                                          var newRemove="/path.../images/remove.gif";

                                          var imgs = document.getElementsByTagName('img');

                                          var oldSrc;

             

                              for (i = 0; i < imgs.length; i++){

             

                              oldSrc = imgs[i].src.toUpperCase();

             

                                       if (oldSrc.search(patternCopy) != -1){

                                                      imgs[i].src = newCopy;

                                       } else if (oldSrc.search(patternRemove) != -1) {

                                                      imgs[i].src = newRemove;

                                       }

                        }

                 };

             

            This will update all the src properties of any image that contains iconcopy or iconremove. You can also add another pattern to check for disabled images.

             

            I've needed some changes on other styles, so that these are the images that are always shown, no matter the state of the cells. Maybe some of them are not necessary, but here they are in case someone finds it useful:

             

                  .rich-list-shuttle-button-content {

                                          margin-bottom: 3px;

                                          padding-right: 20px;

                                          padding-left: 20px;

                                }

             

                                .rich-list-shuttle-button,

                                .rich-list-shuttle-button-disabled,

                                .rich-list-shuttle-button-light,

                                .rich-list-shuttle-button-press,

                                .rich-list-shuttle-button-selection,

                                .rich-shuttle-control-disabled,

                                .rich-shuttle-control-copy,

                                .rich-shuttle-control-remove {

                                          padding: 0px;

                                          border-style: none;

                                          border-width: 0px;

                                          background-color: transparent;

                                          background-image: none;

                                }

             

                                .rich-list-shuttle-button-content img {

                                          margin: 0px;

                                          padding: 0px;

                                }