6 votos

Estilo personalizado de Layer Switcher en OpenLayers

Uso este ejemplo para personalizar mi selector de capas en OpenLayers. Pero quiero cambiar la posición, ancho y alto del selector de capas. Sé que tiene que ver con CSS. He cambiado algunos números para tener una idea, pero no logro averiguar cómo hacerlo. Por favor, dame algunos consejos. Gracias

6voto

texai Puntos 178

Echa un vistazo al tema oscuro de openlayers aquí.

también tiene personalización sobre el interruptor de capas.

ACTUALIZACIÓN:

oh lo siento debido a no leer tu pregunta completamente solo te di una solución temática...me di cuenta de eso recientemente.

la nueva solución es cambiar el siguiente estilo (arriba):

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

darktheme

espero que te ayude...

1voto

eplawless Puntos 2076

Tienes que hacer coincidir el elemento correcto y la clase correcta con CSS. Aquí hay 2 ejemplos:

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

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

No estoy seguro de que la instrucción !important sea necesaria, pero mantenla al menos para la prueba.

Si no estás familiarizado con CSS, echa un vistazo a algunos tutoriales:

En cuanto a las instrucciones !important:

¡Espero que te ayude!

0voto

bob-the-destroyer Puntos 138

Sólo utiliza Firebug u otra herramienta para desarrolladores para obtener el nombre de la clase CSS y las reglas existentes que tal vez deban ser anuladas. Algunas partes del Layerswitcher están estilizadas con imágenes estáticas pero también se pueden configurar con imágenes definidas por el usuario al definir la ruta de la imagen o al cambiar la regla que establece la imagen.

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

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X