Home Tips Herramientas Usando Firebug para modificar la apariencia de una plantilla Joomla

Usando Firebug para modificar la apariencia de una plantilla Joomla

Viernes, 10 Diciembre 2010 | Escrito por Jhon Marreros Guzman

icoDetalles Tip - Nivel : Básico, Formato : Video
En este tip veremos el uso del complemento del navegador firefox llamado firebug, se hace uso de firebug para identificar las etiquetas, localizar los estilos relacionados y modificar y almacenar los cambios en el archivo de estilos correspondiente de una plantilla de Joomla.

La siguiente publicación se realiza con el permiso de Webempresa, se trata de un video en el que se muestra cómo utilizar Firebug para cambiar el aspecto visual de nuestro template.

 

Conclusión

Firebug es una herramienta muy útil que, entre otras cosas, sirve para localizar los elementos html con sus correspondientes estilos en un sitio web y hacer modificaciones rápidas sin tener que estar almacenando los cambios para ver como lucen. Esta herramienta debería formar parte del arsenal de todo buen diseñador o programador web.



Comparte este postDel.icio.us! Google! Live! Facebook! Twitter! Joomla Free PHP
Comentarios (22)
  • 12-12-2010 Felipergueza
    avatar
    La herramienta firebug tambien esta disponible para el navegador de google crome.

    En mi caso he utilizado esta herramienta en sitios en modo local y en sitios online.

    Cuando utilizaba esta herramienta en modo local analizaba que parte iba a modificar y antes de proceder a realizar las modificaciones siempre hacia una copia del archivo a modificar, claro esta que yo sabia que archivo era por que el mismo firebug te dice cual es.

    Una vez guardado la copia me iba a los archivos originales para proceder a realizar la modificación.

    Lo que desconocía completamente era el hecho que los archivos a modificar se puden hacer desde la misma herramienta.

    Gracias por el video me ha dejado una gran enseñanza.
    Responder
  • 13-12-2010 Edward Gomez
    avatar
    De nuevo gracias por tus videos son de mucha ayuda, esta herramienta en especial ha sido de mucha ayuda para lograr modificar la plantilla con las que trabajo, y con tu video he profundizado mas sobre esta herramienta.

    Gracias desde Colombia
    Responder
  • 04-01-2011 carlos
    avatar
    hay alguna forma de editar graficamente una plantilla joomla?

    www.prowebplus.net
    Responder
  • 05-01-2011 Jhon Marreros
    avatar
    Hola Carlos

    Si quieres editar gráficamente tal como se hacia antiguamente con frontpage, puedes revisar Dreamweaver en su versión CS5, tiene una opción para editar templates de joomla gráficamente.

    Saludos.
    Responder
  • 20-01-2011 toni
    avatar
    Hola Jhon, muy bueno el tutorial. Para trabajar con estilos ha quedado muy claro ya que te indica el archivo en la caja de la derecha (en este caso template.css)
    Pero si quiero modificar por ejemplo los botones que ponen "add to car" y traducirlos a "añadir al carrito" hay q tocar el html, pero ¿donde están realmente esos archivos?
    ¿como puedo localizarlos?
    Responder
  • 20-01-2011 Jhon Marreros
    avatar
    Hola Toni

    Te refieres al componente virtuemart supongo, este componente tiene un theme o plantilla gestionada independientemente, así tambien sus archivos de idioma.

    Para modificar el theme :
    /components/com_virtuemart/themes/Nombretheme/templates

    Para los archivos de idioma:
    /administrator/components/com_virtuemart/languages

    si quieres traducir te recomiendo bajarte el idioma español para virtuemart.

    Saludos.

    Responder
  • 21-01-2011 Toni
    avatar
    Gracias Jhon por tu rápida respuesta. Esos botones en cuestión eran de un modulo, el mod_news_pro_gk4 de Gavick. Ya lo encontré.
    Sin embargo en relación al firebugs sigo teniendo una duda. La extensión esta muy bien por q te indica el archivo de estilos css, pero en relación al codigo html no acierto a saber si indica en alguna parte el archivo donde está realmente.
    Por lo que estoy empezando a comprender... Lo que interpreta el navegador lo coge de multiples archivos y hay que buscar investigando logicamente que modulo o componente se esta utilizando en cada parte de la página que queramos modificar, pero firebugs no nos lo indica...¿estoy en lo cierto?
    Responder
  • 21-01-2011 Jhon Marreros
    avatar
    Si, el código generado es dinámico, necesitas investigar como se genera el html de tus extensiones.

    Saludos.
    Responder
  • 21-01-2011 Toni
    avatar
    Muchas gracias, Jhon.
    Responder
  • 23-01-2011 Anónimo
    avatar
    Jhon a ver si me puedes ayudar.
    Tengo la template yourshop de gavick:
    http://www.gavick.com/products/templates/item/92-yourshop.html
    El problema está con el modulo de carro de compra del virtuemart. He traducido el virtuemart y todo perfecto pero el modulo de la derecha arriba, no hay forma de traducir:
    "shop cart" y "go to checkout"

    Con el fire bug sale esto:

    <div id="gk-cart-btn">
    <h2>Shop Cart</h2>
    <div id="gk-items">[ <strong>1</strong> ] Items</div>
    <a class="button" href="/index.php/terminar-el-pedido.html?redirected=1">Go to checkout</a>
    </div>

    ¿En que archivo puede estar?
    Responder
  • 24-06-2011 Felipe
    avatar
    Hola yo encontre ese mismo codigo porque lo traducí de forma manual en toolbar.css esta dentro de la carpeta blocks de tu template, ahora mismo estoy pegado en esa parte poruqe donde dice items solo marca 0 cero
    Responder
  • 13-07-2011 Jose
    avatar
    Hola felipe, ¿has conseguido que la cesta muestre algo distinto a 0? me estoy volviendo loco, gracias
    Responder
  • 16-03-2012 gabriel
    avatar
    me podrias decir si as solucionado lo del iten q te salia 0 me podrias ayudar a mi me pasa igual
    Responder
  • 10-11-2011 juankar
    avatar
    A mi me pasa lo mismo...siempre me aparecen 0 items ¿Alguien tiene la solucion a esto?
    Gracias.
    Responder
  • 24-01-2011 toni
    avatar
    Jhon me estoy volviendo loco con la traducción del mod_virtuemart_cart.
    Responder
  • 01-04-2011 freddy
    avatar
    Excelente post, me a ayudado mucho.
    Responder
  • 12-05-2011 NRivera
    avatar
    Gracias Jhon, Excelente POST

    Me gustaría saber si hay forma de usar Firebug para identificar la ruta se encuentra guardado un objeto en Joomala por ejemplo un botón de envío de un formulario o compra.

    Por ejemplo tengo un formulario creado con un modulo. Ese formulario tiene un botón para limpiar los datos entrados que lee reset y quiero cambiar ese texto por limpiar. No se mucho de CSS pero entiendo q ese texto no lo puedo cambiar con CSS. Tengo que ir al archivo donde se origina y hacer el cambio manualmente en value="Limpiar". ¿Cierto?

    Gracias por la ayuda
    Responder
  • 01-06-2011 Javier
    avatar
    Hola , ami el template YourSHop me da un error cuando cancelo un pedido desde la cestam, me sale un mensaje que dice:

    Notice: Undefined index: option in C:\wamp\www\templates\gk_yourshop\layouts\bloc ks\main.php on line 73 Call Stack #TimeMemoryFunctionLocation 10.0010708064{main}( )..\index.php:0 .. la verda esque continua es bastante mas largo, alguna idea de donde o que puedo hacer para quitarlo? gracias.
    Responder
  • 07-07-2011 Sheo
    avatar
    Muy bien el video, esta muy claro...
    Gracias por el aporte
    Responder
  • 13-07-2011 Javier
    avatar
    buen video voy a probarlo
    Responder
  • 19-08-2011 Esteban
    avatar
    Hola, bueno el video, sin embargo necesito las rutaaas de los archivos html, las rutas de los botones, las rutas de todos los archivos y no solo los css. Este programa es util, cierto pero sin las RUTAS de todo lo demas nos queda un 90% de trabajo inconcluso
    Responder
  • 25-10-2011 Giovanny
    avatar
    Buena noche: a mi también me sale el mismo error que Javier mensaje con fecha 01-06-2011; pero no solo al momento de cancelar sino también al momento de Añadir Productos a mi cesta, que solución se puede hacer? Agradezco su ayuda.
    Responder
Escribir comentario
Gravatar enabled