Customizing Popups in Openlayers

Question

Is it possible to customize the shape of popups in OpenLayers? For example, I am creating a pop-up using the following approach:

var popup = new OpenLayers.Popup.FramedCloud(
                "popup",
                OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                null,
                '<div style="color:#FF0000">'+feature.data.Name + '</br><a href="http://test.url">test.url</a>' + '</div>',
                null,
                true
            );

This creates a popup with the following appearance:

Is it possible to change from the rounded corners and a curved 'connection' to a more square pop-up?

Answer 1

beside all answer you can make your popup as google map popup style. check out this link which will help you to make g-style popup...

popup script codes,

popup images,

and so css...

i hope it helps you..

Answer 2

In your library files, there is img/cloud-popup-relative.png file. You have to customize it in order to get infowindow you like

Answer 3

Just a note, from my recent task - to create custom popup in OpenLayers for WMSGetFeatureInfo.

What I do:

var highlightControl = new OpenLayers.Control.WMSGetFeatureInfo({
    url: 'url to wms', 
    infoFormat: 'text/html',
    queryVisible: true,
    eventListeners: {
        getfeatureinfo: function(event) { 
            this_is_popup_handler_function(event);
        }
    }
}); 

this_is_popup_handler_function(event) {
  alert(event.text);
}

Hope this will help you. :)