[OpenLayers-Users] changing fonts in the layerswitcher

[Andreas Hocevar]

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.