[OpenLayers-Users] Moving LayerSwitcher position from top-right corner to bottom-left corner

[Adrian Popa]

I studied CSS extensively the past two days, and I sort of managed to 
move it, but I still have two problems:

1. I can't position the layer-switcher-maximize button if I want to add 
an offset measured from the bottom (bottom: 40px). I can only display it 
if I specify an offset from the top - but my map size is not fixed, and 
I would like to have it linked to the bottom of the map. The rest of the 
div and the minimize button are displayed as expected.

Here is my CSS override code:
<style>
      .olControlLayerSwitcher {
         /*  position: absolute;
           top: 25px;
           right: 0px;
         */
           width: 20em;
           font-family: sans-serif;
           font-weight: bold;
           margin-top: 3px;
           margin-left: 3px;
           margin-bottom: 3px;
           font-size: smaller;
           color: white;
           background-color: transparent;

           position: relative !important;
           top: 350px !important;
           right: auto !important;
           bottom: auto !important;
           left: 0px !important;
           /* if I set top: auto !important and bottom: 40px !important, 
the div is no longer drawn on the screen */

      }
      .olControlLayerSwitcher .layersDiv {
          padding-top: 5px;
          padding-left: 0px !important;
          padding-bottom: 5px;
          padding-right: 0px !important;
          background-color: darkblue;
          width: 100%;
          height: auto !important;
     }

     .olControlLayerSwitcher .layersDiv .baseLbl,
     .olControlLayerSwitcher .layersDiv .dataLbl {
          margin-top: 3px;
          margin-left: 3px;
          margin-bottom: 3px;
     }

     .olControlLayerSwitcher .layersDiv .baseLayersDiv,
     .olControlLayerSwitcher .layersDiv .dataLayersDiv {
          padding-left: 10px;
     }

     .olControlLayerSwitcher .maximizeDiv,
     .olControlLayerSwitcher .minimizeDiv {
          top: auto !important;
          right: auto !important;

          position: absolute !important;
          bottom: 40px !important;
          left: 0px !important;
     }


2. It seems that the corner effect in the layer selection div is done by 
having some spans with variable margins - but the problem is - these 
margins are designed only to generate the left rounded corner. I need to 
adapt them to generate the rigth corner with the same margin as the left 
corner. Question is - since there are no classes or ids, can I do this 
without changing the OL API?
Here is how the current code looks like:

<div style="background-color: transparent;">
<span style="background-color: darkblue; display: block; height: 1px; 
overflow: hidden; font-size: 1px; margin-left: 5px; margin-right: 0px; 
border-left-width: 0px; border-right-width: 0px; opacity: 0.75;"></span>

And here's how it is supposed to look like in order to have rounded 
corners in the layer selection div on all sides (set the right-margin to 
the same value as the left-margin):

<div style="background-color: transparent;">
<span style="background-color: darkblue; display: block; height: 1px; 
overflow: hidden; font-size: 1px; margin-left: 5px; margin-right: 5px; 
border-left-width: 0px; border-right-width: 0px; opacity: 0.75;"></span>

I am not quite sure where these divs are set - so that I can override them.

Hope somebody can shed light on these problems,

Regards,
Adrian