Joomla 1.5: modificaciones en las plantillas (II)
Upcoming SlideShare
Loading in...5
×
 

Joomla 1.5: modificaciones en las plantillas (II)

on

  • 1,569 views

 

Statistics

Views

Total Views
1,569
Views on SlideShare
1,211
Embed Views
358

Actions

Likes
0
Downloads
8
Comments
0

10 Embeds 358

http://fpkanarias.blogspot.com.es 264
http://fpkanarias.blogspot.com 58
http://fpkanarias.blogspot.mx 24
http://fpkanarias.blogspot.com.ar 5
http://fpkanarias.blogspot.com.br 2
http://www.fpkanarias.blogspot.com.es 1
http://fpkanarias.blogspot.jp 1
http://fpkanarias.blogspot.co.il 1
http://fpkanarias.blogspot.fr 1
http://fpkanarias.blogspot.kr 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Joomla 1.5: modificaciones en las plantillas (II) Joomla 1.5: modificaciones en las plantillas (II) Presentation Transcript

  • 1/30Joomla 1.5: modificaciones en las plantillas (II)
  • 2/301. Eliminar mensaje “Bienvenidos a la portada”
  • 3/30Lo que quiero hacer Queremos eliminar este mensaje
  • 4/30 ¿Cómo lo hago?● En Menús/ Menú Principal, – marcamos NO en “Mostrar el título de la página”
  • 5/30Resultado
  • 6/302. Eliminar logo que acompaña al nombre del sitio
  • 7/30Lo que quiero hacerQueremos eliminar este logo
  • 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/30Resultado
  • 10/303. Modificar imagen de cabecera
  • 11/30Lo que quiero hacer Queremos modificar esta imagen
  • 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/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/30Resultado
  • 15/30Resultado
  • 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/30 4. Reducir alto delárea de la imagen de cabecera
  • 18/30 Lo que quiero hacerEliminar espacio sobrante
  • 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/30 ¿Cómo lo hago?Ruta css de la plantilla que estoyusando Fichero .css que debemos editar
  • 21/30 ¿Cómo lo hago?● Aspecto de template.css
  • 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/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/30Resultado Hemos eliminado el espacio de separación
  • 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/30 5. Centrar el textodel nombre del sitio
  • 27/30Lo que quiero hacer Centrar el título
  • 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/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/30Resultado El texto aparece centrado