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:
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
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
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.
indicará que WAMP está arrancado.