ADF SelectInputDate skin questions

Question

Hi everyone,
i'm creating a skin for my adf project and i have some questions about the selectinputdate component:
- Can i change the navigation icons in calendar with the af|selectInputDate::nav-link selector (and how)?
- How can i changed de background color for the window tha display the calendar component, i play with selectInputDate selectors without success.
- How can i changed days numbers colors, i play with af|selectInputDate::content selector without success (i can change only inactives days colors).
Thanks, Eduardo.

Answer 1

Hello, Here's the answers to your questions:
- Can i change the navigation icons in calendar with the af|selectInputDate::nav-link selector (and how)?
The best way to change the navigation icons is with the 'icon' keys: next-icon and prev-icon. You can use an <img> or text. The default in the simple skin is text : "<" and ">". If you want to use an img instead, then you'd skin it like this:
af|selectInputDate::next-icon {
content: url("...");
You could use background-image on the ::nav-link, but it is a CSS problem with making enough visual space to show up the image. For example, we have created aliases in our 11g ADF Faces components for clickable images and to make them visible, we had to add padding, etc.
.AFClickableImageAnchor:alias {
font-size: 14px;
padding-right: 16px;
margin-left: 1px;
margin-right: 1px;
background-repeat: no-repeat;
background-position: bottom left;
@agent ie {
.AFClickableImageAnchor:alias {
display: inline-block;
- How can i changed de background color for the window tha display the calendar component, i play with selectInputDate selectors without success.
You can't style a popup's background color dependent of what component is in it.
- How can i changed days numbers colors, i play with af|selectInputDate::content selector without success (i can change only inactives days colors).
You c an use af|sID::content A {color: aqua}.
We don't have a hook in place that you can use that doesn't expose HTML. We'd rather you not use HTML in the selectors, but if that's all you have, then there's no way around it.
Also, you can use Firebug and disable the content compression to help you with skinning.
Content compression compresses the styleclasses from their full name to short names, like x10. Viewing the full name makes skinning easier, but it should only be done during skinning development because of performance reasons -- the rendered pages will be larger with content compression turned out.
For turn off content compression in 10.1.3, you set in web.xml the
oracle.adfinternal.view.faces.DISABLE_CONTENT_COMPRESSION to true
- Jeanne