Modificar diseño - a partir de la plantilla ja_purity

Al instalar Joomla desde joomlaspanish.org por defecto viene instalado con la plantilla JA_Purity que nos puede servir muy bien para modificarla.

Tutoriales recomendables:

• como crear una plantilla desde cero: http://www.siteground.com/tutorials/joomla15/joomla_create_template.htm
• plantilla básica:
  http://www.joomlavogue.com/cms/component/option,com_docman/task,doc_view/gid,13/
• como modificar JA_Purity:
  http://docs.joomla.org/Tutorial:Customising_the_JA_Purity_template

Parámetros editables en plantilla

• tipo logo >> (escoger entre texto o imagen. El texto lo toma de 'logo texto y slogan'. La imagen de /images/logo.gif - definido en templates h1.logo) que aparecerá en el HEADER
• logo Texto .. para el HEADER
• slogan .. para el HEADER
• horizontal navigation type >>> OJO: la versión actual no contempla MENU HORIZONTAL
• template font size >> tamaño de los textos (entre 3 y 5 está bien)
• template width >> ancho de la página (permite todos los anchos, desde fluido a definido en pixels. Wide es 950, Narrow es 800. También en porcentaje de pantalla.)
• header theme: colores de fondo de cabecera y pie.
• background theme: lighter (columna izquierda aparece como grisaceo), purewhite (todo blanco)
• primary elements: son los sufijos de los módulos (_red, _green, _blue, _black, _text) para los colores de cabecera de menú, titulos, enlaces,...
• right modules collapsible function

CSS y Areas de la plantilla JA_Purity

Las CSS usadas son

• templates/system/css/system.css > para cosas que llevan 'system'
• templates/system/css/general.css > button2, tooltip, caption, calendar
• templates/ja_purity/css/template.css >> TODO
• templates/ja_purity/css/menu.css >> ja-container2 (menu vertical)
• templates/ja_purity/css/sosdmenu.css >> ja-mainnav, (menu horizontal)
• templates/ja_purity/styles/elements/black/style.css >> a. ja-container2 ul, div.modulexxx h3 (ELEMENTOS). Hay otros estilos: blue, red green

A tener en cuenta que en index.php se añaden parámetros a ciertos estilos definidos en template.css para definir el ancho:

Para comprender esta plantilla es necesario revisar los ficheros que definen la estructura y estilo de esta plantilla: templates\ja_purity, los cuales son editables desde la misma plantilla con los botones:

• EDITAR HTML: index.php - relación entre divisiones y módulos
• EDITAR CSS: css\template.css - estilos
• También hay estilos seleccionables como parámetros de la plantilla en \styles.. background (lighter, purewhite), elements (black, blue, green, red), header (blue, green) >> se pueden añadir de nuevos en la carpeta y serán seleccionables como parámetros.
• Los menus se editan en css/menu (menu vertical) y css/ja-sosdmenu (venu horizontal)

A tener en cuenta (notas de CSS)

• clearfix es un hack CSS para hacer que un elemento de bloque que contiene elementos flotantes en su interior se adapte a la altura de estos sin tener que introducir la altura manualmente

Los colores de fondo se pueden modificar en los css. ver la distribución en http://joomlabcn.blogspot.com/2010/08/japurity-modificar-colores-de-fondo.html

Posiciones

Estas son las posiciones, donde en cada una de ellas irán uno o mas módulos.
A parte está el 'mainbody' en medio, donde va el componente principal que muestra los artículos.

• hornav - MENU HORIZONTAL
• breadcrumbs
• banner
• left - mod_mainmenu (MENUS VERTICALES: Menu Principal, Recursos, Conceptos Clave, Menu de Usuario, Paginas de Ejemplo)
• right
• top - mod_newsflash - bottomspotlight
• user1 - mod_lastnews - bottomspotlight
• user2 - mod_mostread - bottomspotlight
• user3 - mod_mainmenu (Menu Principal / TOP MENU = MENU HORIZONTAL - footer
• user4 - mod_search - header
• user5 - NADA - bottomspotlight
• footer - mod_banners y mod_footer - footer
• syndicate
• debug

Aqui van las divisiones y su asociación

• La asociación de módulos con posiciones se indica con el Module Manager

ja-wrapper: envoltorio de todo lo que está en el BODY

HEADER

• ja-header: muestra aleatoriamente imágenes de ja_purity/images/header
• ja-headermask: no sirve
• segun la selección se puede mostrar uno de los dos casos: images\logo.gif o texto y slogan
• ja-search: muestra los módulos de user4 (mod_search y mod_jflanguageselection)

Modificaciones del header

• El ancho se decide en como parámtero de plantilla: Template Width
• Las 3 letras A para cambiar el tamaño, para quitarlo > comentar JA_TOOL_FONT
• La altura se decide en template.css ja-headerwrap y ja-header
• El color de fondo de izquierda y derecha en ja_headerwrap
• mod_search por defecto está en USER4 al lado de las banderas. Se hace un lío si hay search y banderas. Poner el search por ejemplo en RIGHT.

Para cambiar el logo

• ponerlo en images/logo.gif o logo.png
• modificar en template j1.logo.a indicando el nombre y tamaño.

MAIN NAVIGATION

ja-mainnavwrap: envoltorio

• ja-mainnav: muestra el módulo de hornav

El menu horizontal no viene activo

• Para activarlo: http://forum.joomla.org/viewtopic.php?f=541&t=301006#p1351145
• Para centrarlo: http://docs.joomla.org/JaPurity_how_to_center_hornav
• ojo con el background que queda en blanco.

CONTAINER

ja-containerwrap, ja-containerwrap2, ja-container, ja-container2, ja-mainbody

CONTENT

ja-contentwrap, ja-content: envoltorios

• tipo message
• ja-pathway: módulo breadcrumbs
• tipo component
• ja-banner: módulo banner

LEFT COLUMN

• ja-col1: módulos de left (mod_mainmenu: menu principal, recursos, conceptos clave, menu de usuario, paginas de ejemplo - es decir diferentes menus; mod_stats, mod_login, mod_archive, mod_sections, mod_related_items)

RIGHT COLUMN

• ja-col2: módulos de right (mod_newsflash, mod_poll, mod_banners - patrocinadores, mod_whose_online, mod_random_image)

BOTTOM SPOTLIGHT

ja-botslwrap, ja-botsl: envoltorios

ja-box??:

• módulos user1 (mod_latestnews)
• módulos user2 (mod_mostread)
• módulos top (no hay ninguno)
• módulos user5 (no hay ninguno)

FOOTER

ja-footerwrap, ja-footer: envoltorios

• ja-footnav: módulos user3 (mod_mainmenu - Menu Principal)
• copyright: módulos footer (mod_banners - anuncios, mod_footer)
• ja-cert: módulos syndicate (mod_syndicate)

para modificar el footer, y personalizarlo de manera que salga solamente una barra con un texto que nosotros deseemos

• en el gestor de módulos crear un mod_custom (html) y asociarlo a footer
• en este mod_custom crear el html necesario, también en cada idioma
• en index.php comentar los módulos que no deseamos (también deshabilitarlos en el Gestor de Módulos)
• en template.css modificar ja-footer para ajustarlo al tamaño y colores requeridos.