From e45094ea0c3288b7c15030c18b4764c7847fb8e9 Mon Sep 17 00:00:00 2001 From: Schuyler Erle Date: Thu, 22 Mar 2007 11:21:16 +0000 Subject: [PATCH] Permit custom styling by setting theme:null in map.options and including the theme CSS manually. Fixes #460. git-svn-id: http://svn.openlayers.org/trunk/openlayers@2844 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf --- examples/custom-style.html | 53 ++++++++++++++++++++++++++++++++++++++ lib/OpenLayers/Map.js | 13 ++++++---- 2 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 examples/custom-style.html diff --git a/examples/custom-style.html b/examples/custom-style.html new file mode 100644 index 0000000000..79bab7ae1e --- /dev/null +++ b/examples/custom-style.html @@ -0,0 +1,53 @@ + + + + + + + + +
+

If you care to modify the style of any OpenLayers element, include + the default stylesheet as a link and declare any style modifications + below that link. These style declarations can be in other linked + stylesheets or in style tags. In addition, construct your map with + options that include {theme: null}. This will disable the default + method of loading the stylesheet and allow you to declare style rules + in your own linked stylesheets or style tags.

+

This example shows how to declare the font family, size, and color + for the mouse position. Note that only the style keys that you want to + modify (change from the default) need to be specified.

+ + diff --git a/lib/OpenLayers/Map.js b/lib/OpenLayers/Map.js index b471c42ef9..6c544d979b 100644 --- a/lib/OpenLayers/Map.js +++ b/lib/OpenLayers/Map.js @@ -175,11 +175,14 @@ 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); + // only append link stylesheet if the theme property is set + if(this.theme) { + 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 = [];