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.