OpenLayers PanZoomBar css style

Question

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
}

Answer 1

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!