[OpenLayers-Users] overviewmap style properties

[Tim Schaub]

Ok, a few things.

If you do not include a link to the default stylesheet in a page that 
creates an OpenLayers map, then OpenLayers magically appends this 
stylesheet to the page for you.  This bit of magic will bite you if you 
try to customize styles - since your declarations will likely be 
evaluated before the default css loads.

So, step one, add the following to your page head:

<link rel="stylesheet" href="path/to/default/style.css" type="text/css" />

Then, below this, add any custom style:

<style>
     .olControlOverviewMapElement {
         background-color: #FF0000;
     }
</style>

I just did this for the Overview Map example 
(http://openlayers.org/dev/examples/overviewmap.html), and I see, as 
expected, a red background for my overview map.

If you do not see this in IE, please try the following:

In your map options, explicitly set the theme property to null - this 
stops the magic bit from happening where it shouldn't be happening in 
the first place.

var map = new OpenLayers.Map("map_id", {theme: null});

If this works in IE but the previous step did not (adding a link to the 
default stylesheet and customizing style below), then open a ticket with 
this as a bug and write back.

For elements that are styled with css, you should *not* have to use 
!important declarations.  This declaration means ignore any previous and 
subsequent declarations and use this one.  In the above description, the 
default css is loaded first and your custom declarations follow - so 
!important is not necessary.

The !important declaration is useful where style is declared in the 
code.  This exists in many places in the library - it is an acknowledged 
problem waiting for a champion.  The overview map is already styled with 
css.

Again, if you properly link the default style and add your custom style 
after and this still doesn't work in IE, open a ticket and write back.

Tim


Alessio Di Lorenzo wrote:
> Yes... I solved right now with a google search... using !important as 
> you says
> I'm quite new to these "css tricks"... :-) (and I hate IE, again)
> 
> thx to all, alessio
> 
> 
> 
> Lance Dyas ha scritto:
>> Did you try using the css
>> padding 0px important!;
>> background:none important!;
>>
>> ?
>> Alessio Di Lorenzo wrote:
>>> I'm doing some experiments.
>>>
>>> Defining the .olControlOverviewMapExtentRectangle class in my css it 
>>> works well, applying the new style both in FF and IE.
>>>
>>> It seems like my .olControlOverviewMapElement class can't overwrite 
>>> the correspondent class in the default style.css if using IE (I hate 
>>> IE...)
>>>
>>>
>>>
>>>
>>> Alessio Di Lorenzo ha scritto:
>>>  
>>>> Hi and thanks for your answer Christian.
>>>> Your suggestion works well in Firefox :-)
>>>> ...but not with IE.
>>>> I added this css definition to my custom stylesheet:
>>>>
>>>> .olControlOverviewMapElement{
>>>>        -moz-border-radius-bottomleft: 0pt;
>>>>        -moz-border-radius-bottomright: 0pt;
>>>>        -moz-border-radius-topright: 0pt;
>>>>        -moz-border-radius-topleft: 0em;
>>>>        background:none;
>>>>        padding: 0px;           }
>>>>
>>>> on IE6 and IE7 the blue background and the padding values remains 
>>>> active.
>>>> maybe you understand what's wrong?
>>>>
>>>> alessio
>>>>
>>>>
>>>>
>>>>
>>>> Christian López Espínola ha scritto:
>>>>    
>>>>> Just create a new css and link it in your page, or put a style section
>>>>> in your page's head after the inclusion of the OL css..
>>>>> There you override the styles that you want to change.
>>>>>
>>>>> HTH
>>>>>
>>>>> On Sun, May 18, 2008 at 6:10 PM, Alessio Di Lorenzo
>>>>> <alessio.dilorenzo at gmail.com> wrote:
>>>>>  
>>>>>      
>>>>>> Hi list,
>>>>>>
>>>>>> I'm working on the overview map outside the map viewport and 
>>>>>> everything
>>>>>> is going fine but I don't uderstand if it is possible to restyle the
>>>>>> overview map (by deleting, for example, the blue border) without 
>>>>>> working
>>>>>> directly on the style.css file.
>>>>>>
>>>>>> I read the online docs concerning the minRectDisplayClass
>>>>>> http://dev.openlayers.org/releases/OpenLayers-2.6/doc/apidocs/files/OpenLayers/Control/OverviewMap-js.html#OpenLayers.Control.OverviewMap.OpenLayers.Control.OverviewMap 
>>>>>>
>>>>>>
>>>>>> but I don't understand exactly how to use it and if this class is
>>>>>> suitable to reach my purpouse... that is to manage the overview 
>>>>>> map style.
>>>>>>
>>>>>> Could you give me some hints?
>>>>>>
>>>>>> thx in advance, alessio
>>>>>> _______________________________________________
>>>>>> Users mailing list
>>>>>> Users at openlayers.org
>>>>>> http://openlayers.org/mailman/listinfo/users
>>>>>>
>>>>>>             
>>>>>         
>>>>     
>>> _______________________________________________
>>> Users mailing list
>>> Users at openlayers.org
>>> http://openlayers.org/mailman/listinfo/users
>>>   
>>
> 
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
> 
> !DSPAM:4033,48318292209727082231907!
>