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
Respuestas
¿Demasiados anuncios?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;
}
espero que te ayude...
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:
- http://www.cssbasics.com/
- http://sixrevisions.com/css/20_websites_learn_master_css/
- http://www.w3schools.com/css/
En cuanto a las instrucciones !important:
¡Espero que te ayude!
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.