Custom Zoom In and Zoom Out slider icons CSS

Question

I am trying to customize the slider zoom in (dijitSliderIncrementIconV) and zoom out (dijitSliderDecrementIconV) icons but I am not having any luck replacing the default tundra zoom icons with my own images. I am using the CSS below and I am able to change the border, but not the background or background-image. Can someone point me in the right direction.

.tundra .dijitSliderDecrementIconV 
{
    background-image:url(".../images/arrows.png");
    background-position: 0 0;
    width:24px;
    height:24px;
    border: 1px solid #B5BCC7;
    font-size: 1px;
}

.tundra .dijitSliderIncrementIconV 
  {
      
    background-image:url(".../images/arrows.png"); 
    background-position: 0 -74px;
    width:24px;
    height:24px;
    border: 1px solid #B5BCC7;
    font-size: 1px;
}

Thanks, 
Josh

GaneshSolai_Sambandam · Answer

HI Joshua
Would be able to share the link to your web page so that I could see the appearnce of the image of the zoom in and zoom out slider. I need to apply the same thing to my application. so, it would be nice, if you can share. I just wanted to know whether the appearence looks good or not. If it is good, then I can apply the same. Would be able to share the images applied to  your zoom slider.
thanks in advance.

Regards
Ganesh

JoshuaDell · Answer

Thanks for the reply maxwellr!  I finally got it working.  I discovered that I placed my link to the the tundra stylesheet after the following CSS and I needed to move my link to the tundra stylesheet above my other css and stylesheet links.  
.tundra .dijitSliderDecrementIconV, .tundra .dijitSliderIncrementIconV {
    background: url('../images/arrows.png') no-repeat top left;
    border: 1px solid #F0F0F0;
    border-radius: 2px 2px 2px 2px;
    font-size: 1px;
}

.tundra .dijitSliderDecrementIconV 
{
 background-color: #F0F0F0;
    background-position: 0 0;
    width:24px;
    height:24px;
    border: 1px solid #B5BCC7;
    font-size: 1px;
}

.tundra .dijitSliderIncrementIconV 
  {
      
    background-color: #F0F0F0;
    background-position: 0 -74px;
    width:24px;
    height:24px;
    border: 1px solid #B5BCC7;
    font-size: 1px;
}

ReneeMaxwell · Answer

I replaced mine with the following CSS:
.claro .dijitSliderDecrementIconV {
    background: #eee url("../images/zmSlideDn.gif") no-repeat center;
    width:22px;
    height:22px;
    border: none;
}    
.claro .dijitSliderIncrementIconV {
    background: #eee url("../images/zmSlideUp.gif") no-repeat center;
    width:22px;
    height:22px;
    border:none;
}
.claro .dijitSliderDecrementIconH, .claro .dijitSliderIncrementIconH, .claro .dijitSliderDecrementIconV, .claro .dijitSliderIncrementIconV {
    border: 1px solid #B5BCC7;
    border-radius: 2px;
    -khtml-border-radius: 2px; 
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    font-size: 1px;
}

Please note that I'm using the claro theme. You can see an example here:
https://umcspace.missouri.edu/spm/