custom Layer Switcher style in openlayers

Question

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

Answer 1

check out openlayers dark theme here.

it has customization about layer switcher too..

UPDATE:

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

Answer 2

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 :

• http://www.cssbasics.com/
• http://sixrevisions.com/css/20_websites_learn_master_css/
• http://www.w3schools.com/css/

Regarding !important instructions :

• http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Hope it helps!