Este documento proporciona instrucciones para realizar cinco modificaciones en las plantillas de Joomla 1.5: 1) eliminar un mensaje de bienvenida, 2) eliminar un logo, 3) modificar una imagen de cabecera, 4) reducir el alto del área de la imagen de cabecera, y 5) centrar el texto del nombre del sitio. Explica dónde encontrar los archivos relevantes y qué líneas de código modificar para lograr cada cambio deseado.

1. 1/30
Joomla 1.5: modificaciones en
las plantillas (II)

2. 2/30
1. Eliminar mensaje
“Bienvenidos a la
portada”

3. 3/30
Lo que quiero hacer
Queremos eliminar este mensaje

4. 4/30
¿Cómo lo hago?
● En Menús/ Menú Principal,
– marcamos NO en “Mostrar el título de la página”

5. 5/30
Resultado

6. 6/30
2. Eliminar logo que
acompaña al
nombre del sitio

7. 7/30
Lo que quiero hacer
Queremos eliminar este logo

8. 8/30
¿Cómo lo hago?
● La plantilla con la que estamos trabajando permite ocultar
el logo desde su configuración
● Para acceder a ello
– backend, Extensiones/ Gestor de plantillas,
pinchamos sobre la plantilla
– Marcamos SÍ en “Hide Logo” (ocultar logo)

9. 9/30
Resultado

10. 10/30
3. Modificar imagen
de cabecera

11. 11/30
Lo que quiero hacer
Queremos modificar esta imagen

12. 12/30
¿Cómo lo hago?
● Esta imagen está ubicada bajo la carpeta images de
nuestra template
● Simplemente renombramos esta imagen (para no
perderla)
● Creamos una imagen a nuestro gusto, asegurándonos de
que tiene el mismo nombre que la original
● IMPORTANTE: Asegúrate también de que tiene
exactamente el mismo tamaño

13. 13/30
¿Cómo lo hago?
Carpeta de imágenes de
nuestra template
Copiamos aquí la imagen
que nos interese
justo con el mismo nombre que
la original

14. 14/30
Resultado

15. 15/30
Resultado

16. 16/30
Resultado
● No he respetado el tamaño de la imagen, ahora es más
estrecha
● Vamos a hacer algunos cambios más para mejorar el
aspecto

17. 17/30
4. Reducir alto del
área de la imagen de
cabecera

18. 18/30
Lo que quiero hacer
Eliminar espacio sobrante

19. 19/30
¿Cómo lo hago?
● El css de mi plantilla es quien controla los anchos y altos
de las áreas en las que se divide mi sitio web
● En el sistema de archivos, bajo la carpeta templates de mi
sitio Joomla, accedemos a la carpeta contenedora de la
plantilla que tenemos seleccionada, y luego a la carpeta
css
● Editamos el archivo template.css

20. 20/30
¿Cómo lo hago?
Ruta css de la plantilla
que estoyusando
Fichero .css que debemos editar

21. 21/30
¿Cómo lo hago?
● Aspecto de template.css

22. 22/30
¿Cómo lo hago?
● Desde el navegador, mostramos el código fuente de
nuestra página, e intentamos identificar qué región es la
que determina el alto de la imagen de cabecera

23. 23/30
¿Cómo lo hago?
● Sospecho que es el div h_area el que contiene esta
imagen de cabecera.
● En el fichero template.css, buscamos h_area y probamos
a modificar su altura
● De 338px a 270px

24. 24/30
Resultado
Hemos eliminado el
espacio de separación

25. 25/30
Resultado
● No he respetado el tamaño de la imagen, ahora es más
estrecha
● Vamos a hacer algunos cambios más para mejorar el
aspecto

26. 26/30
5. Centrar el texto
del nombre del sitio

27. 27/30
Lo que quiero hacer
Centrar el título

28. 28/30
¿Cómo lo hago?
● De nuevo tendremos que modificar el fichero template.css
● Desde el navegador, mostramos el código fuente de
nuestra página, y localizamos dónde se muestra el título
de mi sitio web.
● En mi caso, busco el texto “Maru Design”

29. 29/30
¿Cómo lo hago?
● Abrimos nuestro fichero template.css, y buscamos la clase
logo.
● Modificamos para que la alineación del texto sea centrada
– Añadimos la línea text-aling: center;

30. 30/30
Resultado
El texto aparece centrado