Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I need to use PanZoomBar in my application.

var panZoomBar = new OpenLayers.Control.PanZoomBar();

Also I need to overwrite the PanZoomBar css style. I overwrite the whole bar.

.olControlPanZoomBar {
    top: 38px !important;
    left: 18px !important;
    width: 44px;
    height: 214px;
    background: transparent url(../images/zoombar_bg.png) no-repeat 50% 100%;

But how I can get access and overwrite the default buttons? I mean:

.whatName(Id)ShowIWriteHere {
    some style
share|improve this question
up vote 2 down vote accepted

The default buttons are images, not html/css elements.

Your only options are to edit the images directly. They will be located here: openlayers/theme/default/img

Or you can download the images from the git source directly and then make modifications as you wish here:

Another method would be to use someone else's navigation images, like

Or you can build on top of developmentseed's source vector graphics and create your own!!

Good luck!

share|improve this answer

Your Answer


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.