Insisto creo que es firebug edita aparencias default , aca dejo un poco de info que encontre para themes de SMF
Seguramente ya muchos conocen firebug, y otros aun no, pero estos últimos de seguro que por algún tema han leído el nombre de firebug.
Pues bien, firebug es un complemento de mozilla para desarrolladores, es un debugeador e inspector web en
tiempo real, es decir, firebug realiza los cambios (pre-visualiza) al tiempo que vayamos modificando el código de fuente.
para de esta manera tener una idea de como quedaría lo que hemos editado, y luego aplicar los cambios a la plantilla original.
Yo lo uso comúnmente para dar soporte (cambios de color, errores en el css, etc).
y quizá este pequeño manual, ahorre algunas preguntas, de como cambio el color de tal elemento, como se llama tal estilo, etc. y lo resuelvan por ustedes mismos.
Solo nos centraremos en css y un poco de html, orientado a smf.
Primero el link del complemento para mozilla
https://addons.mozilla.org/en-US/firefox/addon/1843/Firebug ya viene configurado, y listo para trabajar, igualmente pueden ver sus opciones en Herramientas - Firebug
Bien, haremos el tutorial, editando el color de los nombres de los foros en Simplemachines.
1.- Click derecho sobre el elemento o zona a editar.
Seguidamente en el menu, damos click en inspeccionar elemento.
2.- mostrara lo siguiente, que es el panel de inspección.
Explicando:1.- La fuente html y el elemento html seleccionado (lo sombreado en azul)
2.- Nombre del estilo que tiene asignado ese elemento
3.- Estilos heredados (estilos con propiedades, que también afectan al elemento inspeccionado).
4.- Indica en que plantilla y linea esta el estilo.
Si movemos el mouse, por el panel derecho, y navegamos un poco con el scroll, tenemos los siguiente.
Explicando:1.- Icono para bloquear la propiedad (se puede decir, eliminarla)
2.- Propiedad bloqueada.
3.- Propiedades heredadas al elemento, pero que están siendo bloqueadas por otro estilo.
Ahora hay que probar modificar la propiedad
color del estilo, solo den click sobre el valor de la propiedad.
y modifiquemos por cualquier color, y miren como firebug pre-visualiza los cambios en tiempo real.
y así, podemos ir modificando cada propiedad que tenga.
ahora, también podemos agregar una nueva propiedad.
simplemente damos click derecho en un espacio en blanco, dentro del estilo, y en el menu elegimos
Nueva propiedad
Nos saldrá un cuadro en blanco, donde tendremos que poner el nombre de la propiedad.
se darán cuenta que firebug va buscando propiedades mientras escribimos, cosa que es muy útil.
Damos
Enter cuando tengamos escrita la propiedad, y luego nos aparecerá otro cuadro en blanco para colocar el valor de la propiedad, que igualmente, firebug también nos ayuda a buscarlo.
escribimos el valor, y vemos como cambia el elemento inspeccionado.
una vez que tenemos listo los cambios, podemos pasar a hacer los cambios a la plantilla original, aquella plantilla que hará los cambios de verdad.
Explicando:1.- copiamos el nombre del estilo, en este caso
.table_list tbody.content td.info a.subject
2.- vemos en que plantilla se encuentra, en este caso:
ahora en la plantilla index.css, buscamos el nombre que copiamos, y efectivamente, encontraremos el estilo que aparecía en firebug.
.table_list tbody.content td.info a.subject
{
font-weight: bold;
font-size: 110%;
color: #d97b33;
}
Lo modificamos como lo hicimos con firebug, guardamos y listo, css modificado a gusto
De esta forma podemos modificar el css de cualquier elemento que inspeccionemos.
pero claro que no solo de smf, si no de cualquier tipo de web.
Espero que le sirva par aquellos que aun no conocían firebug, cualquier duda o alguna parte que no entiendan, solo pregunten.
TIP: quizá en ocasiones, cuando intenten buscar el nombre del estilo que inspeccionaron con firebug, no lo encuentren en el css.
pues bien, traten de copiar parte del nombre(sobre todo el inicio) y buscarlo asi en el css, hasta encontrar el nombre exacto.Navegadores como:
Chrome, Safari, y Opera, ya tienen un inspector web incluido, y funciona de la misma forma.
pero claro, que no es tan completo como firebug.
Luego sacare la segunda parte de inspeccionar html, que es casi lo mismo, solo que quiero que este tema se centre en css, que es lo primordial para la personalización.
Autor
En línea
