Commit changes to code for skinning, including doc/customization, which

documents the class style naming for OL, although it isn't implemented yet,
so that we have a standard to work against. Update release scripts, tests,
and create a 'theme' directory which will hold theme information as it is
developed.


git-svn-id: http://svn.openlayers.org/trunk/openlayers@1639 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

doc/customization

@@ -0,0 +1,49 @@
+Customizing OpenLayers
+======================
+
+OpenLayers is designed to fit many needs -- fitting in alongside all kinds of
+various applications which are currently in use. 
+
+Currently, OpenLayers supports a 'theme' option when creating a map. This 
+theme option allows you to specify the location of a CSS theme which should
+be included.
+
+A default theme is available as an example in the theme/ directory: the setup
+is:
+
+ * theme/
+ * theme/default/
+ * theme/default/style.css
+ * theme/default/img/
+
+Currently, the OpenLayers code does not support class names, and therefore,
+it is not possible to control many aspects of OpenLayers code with CSS 
+classes. However, with this framework in place, we expect to invest time 
+to make existing features and new features use the CSS theming framework
+where apropriate. 
+
+
+Class Naming
+============
+Elements should have class names which are descriptive of the Javascript
+class from which they come. For example, the main layer switcher element
+in the OpenLayers.Control.LayerSwitcher would be classed:
+
+  olControlLayerSwitcher
+
+This would allow users to add to their style.css class in their theme,
+changing, for example: 
+
+::
+  
+  .olControlLayerSwitcher input {
+    width:10px;
+  }
+
+Sub elements of a particular control can add to the class name:
+
+::
+
+  .olControlLayerSwitcherBaseLabel {
+      color: red;
+  }

lib/OpenLayers/Map.js

@@ -111,6 +111,8 @@ OpenLayers.Map.prototype = {
     /** @type int */
     numZoomLevels: 16,
 
+    /** @type string */
+    theme: null,
 
     /**
      * @constructor
@@ -158,6 +160,12 @@ OpenLayers.Map.prototype = {
         
         //set the default options
         this.setOptions(options);
+        
+        var cssNode = document.createElement('link');
+        cssNode.setAttribute('rel', 'stylesheet');
+        cssNode.setAttribute('type', 'text/css');
+        cssNode.setAttribute('href', this.theme);
+        document.getElementsByTagName('head')[0].appendChild(cssNode); 
 
         this.layers = [];
         
@@ -217,6 +225,9 @@ OpenLayers.Map.prototype = {
         
         this.maxExtent = new OpenLayers.Bounds(-180, -90, 180, 90);
 
+        this.theme = OpenLayers._getScriptLocation() + 
+                             'theme/default/style.css'; 
+
         // now add the options declared by the user
         //  (these will override defaults)
         OpenLayers.Util.extend(this, options);

tests/test_Map.html

@@ -63,9 +63,10 @@
     }
     function test_04_Map_options(t) {
         t.plan(2);
-        map = new OpenLayers.Map($('map'), {numZoomLevels: 6, maxResolution: 3.14159});
+        map = new OpenLayers.Map($('map'), {numZoomLevels: 6, maxResolution: 3.14159, theme: 'foo'});
         t.eq( map.numZoomLevels, 6, "map.numZoomLevels set correctly via options hashtable" );
         t.eq( map.maxResolution, 3.14159, "map.maxResolution set correctly via options hashtable" );
+        t.eq( map.theme, 'foo', "map theme set correctly." );
     }
     function test_05_Map_center(t) {
         t.plan(4);

tools/release.sh

@@ -8,6 +8,7 @@ mkdir /www/openlayers/htdocs/api/$VERSION
 cp OpenLayers.js /www/openlayers/htdocs/api/$VERSION
 cd ..
 cp -a img/ /www/openlayers/htdocs/api/$VERSION
+cp -a theme/ /www/openlayers/htdocs/api/$VERSION
 rm tools/*.pyc
 cd ..
 tar -zvcf OpenLayers-$VERSION.tar.gz OpenLayers-$VERSION