El Diseñador de Estilos nos permite crear y editar Estilos sin necesidad de seguir los pasos descritos en la página anterior. En realidad, es la propia herramienta la que se encarga de ese proceso.
Cómo funciona
- Al crear un nuevo Estilo estamos haciendo una copia del Estilo "Base", modificando el nombre de su carpeta y los datos contenidos en el archivo config.xml (nombre, etc.).
- El Diseñador de Estilos nos permite editar nuestro Estilo. Con la herramienta no podremos cambiar todo, por supuesto, pero sí bastantes cosas (colores, imágenes de fondo, etc.).
- Cada vez que guardamos los cambios se sobrescriben los archivos content.css y nav.css.
Cómo consigue que los Estilos se puedan editar
El Diseñador de Estilos consigue recuperar los valores previamente introducidos gracias a comentarios CSS que se encuentran en el código generado. Por ejemplo:
body{
/*bodyColor*/
color:#333333;
/*contentBGColor*/
background-color:#f9f9f9;
}Gracias a los comentarios ("bodyColor" y "contentBGColor") el Diseñador de Estilos consigue recuperar los valores (333333 y f9f9f9) para que podamos editarlos.
Haciendo Estilos compatibles con el Diseñador de Estilos
Los archivos CSS de los Estilos compatibles con la herramienta empiezan así:
/* eXeLearning Style Designer Compatible Style */Tienen un código fijo (no editable desde el Diseñador de Estilos y que no ha sido generado con esta herramienta) que termina aquí:
/* eXeLearning Style Designer */A partir de ahí, se incluirá el código generado por el Diseñador de Estilos (colores, etc. seleccionados por el usuario).
Este código incluye comentarios como los mencionados más arriba. El siguiente código, por ejemplo, hace referencia al color de fondo de la capa con el identificador "content":
#content{
/*contentBGColor*/
background-color:#f9f9f9;
}El Diseñador de Estilos, mediante JavaScript, "lee" ese código y carga el valor f9f9f9 en el campo con el identificador "contentBGColor" de la herramienta.
Creando un Estilo compatible a mano
Si queremos hacer un Estilo compatible con el Diseñador de Estilos, pero diferente (no como el Estilo "Base"):
- Seguiremos el proceso descrito en la página anterior (cuando hicimos un Estilo nuevo partiendo de "INTEF"): haremos una copia de "Base", editaremos su archivo config.xml, generaremos un zip e instalaremos el nuevo Estilo en eXe.
- Modificaremos todo lo que queramos en content.css y nav.css, pero siempre antes de:
/* eXeLearning Style Designer */