ListShuttle images

[jc_installer]

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

[ssilvert]

Moved discussion to RichFaces forum.

[jc_installer]

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;

                    }