Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question

2 Answers 2

up vote 5 down vote accepted

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...

share|improve this answer

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!

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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