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
_______________________________________________
Users mailing list
[email protected]
http://openlayers.org/mailman/listinfo/users

Reply via email to