¿como clonar themes en wordpress ?

Iniciado por Weeken, 25 Enero 2013, 17:23 PM

0 Miembros y 1 Visitante están viendo este tema.

Weeken

¿como clonar themes  en wordpress ?

bueno como no encontre mucha info , solo me queda preguntar es verdad que para clonar themes premiun  o de webs.

se usa

firebug  :huh:

miren este theme clonado de cuantocabron!

http://dd.kjanime.net/

alister

Cita de: Weeken en 25 Enero 2013, 17:23 PM
¿como clonar themes  en wordpress ?

bueno como no encontre mucha info , solo me queda preguntar es verdad que para clonar themes premiun  o de webs.

se usa

firebug  :huh:

miren este theme clonado de cuantocabron!

http://dd.kjanime.net/
WTF!?
y como clonan la capa de aplicacion y comportamiento sin acceso a los PHP que generan el código HTML que te llega a tí en el navegador?
y firebug? para que?

no entiendo nada.
Back 2 business!

#!drvy

Firebug es una herramienta que facilita el manejo de html / css / javascript en tiempo real. Nada mas.

Por poder clonar un theme le puedes clonar... lo primero seria obtener todos los objetos (imagenes/js/css/html) y luego reconstruir el funcionamiento con tu propio código PHP. El problema ? Te va a costar mucho tiempo (a no ser que el theme sea sencillo). La razón es que (como ha dicho @alist3r) no sabes el PHP que lleva dentro y tienes que reescribirlo tu mismo.

Y no, no hay ninguna herramienta que te permita clonar un theme con 1 click.

Saludos

Weeken

#3
Insisto creo que es firebug edita aparencias default  , aca dejo un poco de info que encontre para themes de SMF  :P

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:
Index.css


ahora en la plantilla index.css, buscamos el nombre que copiamos, y efectivamente, encontraremos el estilo que aparecía en firebug.
Código (Index.css) [Seleccionar]

.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.

alister

no entendo qué tiene eso que ver con la pregunta inicial
Back 2 business!

#!drvy

#5
INSISTO EN QUE NO ES MAS QUE UNA HERRAMIENTA QUE TE FACILITA EL MANEJO DE HTML / CSS Y JS..

https://getfirebug.com/whatisfirebug Fijate lo que dice en la pagina..

CitarFirebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and javascript live in any web page

y insisto en que nunca sabrás el código PHP que lleva detrás así que nunca podrás replicarla al 100%. Y eso que muestras... si lo haces todo así igual te cuesta 20 años...


Saludos