Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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.


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.