There is already an existing way to override the default images using the imageDir attribute. Go to http://www.icefaces.org/docs/v1_6_0/components/index.html and look under selectInputDate.

I have worked out a way to override via CSS style classes without causing glitches in either IE or FF, but there are complications:

• it may break applications already using the existing approach
• if we allow users to use arbitrary class names, then extra attributes are required to specify them
• ...?

What to do?

Right now, the base CSS classname is iceSelInpDate. We allow for the following styles to be rendered:

iceSelInpDate
iceSelInpDateInput
iceSelInpDateMonthYear
iceSelInpDateWeek
iceSelInpDateDay
iceSelInpDateCur

So, what you would be adding, is these four new styles (named something like these), where you refer to the way of setting the images:

iceSelInpDatePrevMonth
iceSelInpDateNextMonth
iceSelInpDateOpenPopup
iceSelInpDateClosePopup

Those would be the classes in xp.css and royale.css where you'd put the CSS that you've made. If they want to change the style of those buttons, then they would use the one existing style attribute. For example: style="myCalendar" which would then require them to set the following style classes in their own CSS file:

myCalendarPrevMonth
myCalendarNextMonth
myCalendarOpenPopup
myCalendarClosePopup

This allows them to not only set the image locations and image names to whatever they want in their CSS, but also to choose to not use images at all, and rather just set a background colour or whatever. This allows mobile apps to save bandwidth by using CSS files with images for desktop browsers, and CSS files without images for mobile browsers.

As for backwards compatibility with the old imageDir attribute, we could always split the rendering into two paths, one that would call the old code if imageDir is set, and one that would use the new code if it's not set. Wouldn't be the prettiest thing, but it would allow us to deprecate the imageDir attribute without messing up anyone's existing apps.

Screenshot of test for overriding button images via CSS.

To test:

In component-showcase\web\inc\components\selectInputDate.jspx, remove the imageDir attribute and add the following attribute:
styleClass="myCalendar"

In component-showcase\web\css\showcase_style.css, add the following CSS code:
.myCalendarMovePrev

.myCalendarMoveNext

.myCalendarOpenPopup

.myCalendarClosePopup