Crear tu propia plantilla para Joomla 2ª parte

Seguimos con la tarea de crear tu propia plantilla para joomla. recordemos que lo último que hemos hechos es organizar nuestras carpetas, empezamos la maquetación con HTML5 y CSS3 , y creamos templateDetails.xml para que joomla sepa su posición.

Maquetación HTML + CSS

Podemos usar cualquier editor de código HTML y CSS.

Personalmente prefiero Dreamweaver por su facilidad para gestionar los sitios y ayudas visuales, pero realmente con notepad++, sublime, etc, es posible.

Una vez terminemos nuestra maquetación, tendremos que transformar el archivo a PHP, ya que es el formato que utiliza Joomla y para poder verlo, necesitamos un servidor local, por ejemplo, Xamp server. Nada de trabajar directamente sobre lo que ven los usuarios como por desgracia vengo comprobando hacen muchas empresas.

Lo instalaremos en nuestro ordenador y cuando llegue el momento, lo usaremos.

Crear tu propia plantilla para joomla, lo primero: templateDetails. xml

plantillas Joomla 6

Tras maquetar la página en HTML y CSS, en sus últimas versiones preferentemente, rellenamos el archivo templateDetails.xml.

En este archivo tendremos que poner toda la información relacionada con nuestra plantilla como el nombre de la plantilla, la fecha de creación, los datos del autor, las carpetas y los archivos que contiene la plantilla, y las posiciones donde colocaremos los módulos que usaremos en nuestro sitio.

Contenido del archivo templateDetails.xml

  1. Tipo de documento:
    tipo de documento para crear tu propia plantilla para joomla
  2. Entre las extensiones pondremos todo el contenido de la web.
  • La información del tema, autor etc.
    description
    Pongo los datos de mi antigua web, construida en Joomla.
  • A continuación, empezamos con lo más interesante, los enlaces a las carpetas de imágenes, css, etc. Es tener muy presente cómo funcionan las rutas en el site, templateDetails.xml se encuentra al mismo nivel que index.php, las carpetas img, fonts, css. Por lo que si tu estructura de carpetas es distinta, debes tenerlo aquí en cuenta.
    files
    Entre las etiquetas </ ponemos las rutas a los archivos , y de las carpetas .
    Insisto en las rutas, que es el fallo principal por el que fallan las visualizaciones en las webs.
  • Y por último, ponemos lo que más juego nos da al crear las plantillas y en sus renovaciones: Las posiciones –> La estructura de la web.
    positions
  • Vemos que toda la información se encuentra entre las etiquetas y luego una a una. Este es el orden en el que se mostraran,  aunque no siempre se muestran todas las partes, por ejemplo, el menú móvil no se verá cuando se vea el menú principal. Es sólo las prioridades de visualización.

Arrancamos XampServer, antes hemos tenido que volcar nuestra maquetación inicial en HTML5 en las carpetas correspondientes: img, css, js .

Recordar optimizar las imágenes.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s