Hey Mika- Lehtonen, Mika wrote: > I did some changes a while ago with the following style definition > because I had too long layer names. I didn't have to mess up with the > hardcode. Am I not understanding the question? > > .olControlLayerSwitcher { > font-size: x-small !important; > padding-right: 50px !important; > } > - mika -
You are absolutely right. I was not aware that an !important css declaration takes precedence over styles declared in a style element. But I just read the specs, and I see that it does indeed: The specifity of a selector is calculated as described in [1]. This means that a selector defined in a style element takes precedence over selectors defined in style sheets. But according to [2], important style sheets take precedence over normal style sheets. And a style element is still classified normal, because the only way to make a style important is to add "!important" to the declaration. I would, however, usually avoid using !important style declarations. But in the case of the LayerSwitcher control, OpenLayers does not leave many other options. But the real take-home message of this is: whatever control you want to change appearance of, define css for the .olControl<ControlName> selector. Thanks for sharing! Andreas. [1] http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#specificity [2] http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#cascading-order > > Andreas Hocevar kirjoitti: >> P Kishor wrote: >> >>> is there a way to change the fonts in the layerswitcher control short >>> of fiddling with the hard coded styles in LayerSwitcher.js >>> loadContents method? >>> >> >> Unfortulately not. But patches to move these style definitions to css >> are more than welcome. One hint though: the LayerSwitcher control is >> intended for a simple way to control layers, and is not very >> configurable. If you need functionality beyond that, you may want to >> have a look at one of the libraries that build upon OpenLayers and >> provide richer UI components (e.g. http://geoext.org). >> >> Regards, >> Andreas. >> >> >>> loadContents: function() { >>> >>> //configure main div >>> this.div.style.position = "absolute"; >>> this.div.style.top = "25px"; >>> this.div.style.right = "0px"; >>> this.div.style.left = ""; >>> this.div.style.fontFamily = "sans-serif"; >>> this.div.style.fontWeight = "bold"; >>> this.div.style.marginTop = "3px"; >>> this.div.style.marginLeft = "3px"; >>> this.div.style.marginBottom = "3px"; >>> this.div.style.fontSize = "smaller"; >>> this.div.style.color = "white"; >>> this.div.style.backgroundColor = "transparent"; >>> >>> >>> >>> >>> >>> >> >> >> -- Andreas Hocevar OpenGeo - http://opengeo.org/ Expert service straight from the developers. _______________________________________________ Users mailing list Users@openlayers.org http://openlayers.org/mailman/listinfo/users