Estilos eXeLearning sin barra de navegación y personalización 99lime

¿Cómo personalizar más tus trabajos de eXeLearning?

Como ya escribí hace un tiempo una forma de personalizar los proyectos en eXe, era incluir en las hojas de estilos códigos externos, como los que nos proporcionan desde 99lime.com

A partir de los estilos publicados en EducaMadrid, he personalizado inicialmente dos de estos estilos, para que desapareciera el típico menú y barra de navegación y acercar los proyectos a una navegación con botones, como si fuese la idea de un lanzador (Launcher) de un dispositivo móvil Android. Estos botones para navegar se han construido en una página de menú. De esta forma podemos conseguir unos proyectos más limpios visualmente o algo más "minimalistas".

 Para ello he incluido en estos estilos los códigos CSS, JS que nos proporcionan las webs: www.99lime.com y http://bxslider.com/ para trabajar con sus efectos, dando prioridad en los archivos content.css y nav.css a la programación proporcionada desde esas hojas de estilos incluidas. Como he eliminado (en realidad ocultado) he cambiado algunos parámetros en el archivo nav.css para que la barra de navegación superior, inferior y menú deseparezcan.

Los estilos modificados son:

• EM_AF_MH_full_99lime_NO Nav (Educa Madrid azul Ancho Fijo, Menú horizontal, NO navegación y con estilos 99lime y bxlider).
• EM_AV_MH_full_99lime_NO Nav (Educa Madrid azul Ancho Variable, Menú horizontal, NO navegación y con estilos 99lime y bxlider).

Para descargar:

Puedes descargar estos estilos anteriores desde el siguiente enlace.

Puedes visionar un ejemplo de trabajo con el estilo anterior "Ancho Fijo" en el siguiente enlace.

Puedes descargar los fuentes (elp) de este trabajo en el siguiente enlace.


Importante, para los queráis usar los efectos Java Script, no hace falta para los estilos CSS:
Para usar los efectos Java Script (como carrusel de imágenes de 99lime o bxlider) hay que insertar en cada página el siguiente código html, para ello podemos usar un idevice texto libre, y en él insertamos el código (mirar el ELP fuente de ejemplo):

<p><!-- lime99 files  -->
<script src="jquery.min.js" type="text/javascript"></script>
<script src="kickstart.js" type="text/javascript"></script>
<script src="jquery.easing-1.3.pack.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script src="jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="jquery.bxslider.min.js" type="text/javascript"></script>
<!-- bxSlider CSS file --> <link href="jquery.bxslider.css" rel="stylesheet" /></p>

Por desgracia en la configuración del editor Tymne de eXe, hay algunas variables que eliminan dicho código al validar el editor, para que no suceda esto debes cambiar el archivo "../exe/scripts/tinymce_3.5.7_settings.js"  añadiendo estas líneas de código:

valid_elements : "*[*]",
extended_valid_elements : "pre[*],a[*],#td[*],strong/b,script[src|type]", 

Podeís descargar el archivo "tinymce_3.5.7_settings.js" modificado aquí.

Para las futuras versiones de eXeLearning 2.0+  hay programado un modo "permisivo" de este editor y no hará falta modificar el archivo anterior. Puedes descargar las versiones de prueba del nuevo exelearning en el apartado Actualidad de su web.

#SharedEdu
Saludos y a disfrutar