How to change CSS style for panZoomBar?

Question

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...

Answer 1

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 .....

Answer 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 https://stackoverflow.com/questions/4254228/openlayers-pan-zoom-bar-modification