Question

Background

Using jQuery widgets and OpenLayers widgets on the same web page.

Problem

jQuery has Theme Roller while OpenLayers has its default theme. This results in:

The toolkit controls have different colours. This can be remedied by customizing either OpenLayers or jQuery to match the other, but I’d rather not re-invent the wheel if possible. For example:

• http://dev.openlayers.org/sandbox/itranga/openlayers/theme/css/jquery/
• http://trac.osgeo.org/openlayers/ticket/1800
• https://github.com/developmentseed/openlayers_themes

Question

Where can I find themes for OpenLayers 2.12 and jQuery UI 1.8.18 (that are freely available) that align their colour schemes?

Thank you!

Answer 1

/**
 * Colour customizations for jQuery and OpenLayers widgets.
 */
.ui-dialog-titlebar, div.olControlZoom a {
  background: #0065bd !important;
}

You can use FireDebug (or equivalent) to inspect the UI elements. From there, change the colours of the UI elements with CSS.