Home Tutoriales Plantillas Banners mejorados con imágenes y template overrides del módulo banner

Banners mejorados con imágenes y template overrides del módulo banner

icoDetalles Tutorial - Nivel : Intermedio - Avanzado, Versión Joomla : 1.5.x, Formato : texto y video.
En este tutorial veremos cómo mejorar el módulo banner de joomla, implementando imágenes en lugar de texto y además utilizando la técnica de template overrides para mostrar una imagen adicional de: anuncie aqui.

 

En este primer video se explica la generalidad del ejemplo así como también el paso del texto a imágenes

Suscríbete a monitojoomla en youtube para que puedas ver todos los videos publicados

 

En este segundo video se mejora la apariencia de las imágenes aplicando CSS y la técnica de template overrides en el modulo banners

Suscríbete a monitojoomla en youtube para que puedas ver todos los videos publicados

 

Resultado Final

resultado final

 

Cambiamos el texto por imágenes

Después de haber creado las categorías, los clientes y los anuncios en texto, procedemos a cambiar el texto de los anuncios a imágenes, borramos el código del anuncio personalizado y ubicamos las imágenes dentro de la carpeta /images/banner para poder seleccionarla, tal como se muestra en la imagen

cambio texto por imagenes

 

Modificamos el archivo de estilos

Posteriormente modificamos los estilos para que se muestren las imágenes en columnas, en este caso particular se ajusta a dos columnas debido a la dependencia con el contenedor principal right (el contenedor es de aproximadamente 300px de ancho por lo que sólo entran dos imágenes). El siguiente código debe ser agregado al archivo de estilos de nuestro template.

.bannergroup{
 margin-left: 15px;
}

.banneritem{
 float: left;
 margin: 5px;
}

.clear{
 clear:both;
}

 

Utilizando la técnica de Template overrides para el módulo banner

Esto se realiza para conseguir que el módulo de banner complete una imagen adicional llamada: anuncia aquí. Copiamos la carpeta de la siguiente ruta: /modules/mod_banners/tmpl hacia la carpeta html dentro de nuestro template, renombramos la carpeta copiada de tmpl a mod_banners, posteriormente editamos el archivo default.php dentro de esta carpeta.

A continuación se muestra el código agregado, el código se agrega después del bucle foreach, en la línea 17 aproximadamente del archivo default.php

<?php if((count($list)%2)!=0): ?>
 <div class="banneritem">
 <img src="http://encurso:8888/monitojoomla/images/banners/anunciaaqui.png" widht="125" height="125" />
 </div>
<?php else: ?>
 <div class="banneritem">
 <img src="http://encurso:8888/monitojoomla/images/banners/anunciaaqui.png" widht="125" height="125" />
 </div>
 <div class="banneritem">
 <img src="http://encurso:8888/monitojoomla/images/banners/anunciaaqui.png" widht="125" height="125" />
 </div>
<?php endif; ?>

<div class="clear"></div>

 

Consideraciones Finales

En el tutorial por video no se muestra el uso de la clase clear en el CSS y tampoco la línea de código adicional (<div class="clear"></div>) en el archivo default.php, pero esto es necesario en la mayoría de los casos para limitar el comportamiento float en los módulos inferiores de nuestro template.

Al descargar el archivo mod_banners.zip, será necesario modificar la ruta de la imagen (lineas 20,24,27) por la ruta de imagen de su template en el archivo default.php

 

Conclusión

El uso del componente banners y de su módulo respectivo, nos facilita la administración de los anuncios que se publican en nuestro sitio web, y la personalización del módulo banners con la técnica de template overrides nos brinda la flexibilidad de personalización de acuerdo a nuestras necesidades.

 

 

 

Comparte este postDel.icio.us! Google! Live! Facebook! Twitter! Joomla Free PHP
Comentarios (18)
  • jEsuSdA 8)
    avatar
    Hola Jhon,

    Es la primera vez que comento en tu blog, pero soy fiel seguidor tuyo desde que comenzaste con él.

    Ante todo, déjame agradecerte la excelente labor que realizas con la creación de estos tutoriales tan interesantes y bien explicados.

    Quería, si me permites, realizarte una consulta sobre template overrides.

    Quisiera conseguir que el módulo latestnews arrojara, junto al título de la noticia, también la fecha de publicación de la misma.

    Actualmente sólo muestra una lista de enlaces a las últimas noticias, pero considero importante poder mostrar también la fecha.

    Del mismo modo, la inserción de un link del tipo "más noticias" al final del listado, considero que sería interesante.

    ¿Sería posible realizar esto mediante template overrides? ¿Qué cambios habría que realizar?

    Actualmente tengo resuelto el tema mediante dos extensiones...
  • Jhon Marreros
    avatar
    Hola Jesusda.

    Gracias por el comentario, respecto a la consulta que me planteas, revisé de manera rápida el archivo default.php del mod_news del sistema y al parecer los datos enviados no incluyen la fecha, por lo que creo que no es posible aplicar la técnica, ya que no tengo el dato.
    Pero el tema me parece interesante y necesario asi que lo programaré para un futuro tutorial.

    Saludos.
  • jEsuSdA 8)
    avatar
    Gracias John por tu interés.

    Esperaré con interés el tutorial al respecto. ;)

    Salu2 de jEsuSdA 8)
  • Sonia
    avatar
    Muchas gracias por estos tutoriales tan interesantes que has confeccionado.
    Me han servido de mucho.
    Espero tus nuevas publicaciones!
    Felicidades por la web.
    Saludos cordiales,
  • borombombero
    avatar
    Muy interesante y claro. Gracias por tú esfuerzo.
  • Chimino
    avatar
    Buen tutorial creo que me va a aliviar un poco el dolor de cabeza. Perdon, pero soy nuevo en esto.

    Saludos

    Chimino
  • Chimino
    avatar
    Una consulta más. He configurado mostrar desde un menu la presentacion en modo blog varios articulos, pero no me funciona cuando quiero agregar la etiqueta "leer mas", será porque no se muestran en página principal? o estoy haciendo algo mal?

    Te agradezco de antemano

    Chimino
  • Jhon Marreros
    avatar
    Hola Chimino

    Puedes revisar este tutorial, en el cual se muestra el uso de leer más.

    http://www.monitojoomla.com/tips/varios-joomla/21-cambiar-apariencia-a rticulos-del-home-joomla

    Espero solucione tu problema, por otro lado para cosas no relacionadas al post puedes contactarme por la zona de contactos.

    Saludos.
  • José Alberto
    avatar
    Hola, Buen Día. Una pregunta, si el "template" no posee ningún archivo "style.css" sino posee otros, como puedo aplicar lo de éste videotutorial? Quiero colocarlo así, me gusta la apariencia, pero no veo como hacerlo. Muchas Gracias.
  • Jhon Marreros
    avatar
    Hola José
    Los estilos pueden ser aplicados en cualquier archivo de estilos, verifica que el archivo de estilos se llame en la carga de la web y que los estilos que coloques no sean sobreescritos.

    Saludos.
  • José Alberto
    avatar
    Hola, Buen Día. Gracias por responder. Pero tengo aun dudas, tengo "template.css" pero allí aparece con bannergroup y banneritem así, que debo hacer? modificar éstos o agregar las lineas que tu colocas? Sé un poco más detallista en tu respuesta y de verdad muchas gracias:

    /* Extra Content Styles */
    a.nounder {text-decoration: none;border: 0;cursor: pointer;}
    a.nounder:hover {text-decoration: none;}
    fieldset {margin:10px 0 20px 0; border-left: 0;border-right: 0;border-top: 0;border-bottom:1px solid #ddd;}
    fieldset.input, a img, body .pollstableborder {border: 0;}
    legend {font-size:120%;}
    form.poll fieldset {margin: 0 0 10px 0;padding: 0;}
    .side-mod form.poll {margin: 0 -15px;}
    .side-mod h4.poll-title {margin: 0;padding: 0;font-size: 120%;}
    .side-mod .poll-line {padding: 7px 15px 9px 15px;font-size: 110%;}
    .side-mod .poll-buttons {padding: 0 15px 0 15px;overflow: hidden;width: 130px;margin: 0 auto;}
    form.poll input.button {backgroun...
  • José Alberto
    avatar
    (CONTINUACION....)
    .bannergroup .clr {clear: none !important;}
    dl.poll dt {border-bottom:solid 1px #ccc;font-weight: bold;}
    dl.poll dd {padding:6px 0;margin-left: 0;}
    .polls_color_1 {background:#000;}
    .polls_color_2 {background:#999;}
    .polls_color_3 {background:#93246F;}
    .polls_color_4 {background:#000;}
    .polls_color_5 {background:#ccc;}
    .polls_color_6 {background:#93246F;}
    /*(más lineas de código)*/
    .bannergroup_text .bannerheader {font-size: 120%;font-weight: bold;margin-bottom: 15px;}
    .bannergroup_text .banneritem_text {margin-bottom: 15px;}
    .bannergroup_text .banneritem_text a {font-weight: bold;}
  • Jhon Marreros
    avatar
    En el código enviado no figuran los estilos que he colocado así que puedes agregarlo al final.

    Te recomiendo revisar CSS, al estudiar estilos te darás cuenta que la consulta que haces la puedes solucionar por ti mismo.

    Saludos.
  • José Alberto
    avatar
    Hola, gracias por tu respuesta. Que me recomiendas para estudiar CSS? Me interesa aprender, algo básico primero. Gracias nuevamente
  • José Alberto
    avatar
    Hola nuevamente, muchas gracias por tu ayuda, ya solucioné, de verdad es mas fácil de lo que parece. Sigue adelante con todas tus Webs, te he visto en varias, pero ésta es mi favorita. Feliz Día.
  • Federico
    avatar
    Hola Jhon. Estuve leyendo mucho tu página y la verdad no encontré algo que necesitaba, o quizas lo pasé de largo y no lo vi.
    Mi problema es el siguiente: estoy viendo de que mi página este optimizada tanto para IE como para otros navegadores. Estuve solucinando bastantes cosas viendo el archivo .css de mi template, solo que me quedo algo en nada y no se como solucionarlo. Los banner que pongo yo, en Chrome, Firefox, etc. se ven alineados como en tu video, pero en IE no, ya le agregue hasta # para que lo tome el IE, pero no hay forma. Sabrías como solucionar eso? Gracias! y felicitaciones por tu página.
  • enrique
    avatar
    mi platilla no tiene el archivo stilos.css como solucionó ese caso
  • Juan
    avatar
    Hola.
    Tengo que publicar Banner en los laterales de la pagina web, fuera de ella(en el Background) al estilo de algunas paginas de noticias y la verdad es que no se cual de las posibles opciones que se me ocurren es la mejor.
    ¿me puedes recomendar alguna solución?
    Gracias por tu estupenda Web...
Escribir comentario
Gravatar enabled