Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

How do I change or add the CSS style for panZoomBar?

I.e. to change the panup, pandown, panleft, etc hover in CSS by attaching the class in CSS for those... and which class should I create it in...

share|improve this question

2 Answers 2

Raghu please be specific in your tag selection. Your question is not related to 3 out of 5 tags you have used!

In order to change your panZoomBar style, you will have to use

.olControlPanPanel

class in your css file. The default style is defined in theme/default/style.css file.

Possible duplicate http://stackoverflow.com/questions/4254228/openlayers-pan-zoom-bar-modification

share|improve this answer
    
not for PanPanel i need for PanZoomBar ei .olControlPanPanel .olControlPanNorthItemInactive but when for .olControlPanZoomBar .olControlPanNorthItemInactive is not working –  Raghu Mar 20 '12 at 10:22

i got the answer for my own question partially one month back but i forgot to post it here so that others can make use of it...... i have done the panzoombar changes using css it self with some changes javascript...........

.olControlPanup {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-44px -22px;
  position:relative;
  height:25px;
  width:42px;
  left:5px;
  top:-1px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.olControlPanup:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-44px 0px;
  position:relative;
  height:25px;
  width:42px;
  left:5px;
  top:-1px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.olControlPandown {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-42px -79px;
  position:relative;
  height:25px;
  width:42px;
  left:4px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.olControlPandown:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-42px -101px;
  position:relative;
  height:25px;
  width:42px;
  left:4px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.olControlPanleft {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-24px -39px;
  position:relative;
  height:44px;
  width:25px;
  left:5px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.olControlPanleft:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-2px -39px;
  position:relative;
  height:44px;
  width:25px;
  left:5px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.olControlPanright {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-82px -41px;
  position:relative;
  height:42px;
  width:25px;
  left:5px;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 20px;
}

.olControlPanright:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-104px -41px;
  position:relative;
  height:42px;
  width:25px;
  left:5px;
  border-bottom-left-radius: 15px;
  border-top-left-radius: 20px;
}

.olControlZoomin {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:0px -14px;
  height:24px;
  width:25px;
}

.olControlZoomin:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:0px 167px;
  height:24px;
  width:25px;
}

.olControlZoomout {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-102px -273px;
  height:24px;
  width:23px;
}

.olControlZoomout:hover {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-104px -100px;
  height:24px;
  width:23px;
}

.olControlSlider {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-133px -244px;
  height:9px;
  width:25px;
}

.olControlZoombar {
  background-image:url("../images/ol/zoom-level-buttons.png");
  background-position:-134px -140px;
  width:25px;
}

- JAVASCRIPT

  var panZoomBar = new OpenLayers.Control.PanZoomBar();
  this.map.addControl( panZoomBar );
  panZoomBar.buttons[0].innerHTML = "<div class=olControlPanup ></div>";
  panZoomBar.buttons[1].innerHTML = "<div class=olControlPanleft ></div>";
  panZoomBar.buttons[2].innerHTML = "<div class=olControlPanright ></div>";
  panZoomBar.buttons[3].innerHTML = "<div class=olControlPandown ></div>";
  panZoomBar.buttons[4].innerHTML = "<div class=olControlZoomin ></div>";
  panZoomBar.buttons[5].innerHTML = "<div class=olControlZoomout ></div>";
  panZoomBar.slider.innerHTML = "<div class=olControlSlider ></div>";
  panZoomBar.zoombarDiv.style.backgroundImage = "";
  panZoomBar.zoombarDiv.style.width = "";
  panZoomBar.zoombarDiv.className = "olControlZoombar";

this code is slit lengthier one but it can be made simpler in more ways........

thanks for ur help peoples .....

share|improve this answer
    
Raghu, I'm trying to do something similar. Could you post a full link to the zoom-level-buttons.png file? I'd like to take a look at it. Was it on the Openlayers site somewhere, or? –  user12743 Nov 13 '12 at 20:12

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.