Saltar la navegación

Estilo hecho a mano

Un Estilo muy sencillo

Hagamos primero el ejemplo más sencillo. Creemos un Estilo que tenga únicamente los archivos requeridos:

  • config.xml, con información sobre el Estilo.
  • content.css, donde se define la presentación general.
  • nav.css, que define el diseño al exportar como sitio web.

Descarga el ejemplo más sencillo (zip). Puedes probarlo instalándolo desde Utilidades - Gestor de Estilos. Como verás, como Estilo deja bastante que desear.

Un Estilo un poco más complejo

Hemos visto los diferentes Estilos y resulta que "INTEF" es el que más se parece al resultado que queremos conseguir, así que vamos a crear un nuevo Estilo partiendo de "INTEF":

  • Vamos a la carpeta de los Estilos y copiamos la carpeta "INTEF".
  • Pegamos la copia en nuestro Escritorio.
  • Llamamos a la nueva carpeta "my-style".
  • La abrimos y modificamos el contenido de su archivo config.xml. Modificamos el nombre, la versión y la descripción:
<?xml version="1.0"?>
<theme >
    <name>My Style</name>
    <version>1.0</version>
    <compatibility>2.0+</compatibility>
    <author>eXeLearning</author>
    <author-url>http://www.exelearning.net</author-url>
    <license>Creative Commons by</license>
    <license-url>http://creativecommons.org/licenses/by/3.0/</license-url>
    <description>My description.</description>
    <extra-head><![CDATA[<meta name="viewport" content="width=device-width, initial-scale=1" />
    ]]></extra-head>
    <extra-body><![CDATA[<script type="text/javascript" src="my_js.js"></script>]]></extra-body>
</theme>
  • Una vez modificado el archivo config.xml, hacemos un zip con todos los archivos de la carpeta (importante: el zip no debe contener ninguna carpeta intermedia, sino directamente los archivos CSS, las imágenes, etc.).
  • Nuestro archivo se llamará my-style.zip. Una vez creado, podemos instalar el Estilo en eXe desde Utilidades - Gestor de Estilos. Cuando lo instalemos también podremos consultar ahí la información introducida en el archivo config.xml.

Modificando el nuevo Estilo

Ya tenemos nuestro propio Estilo (de momento igual que "INTEF"), y podemos empezar a modificarlo a nuestro antojo:

  • En content.css se definen la presentación general de los contenidos y los iconos de los iDevices.
  • Los iconos se llaman icon_*.gif.
  • nav.css define el diseño al exportar como Sitio web, y hace que las páginas se adapten al dispositivo (responsive design).
  • my_js.js contiene el código necesario para ocultar/mostrar el menú de navegación. Es el archivo JavaScript del Estilo. Podría hacer muchas más cosas.
  • El Estilo no incluye, de momento, favicon.ico propio ni usa fuentes personalizadas, pero podría hacerlo.

Consejos

  • No es necesario partir de ningún Estilo, por supuesto: podemos crear un Estilo vacío y construir todo desde cero si queremos, pero partir de otro Estilo nos ahorra mucho trabajo.
  • A la hora de mejorar un Estilo, resulta cómodo exportar como Sitio web y hacer los cambios en la exportación. Una vez terminados, creamos un zip con el Estilo actualizado y lo instalamos en eXe. Vamos trabajando con los diferentes tipos de exportación hasta que logramos el resultado esperado.
  • Debemos guardar siempre una copia (zip) de nuestro Estilo, por si acaso...