ADF 11g - Issue with Custom Skin for CommandButton & InputNumberSlider.

Question

Hi,
Any Help relative will be greatly appreciated !!!
Currenlty we have an requirement to override the UI Skin of ADF to custom one.
Where the page design has some command button & InputNumberSlider(replace with skin of scroll bar)
FYI, we are working with Integrated Weblogic Server, Jdeveloper Version(Build JDEVADF_MAIN.BOXER_GENERIC_081002.2127.5156)
Following is the JSPX, containing style (CSS) with in
==============================================================================================================================
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
xmlns:trh="http://myfaces.apache.org/trinidad/html">
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<af:document binding="#{backingDisplayImageShell.document1}" id="document1">
<af:form binding="#{backingDisplayImageShell.form1}"
inlineStyle='align:center; background-image:url("img/flex-skin.jpg");background-repeat:repeat;'
id="form1">
<style type="text/css">
@platform window, linux {
@agent ie, gecko {
af|inputNumberSlider::minus-button {
background-image: url('../img/skin/horizontal_scrollbar_arrowUp.gif');
af|inputNumberSlider::plus-button{
background-image: url('../img/skin/horizontal_scrollbar_arrowDown.gif');
af|inputNumberSlider::thumb-icon-style{
background-image : url('../img/skin/horizontal_scrollbar_knobLarge.gif');
af|inputNumberSlider::thumb{ 
background-image: url('../img/skin/horizontal_scrollbar_knobLarge.gif');
af|inputNumberSlider:vertical::thumb{ 
background-image: none;
af|inputNumberSlider:vertical::thumb:rtl{ 
background-image: none;;
af|inputNumberSlider:vertical:disabled::thumb{ 
background-image: none;
af|inputNumberSlider:vertical:disabled::thumb:rtl{ 
background-image: none;
af|inputNumberSlider:disabled::minus-button{ 
background-image: none;;
af|inputNumberSlider:disabled::plus-button{
background-image: none;;
af|inputNumberSlider:disabled::thumb{ 
background-image: none;
af|inputNumberSlider::minor-tick{
background-image : none;
</style>
<trh:script>goGetShuffled = function(event) { var source =
event.getSource(); AdfCustomEvent.queue( source, "OnImageClick"
, {}, false); event.cancel(); }; /*function hidePopUpWindow(){
hide(); }*/</trh:script>
<af:spacer height="100"/>
<af:panelGroupLayout layout="horizontal" halign="center"
id="panelGroup4CmdButtons"
inlineStyle="width:45%; height:16px; background-color:transparent;"
clientComponent="true">
<af:commandButton text="Download" icon="/img/download.jpg"
inlineStyle='background-image:url("img/skin/commandButton.gif"); background-repeat:no-repeat; border-color:transparent; border-style:none;'/>
<af:commandButton text="Promote" icon="/img/promote.jpg"
inlineStyle='background-image:url("img/skin/commandButton.gif"); background-repeat:no-repeat; border-color:transparent; border-style:none'/>
<af:commandButton text="Delete" icon="/img/delete.jpg"
inlineStyle='background-image:url("img/skin/commandButton.gif"); background-repeat:no-repeat; border-color:transparent; border-style:none'/>
<af:commandButton text="Zoom" icon="/img/zoom.jpg" partialSubmit="true"
immediate="true"
inlineStyle='background-image:url("GlowingButton_disabledSkin.png"); background-repeat:no-repeat; border-color:transparent; border-style:none'></af:commandButton>
<af:commandButton text="Open" icon="/img/open.jpg"
inlineStyle='background-repeat:no-repeat; border-color:transparent; border-style:none'/>
</af:panelGroupLayout>
<af:spacer height="50"/>
<!-- Scroll Bar for pagination : Start -->
<af:panelGroupLayout id="panelGrpScrollBar" layout="horizontal"
halign="center" valign="top"
inlineStyle="width:60%; background-color:transparent;">
<af:commandImageLink icon="img/skin/horizontal_scrollbar_arrowUp.gif"
action="#{backingDisplayImageShell.previousShelf}"/>
<af:inputNumberSlider simple="true" autoSubmit="true" immediate="true"
binding="#{backingDisplayImageShell.inputNumberSlider1}"
id="inputNumberSlider1"
valueChangeListener="#{backingDisplayImageShell.sliderValueChgLstnr}"
minimum="0" maximum="7" minimumIncrement="1"
contentStyle="width:1100px;" rendered="true"
inlineStyle="text-decoration:none; border-color:transparent; border-style:none; border-width:0px; font-size:0%;"/>
<!-- 0.05 -->
<af:commandImageLink action="#{backingDisplayImageShell.nextShelf}"
icon="img/skin/horizontal_scrollbar_arrowUp.gif"/>
<af:commandLink/>
<af:outputText value="0 - 20"
binding="#{backingDisplayImageShell.outputText1}"
noWrap="true" id="outputText1"/>
</af:panelGroupLayout>
<!-- Scroll Bar for pagination : End-->
</af:form>
</af:document>
</f:view>
<!--oracle-jdev-comment:auto-binding-backing-bean-name:backingDisplayImageShell-->
</jsp:root>
==============================================================================================================================
Thanks
Rani Velu

Answer 1

With the Skin changes provided in CSS is not been reflected.
Since, it seems to have ADF Skin, but not the custom one.
I tried even using this way as well, but not progress.
<af:inputNumberSlider simple="true" autoSubmit="true" immediate="true" styleClass="af|inputNumberSlider::major-tick { border-color: red; }"
id="inputNumberSlider1" inlineStyle="border-color:transparent; border-style:none"
minimum="0" maximum="7" minimumIncrement="1"
contentStyle="width:100px;" rendered="true"
/>