I need to use PanZoomBar in my application.
var panZoomBar = new OpenLayers.Control.PanZoomBar();
map.addControl(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
}
Best Answer
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!