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

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: https://github.com/openlayers/openlayers/tree/master/theme/default/img

Another method would be to use someone else's navigation images, like https://github.com/developmentseed/openlayers_themes/tree/master/dark

Or you can build on top of developmentseed's source vector graphics and create your own!! https://github.com/developmentseed/openlayers_themes/tree/master/dark_src

Good luck!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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