Creating a new OpenLayers theme

There can be situations where we desire a completely different look for the OpenLayers theme.

As we mentioned in the chapter's introduction and other recipes (Understanding how themes work using the img folder and Understanding how themes work using the theme folder), OpenLayers theming is based on images and CSS files:

In this recipe we are going to see how we can create a new OpenLayers theme based on the default theme we can find in the theme/default folder. We are going to change some aspects of the most common controls, such as scale or scale line, overview map, or layer switcher.

Getting ready

To create a new theme, we need to create a replica for the content of the img and theme folders of the OpenLayers distribution. Both folders contain images to be used in controls, so it is easy to see why a good graphic design is important to create a good theme.

The theme called green theme, used in this chapter, is divided into folders recipes/data/green_img and...