diff --git a/doc/customization b/doc/customization new file mode 100644 index 0000000000..f4b5b98aa9 --- /dev/null +++ b/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; + } diff --git a/lib/OpenLayers/Map.js b/lib/OpenLayers/Map.js index 4dcf347f02..9d8bbcc880 100644 --- a/lib/OpenLayers/Map.js +++ b/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); diff --git a/tests/test_Map.html b/tests/test_Map.html index 0ca708d4a0..9cfcf5b510 100644 --- a/tests/test_Map.html +++ b/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); diff --git a/theme/default/style.css b/theme/default/style.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/tools/release.sh b/tools/release.sh index 265b68360d..a8fb43faf1 100755 --- a/tools/release.sh +++ b/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