S
Skydel
Préstamo
Dseda
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
En este tutorial voy a explicar algo muy básico pero que a mucha gente que está comenzando le será de gran ayuda.
Lo primero que vamos a hacer es descargar e instalar FireBug una extensión para nuestro navegador que nos facilitara mucho el trabajo.
Procedemos a instalarlo:
En Google Chrome
Muy fácil nos dirigimos al siguiente enlace Enlace eliminado
Hacemos clic donde dice Gratis a continuación nos saldrá una ventanita que nos dará la opción para añadirlo.
Le damos a Añadir, esperamos y listo!
En Mozilla Firefox
Muy fácil nos dirigimos al siguiente enlace Enlace eliminado
Hacemos clic en donde dice Add to Firefox esperamos y a continuación nos saldra una ventanita y le daremos a Instalar ahora y listo!
¿Para qué sirve la extensión Firebug?
Con esta extensión podremos ver el funcionamiento interno de los sitios webs y visualizar el código.
Ademas tambien nos servira para encontrar y depurar errores css, html, javascript y XMLHttpRequest.
En este caso nosotros lo usaremos para visualizar el código y encontrar estilos css que nos gustaría cambiar de nuestra plantilla.
Tenemos este blog como ejemplo
Nos gustaría cambiar el color de ciertas cosas pero no sabes como se llama el estilo que le han añadido pues con la extensión que hemos añadido lo haremos!
Por ejemplo nos gustaría cambiar el color de fondo del sidebar, iniciamos firebug pulsando f12
Ahora una vez que tenemos iniciado firebug debemos hacer clic aqui os adjunto la imagen de donde hay que hacer clic:
Ahora ya podremos empezar a inspeccionar elementos de nuestro sitio
Con el mouse nos vamos a ir al sitio de la web que queremos saber el codigo, y lo seleccionamos
Y en la parte nos aparecera el codigo css de lo que hemos seleccionado anteriormente en este caso del sidebar.
Y podremos ver y probar a modificar ese código para ver como quedaría en nuestro sitio sin que se apliquen los cambios
En este ejemplo lo que nos interesa es cambiar el color de fondo del sidebar así que buscamos background y el código del color y lo cambiamos por nuestro código de color que deseamos.
Como observamos el color de fondo a cambiado pero no tendrá efecto hasta que no lo cambiemos en los estilos css de nuestra plantilla, en este caso yo estoy utilizando como ejemplo blogger así que me voy a plantilla, editar html y busco (ctrl+f) el estilo que sería #secondarynbt (en la línea 966)
Guardamos los cambios en nuestra plantilla y listo.
Aclaro este tutorial esta dirigido a personas que están comenzando y que a veces les gustaría buscar los estilos de ciertas cosas para modificarlo y no saben como hacerlo.
Es algo básico el tutorial pero apoya mi aporte dándole a me gusta.
Lo primero que vamos a hacer es descargar e instalar FireBug una extensión para nuestro navegador que nos facilitara mucho el trabajo.
Procedemos a instalarlo:
En Google Chrome
Muy fácil nos dirigimos al siguiente enlace Enlace eliminado
Hacemos clic donde dice Gratis a continuación nos saldrá una ventanita que nos dará la opción para añadirlo.
Le damos a Añadir, esperamos y listo!
En Mozilla Firefox
Muy fácil nos dirigimos al siguiente enlace Enlace eliminado
Hacemos clic en donde dice Add to Firefox esperamos y a continuación nos saldra una ventanita y le daremos a Instalar ahora y listo!
¿Para qué sirve la extensión Firebug?
Con esta extensión podremos ver el funcionamiento interno de los sitios webs y visualizar el código.
Ademas tambien nos servira para encontrar y depurar errores css, html, javascript y XMLHttpRequest.
En este caso nosotros lo usaremos para visualizar el código y encontrar estilos css que nos gustaría cambiar de nuestra plantilla.
Tenemos este blog como ejemplo
Nos gustaría cambiar el color de ciertas cosas pero no sabes como se llama el estilo que le han añadido pues con la extensión que hemos añadido lo haremos!
Por ejemplo nos gustaría cambiar el color de fondo del sidebar, iniciamos firebug pulsando f12
Ahora una vez que tenemos iniciado firebug debemos hacer clic aqui os adjunto la imagen de donde hay que hacer clic:
Ahora ya podremos empezar a inspeccionar elementos de nuestro sitio
Con el mouse nos vamos a ir al sitio de la web que queremos saber el codigo, y lo seleccionamos
Y en la parte nos aparecera el codigo css de lo que hemos seleccionado anteriormente en este caso del sidebar.
Y podremos ver y probar a modificar ese código para ver como quedaría en nuestro sitio sin que se apliquen los cambios
En este ejemplo lo que nos interesa es cambiar el color de fondo del sidebar así que buscamos background y el código del color y lo cambiamos por nuestro código de color que deseamos.
Como observamos el color de fondo a cambiado pero no tendrá efecto hasta que no lo cambiemos en los estilos css de nuestra plantilla, en este caso yo estoy utilizando como ejemplo blogger así que me voy a plantilla, editar html y busco (ctrl+f) el estilo que sería #secondarynbt (en la línea 966)
Guardamos los cambios en nuestra plantilla y listo.
Aclaro este tutorial esta dirigido a personas que están comenzando y que a veces les gustaría buscar los estilos de ciertas cosas para modificarlo y no saben como hacerlo.
Es algo básico el tutorial pero apoya mi aporte dándole a me gusta.
Última edición:
