I use this example to customized my layer switcher in openlayers.But I want to change the position,width and height of layer switcher.I know it relates to CSS.I change some numbers to get some idea.But I can't figure out how to do it. Pls give me some tips.Thanks


check out openlayers dark theme here.

it has customization about layer switcher too..


oh sorry due to not reading your que. completely i give only thematic solution...I noticed that newly.

new solution is that change the following style (top):

.olControlLayerSwitcher {
    background-color: transparent;
    color: white;
    font-family: sans-serif;
    font-size: smaller;
    font-weight: bold;
    margin-bottom: 3px;
    margin-left: 3px;
    margin-top: 3px;
    position: absolute;
    right: 0;
    top: 42px;
    width: 20em;


i hope it helps you...


You have to match the right element and the right class with CSS. Here 2 samples :

#layerswitcher.olControlLayerSwitcher {
font-size:14px !important;

.olControlLayerSwitcher .layersDiv {
    background-color:red !important;
    margin: 1em !important;

I'm not sure the !important instruction is required, but keep it at least for the test.

If you're note familiar with CSS, have a look on some tutorials :

Regarding !important instructions :

Hope it helps!


Just use Firebug or any other developer-tool to get the CSS-classname and existing rules that perhaps have to be overridden. Some parts of the Layerswitcher are styled with static images but they can also be set to user defined images by defining the image path or changing the rule that sets the image.

see http://jsfiddle.net/expedio/9m3wv0qx/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.