[OpenLayers-Users] Please help me to change appearance of map controls with CSS

[John Westwood]

Hi,

i am attempting to change the appearance of the OpenLayers map controls with CSS but I am not getting very far. I wish to achieve something similar to:

http://www.aniwai.com/index.html

and

http://www.longislandindexmaps.org/

I have replacement pngs for the north, south, east, west, the zoom slider, the zoom bar and the plus & minus. I have copied them over the default graphics in OpenLayers/img but they appear the wrong size in the map viewer. Do the replacement controls have to be a specific size? The graphics for my direction arrows are smaller than the default, so when they appear in the map window they are enlarged to the size of the default arrows and therefore look pixelated. I have been partially successful in moving the controls by overriding the CSS present in style.css . But I'm getting a bit confused over which bit refers to what.

I also have a background png for the direction arrows. I have placed this in OpenLayers/theme/default/img and have tried overiding the following CSS:

.olControlPanPanel {
    top: 10px;
    left: 5px;
}  

.olControlPanPanel div {
    background-image: url(img/pan-panel.png);
    height: 18px;
    width: 18px;
    cursor: pointer;
    position: absolute;
}

but I could not get it to work. Does the background image have to conform to a certain size?

If anybody could give me some pointers or if there is some documentation on this that I have not found, I would be very thankful for the help because I'm not getting very far.

Regards,

John Westwood
Great Britain Historical GIS Project