-
1. ListShuttle images
ssilvert May 23, 2011 9:14 AM (in response to jc_installer)Moved discussion to RichFaces forum.
-
2. Re: ListShuttle images
jc_installer Oct 20, 2011 10:20 AM (in response to 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;
}