rumigaculum.com

  • Aumentar tamaño del tipo
  • Tamaño del tipo predeterminado
  • Disminuir tamaño del tipo
Inicio Miscelánea Personalización de la plantilla JA Purity

Personalización de la plantilla JA Purity

E-mail Imprimir PDF

Introducción

La plantilla JA Purity, creada por JoomlArt y cedida a joomla.org para su distribución gratuita en Joomla 1.5, es probablemente una de las plantillas más elegantes y mejor resueltas que podamos encontrar para este gestor de contenidos web. Su aspecto sobrio, su anchura variable y la posibilidad de regular a voluntad el tamaño del texto la hace ideal para la lectura de artículos.

Un día me dije (como ya se han dicho otros antes): ¿por qué no aprovechar esta magnífica plantilla y adaptarla a las necesidades de rumigaculum.com? Y eso fue lo que hice. En las líneas a continuación encontrará el lector una guía, paso a paso, de las modificaciones sufridas por la plantilla original hasta llegar a la que se muestra ahora en su pantalla. Seguro que hallará información útil para la personalización de su propia plantilla JA Purity.

Éstos son los cambios efectuados:

  1. Aumento de la altura del encabezado.
  2. Inclusión del logo de rumigaculum.com.
  3. Eliminación de la imagen de la parte derecha del encabezado.
  4. Cambio del favicon (icono del sitio web).
  5. Creación de una gradación de tamaños de tipo (letra) de diez niveles, en vez de los seis actuales, de manera que la página sea más accesible a personas con problemas de vista.
  6. Personalización de los textos en castellano, ora en la parte administrativa (back-end), ora en el portal (front-end).
  7. Empaquetamiento de la plantilla personalizada en un zip para su instalación en Joomla 1.5.

Referencias

Para producir algunas de las modificaciones anteriores (aunque no todas), me he basado en un tutorial, inacabado a la fecha de este artículo, publicado en joomla.org. De esta referencia he extraído información relativa a la modificación del encabezado, inclusión de un nuevo logo y cambio del favicon. Para el resto de cambios he necesitado buscar profusamente en el código y solicitar ayuda a gente ducha en sitios web, pues mis conocimientos de php y css son nulos. Así y con todo, verá el lector que los cambios siguen una pauta bastante racional, por lo que, una vez efectuados, no parecen tan complicados. Wink

Materia prima y herramental

La materia prima es una plantilla original JA Purity instalable en Joomla 1.5. Puede encontrarla:

  • en el apartado Before you Start del tutorial anterior, a partir de un enlace de nombre tutorial template.
  • descargando el siguiente archivo zip (no puedo garantizar que a fecha de descarga esta versión coincida con la de la fuente anterior).

En lo que respecta a las herramientas necesarias, basta con cualquier editor de texto llano. No obstante, con objeto de encontrar lo más cómodamente posible las líneas de código que vamos a retocar, recomiendo al lector que descargue la versión portable de Notepad++ en PortableApps. Siga estos pasos:

  1. Baje el fichero exe a partir del enlace Notepad++ Portable.
  2. Ejecútelo y siga los pasos que se indican (deberá elegir una carpeta de destino).
  3. En la carpeta de destino encontrará otro exe que abre la aplicación.
Las aplicaciones portátiles no se instalan, y por tanto no tocan el registro de Windows. Cuando quiera eliminarlas, simplemente elimine la carpeta de destino.

Primeros pasos

El fichero con la plantilla base que se habrá descargado se llamará (con mucha probabilidad) ja_purity_tutorial.zip. Para iniciar la personalización le cambiaremos el nombre. Una opción es anteponer las iniciales del autor seguidas de un guión bajo. Podemos prescindir además del segmento _tutorial. En mi caso he rebautizado el fichero como dsm_japurity.zip.

warning Use sólo letras minúsculas en su nombre. Si introduce alguna mayúscula y su alojamiento web es Linux, es probable que tenga problemas más tarde.

Piense en este momento en el nombre de su plantilla. De ahora en adelante, cuando vea dsm_japurity a lo largo del texto, use el nombre que ha elegido usted.

Siga a continuación estos primeros pasos:

  1. Descomprima el zip anterior en una carpeta de idéntico nombre.
  2. En la carpeta raíz (/) rebautice el fichero en-GB.tpl_my_japurity.ini. Pasará a llamarse en-GB.tpl_dsm_ japurity.ini.
  3. En la carpeta raíz (/) elimine el fichero en-US.tpl_my_japurity.ini.
  4. En la carpeta /admin rebautice el fichero en-GB.tpl_my_japurity.ini. Pasará a llamarse en-GB.tpl_dsm_ japurity.ini.
  5. En la carpeta /admin elimine el fichero en-US.tpl_my_japurity.ini.

Hasta ahora hemos hecho dos cosas:

  1. Cambiar el nombre al paquete de idioma inglés británico (en-GB), tanto en la parte de administración (/admin) como en el portal (/).
  2. Eliminar el paquete de idioma inglés americano (en-US), dado que no viene por defecto en la instalación de Joomla y no lo vamos a usar.

Ahora deberemos instalar un paquete de idioma español.

  1. Descárguese el siguiente archivo zip.
  2. Descomprima el archivo anterior.
  3. Copie el archivo /es-ES.tpl_dsm_ japurity.ini a la carpeta raíz (/) de nuestra plantilla.
  4. Copie el archivo /admin/es-ES.tpl_dsm_ japurity.ini a la carpeta /admin de nuestra plantilla.

El paquete añadido sólo funcionará si previamente ha instalado en Joomla el paquete de idioma español de España (visite Joomla Spanish).

A fecha de hoy no he encontrado paquetes de español distintos al de España. No obstante, y en caso de que existan, los cambios son inmediatos: bastará con rebautizar los ficheros que acaba de descargarse de manera acorde al paquete de idioma instalado en Joomla. Por ejemplo: si su Joomla usa español mexicano cambie el nombre de los dos archivos según el modelo: es-MX.tpl_dsm_japurity.ini.

Por último, es usted libre de abrir los ficheros ini anteriores y retocar la traducción a su gusto.

Cambios en templateDetails.xml

Es hora de informar a Joomla de los cambios que acabamos de realizar en los ficheros: hemos rebautizado unos, hemos eliminado otros y hemos creado otros nuevos. Con la aplicación Notepad++ abriremos el fichero templateDetails.xml, dentro del directorio raíz (/). En lo que sigue destacaremos en rojo las partes modificadas. Siga estos pasos:

  1. Reemplace todos los ítems de texto "my_japurity" por "dsm_japurity".
  2. Modifique la línea 11 a: <description>DSM JA Purity Template</description>.
  3. Entre la líneas 325 a 334, modifique el bloque de código a:

     <languages>
         <language tag="en-GB">en-GB.tlp_dsm_japurity.ini</language>
         <language tag="es-ES">es-ES.tlp_dsm_japurity.ini</language>
     </languages>
     <administration>
         <languages>
             <language tag="en-GB">admin/en-GB.tpl_dsm_japurity.ini</language>
             <language tag="es-ES">admin/es-ES.tpl_dsm_japurity.ini</language>
         </languages>
     </administration>

  1. A continuación vamos a efectuar algunos cambios que permitan una mayor gradación en los tamaño de letra (del 1 al 10):
    1. Cambie la línea 370 a: <param name="ja_font" type="list" default="5" label="FONT SIZE" description="FONT SIZE DESCRIPTION">.
    2. Añada este bloque de código entre las líneas 376 y 377:
              <option value="7">7</option>
         <option value="8">8</option>
         <option value="9">9</option>
         <option value="10">10</option>

Cambios en template.css

El archivo template.css se encuentra en el directorio /css. Ábralo con Notepad++. El encabezado original tiene una altura de 80 px (píxeles). Nuestro logo tiene un tamaño de 500 x 120 px por lo que es necesario aumentar la altura de encabezado. Hemos decidido agrandarla hasta los 140 px. Modifique para ello las líneas 927, 932 y 939 como se muestra a continuación:

#ja-headerwrap {
    background: #333333;
    color: #CCCCCC;
    line-height: normal;
    height: 140px;
}

#ja-header {
    position: relative;
    height: 140px;
}

.ja-headermask {
    width: 602px;
    display: block;
    background: url('/../images/header-mask.png') no-repeat top right;
    height: 140px;
    position: absolute;
    top: 0;
    right: -1px;
}

A continuación vamos a introducir las dimensiones y posición de nuestro logo. Modifique el bloque de código entre las líneas 956 y 963 de la siguiente manera:

h1.logo a {
    width: 500px;
    display: block;
    background: url('/../images/logo.png') no-repeat;
    height: 120px;
    position: absolute;
    top: 10px;
    left: 0px;
    z-index: 100;
}

Por útimo añadiremos cuatro tamaños más de tipo, pues en el fichero template.css sólo hay definidos seis. A partir de la línea 53 intercale el siguiente bloque de código:

body.fs7{
    font-size: 16px;
}

body.fs8{
    font-size: 17px;
}

body.fs9{
    font-size: 18px;
}

body.fs10{
    font-size: 19px;
}

Introducción de nuestro logo y del icono del sitio (favicon)

Deberemos copiar nuestro logo en la carpeta /images. Introduciremos dos imágenes: una de nombre logo.png y otra de nombre logo.gif. Sustituiremos así a los dos ficheros existentes.

Nuestro favicon será un fichero de extensión ico, consistente en un icono de tamaño 16 x 16 px. Deberemos llamarlo favicon.ico y lo introduciremos en la carpeta raíz (/), sustituyendo al ya existente.

Cambios en ja.script.js

El fichero ja.script.js está en la carpeta /js. Vamos a modificar muy ligeramente la función switchFontSize (a partir de la línea 83) con objeto de permitir la gradación deseada de tamaños de letra. Sólo tocaremos la línea 87 de la siguiente manera:

if (CurrentFontSize+1 < 11) {

Hemos escrito 11 porque tenemos una gradación de 10 tamaños de letra (del 1 al 10). Si la gradación fuese del 1 al 15 escribiríamos 16, y así en todos los casos.

Cambios en index.php

El fichero index.php se encuentra en el directorio raíz (/). Vamos a desactivar el cambio aleatorio de imágenes en la parte derecha del encabezado. De hecho no queremos que aparezca ninguna imagen. Para ello cambiaremos la línea 112 a:

<div id="ja-header" class="clearfix">

Cambios en params.ini

El fichero params.ini se encuentra en el directorio raíz (/). Queremos que el tamaño de tipo (letra) por defecto sea 5, por lo que cambiamos la línea 4 a:

ja_font=5

Últimos pasos

Ya hemos personalizado nuestra plantilla JA Purity. Lo único que queda es empaquetarla para poder instalarla en Joomla 1.5. Para ello simplemente la comprimimos en un zip del mismo nombre y ¡voilà!, ya es instalable.

Adjunto un archivo zip con mi plantilla personalizada, con objeto de facilitar el seguimiento de todos los pasos que hemos venido dando.

Share