topic Re: Custom Zoom In and Zoom Out slider icons CSS in ArcGIS JavaScript Maps SDK Questions

Custom Zoom In and Zoom Out slider icons CSS

JoshuaDell — Wed, 11 Apr 2012 16:22:53 GMT

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

Re: Custom Zoom In and Zoom Out slider icons CSS

ReneeMaxwell — Sat, 11 Dec 2021 18:00:04 GMT

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/

Re: Custom Zoom In and Zoom Out slider icons CSS

JoshuaDell — Sat, 11 Dec 2021 18:00:07 GMT

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;
}

Re: Custom Zoom In and Zoom Out slider icons CSS

GaneshSolai_Sambandam — Wed, 11 Dec 2013 08:02:19 GMT

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