[OpenLayers-Dev] CSS

Tim Schaub noreply at geocartic.com
Wed Dec 13 13:14:28 EST 2006


> If stylesheets were included as regular old <style> tags, 
> that would make OL a two tag library - but it would also 
> invite all the flexibility of CSS.
> Users who simply wanted to change the border width of a 
> single class could include inline style declarations after 
> the main style tag - overriding the declarations of the default theme.

In case that doesn't make sense, here's a simple example.  Pretend I'm
building an application that uses OL and I only want to change the
background color of the overview map container.

Currently, I would do one of two things:

1) Dig into theme/default/style.css and edit the declarations.  This doesn't
work well if I'm using the same library for more than one application.

2) Copy the entire style.css into mystyle.css, edit the section I'm
interested in, and set the theme property of the main map and the overview
map

  var map = new OpenLayers.Map('map', {theme: 'mystyle.css'});
  var ov = new OpenLayers.Control.OverviewMap({mapOptions: {theme:
'mystyle.css'}});

This doesn't work well if I upgrade OL and there is a new class name that I
don't know about, or the class name of some other element I don't care about
changes.  I'm stuck with my single (outdated) stylesheet.

If the default theme had been added in a regular <style> tag, my application
could simply do (after the default style tag)

<style type="text/css">
  .olControlOverviewMapElement {
    background-color: purple;
  }
</style>

By cascading styles, if I upgrade OL and some other class name changes or a
new one is introduced, my application will still work well.  Also, I can use
the same library with the same default style for any number of applications
- each with their own style.

Hope that makes sense,
Tim




More information about the Dev mailing list