Arreglar la página de contacto no es realmente un 'Desafío' de hecho, sólo requiere conocimientos básicos de Joomla y CSS. En cuanto a software sólo se necesita Firebug de Firefox para revisar el código fuente (si sigues este vínculo descubrirás como conseguir Firebug, además de otra interesantísima aplicación para este plugin de Firefox), un cliente FTP y el propio editor CSS de Joomla.

¿Por qué usar la página de contacto de Joomla cuando hay muchísimos y muy buenos componentes de formulario que se pueden usar? Pueden existir varias razones: No es posible instalar/configurar nuevos componentes, hay que crear varios formularios para varios contactos, en cuyo caso es más fácil usar la extensión original que crear y configurar varios formularios por separado, demostrar un alto grado de conocimiento en Joomla o mi razón favorita, simplemente por que puedo hacerlo

Poner una foto en la página de contacto Joomla

1. Entrar en Componentes » Contactos » Contactos » [nombre de contacto]
2. En la parte inferior hay un dropdown con las imágenes disponibles. Estas imágenes son las que están guardadas en la carpeta /images/stories así que para poner nuestra imagen basta con subirla vía Gestor Multimedia o usando nuestro cliente FTP favorito.
3. No hay ninguna restricción sobre el tamaño de la imagen en cuestión pero se acostumbra usar una imagen tipo carnet.

Cambiar los íconos de los campos de información

1. Los íconos que se pueden cambiar son los correspondientes a los siguientes campos:
   • Dirección real (calle)
   • Correo electrónico
   • Teléfono
   • Celular
   • Fax
   • Información miscelánea
2. Como en el caso anterior hay una lista de íconos disponibles, con la diferencia de que estos están guardados en /images/M_images 
3. Nuevamente se puede usar el Gestor Multimedia o un programa FTP para copiar los archivos respectivos

Modificar CSS

Los íconos nativos de Joomla miden 16x16px y si se los reemplaza por otros más grandes es probable que se descuadre toda la información pero eso se arregla modificando el CSS para que se ajuste al nuevo tamaño. Aquí es donde se ve el poder de Firebug. Una vez instalado,aparece en el menu contextual de la página (Clic derecho en windows) una nueva opción: 'Inspeccionar elemento', que al seleccionarla divide la pantalla en dos partes: una vista de código y la vista normal pero resaltando el elemento seleccionado, de esta forma se puede encontrar rápidamente cuáles elementos hay que cambiar.

Para el ejemplo yo usé íconos de 64x64, aumente la letra a 14px negrita y alineé el texto para que aparezca a la mitad del ícono en vez del tope de la imagen. Para modificar el CSS se puede entrar a Gestor de plantillas » Nombre de plantilla » Editar CSS » template.css, el código escrito fue:

/*FORMULARIO DE CONTACTO*/
/*ESTAS CAJAS CLASE .icon CONTIENEN LOS ICONOS
MODIFICARLO SEGUN EL TAMAÑO DE LAS NUEVAS IMAGENES*/
div.contact-address div.icon, div.email div.icon, 
div.telephone div.icon, div.mobile div.icon {
float: left;
width: 64px;
}

/*ESTAS CAJAS ESTABAN DAÑANDO LA ALINEACIÓN 
Y NO TENÍAN NINGUNO CONTENIDO QUE MOSTRAR 
ASÍ QUE ES MEJOR "ELIMINARLAS"*/
div.surround div.suburb div.icon, div.surround div.country div.icon 
{display: none;}

/*CADA CLASE .data ES EL TEXTO DEL CONTACTO 
QUE ESTÁ AL LADO DE LOS ELEMENTOS .icon 
AUMENTAR EL MARGEN SUPERIOR PARA QUE 
APAREZCA A LA MITAD DEL ÍCONO*/
div.surround div.email div.data, 
div.surround div.telephone div.data, div.surround div.mobile div.data 
{
margin-top: 22px;
}

/*CAMBIAR LA LETRA DEL TEXTO DEL CONTACTO*/
div.data {
font-weight: 600;
font-size: 14px;
}

Se puede ver el formulario de contacto terminado siguiendo el botón 'Contacto' en el menú principal.

---