Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* Modificar temas con ayuda de Google Chrome
  Leído 2265 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: Jack
Jun 19 2012
Hola a todos, la manera mas facil de modificar nuestros temas sin equivocarnos es usando google chrome, este navegador trae una opcion para ver directamente el css de los temas de nuestros foros SMF, con este metodo, los errores que cometamos pueden ser solucionados, porque no se modificara nada en los archivos, solo sera una modificacion "ficticia" para que luego una vez conformes, ahi si hagamos las modificaciones en los archivos css y las plantillas php de nuestros themes. Aclaro que requiere de un minimo conocimiento de los archivos de temas de smf para saber donde se ubica cada div y tambian algo de CSS, lo que aconsejo es ir anotando los cambios que vamos realizando en un block de notas, asi despues cuando todo esta listo procedemos a hacer las modificaciones reales. Paso a explicarles como se hace, con el ejemplo de la pagina de SMF en el tema original, voy a invertir las posiciones del menu y del logo:

*


1) Lo primero que voy a hacer es modificar el logo y el menu, primero voy a cambiarlos de lugar el logo, entonces voy a el, hago click derecho  y voy a "inspeccionar elemento" e identifico el div en donde esta, en este caso se llama "<h1 class="forumtitle">, entonces en el archivo de css se llamara "h1.forumtitle"

*


2) Ahora una vez identificado vemos los valores a cambiar, vemos que tiene el atributo "float:left",entonces lo cambiamos por "float:right" y destildamos "position:absolute" para poder moverlo a la derecha. (cuando se destilda algun atributo, seria que se anula, a este debemos borrarlo en nuestro archivo css posteriormente, o sea que el "position:absolute" lo borraremos)

*


4) Ahora que ya movimos el logo (previamente estaba a la derecha), vamos a mover el menu, identificamos el div del menu, y le cambiamos los atributos, pero este paso no sera tan facil como el anterior, vemos que el div del menu, ademas de tener su "id" tiene un class="floatright", esto es lo que lo mantiene flotando a la derecha, pero nosotros queremos moverlo a la izquierda, ¿entonces como hago?

*


5) Presionamos click derecho sobre el div que vamos a modificar, y apretamos "edit as html". Esto nos permitira editar el codigo html donde esta este  class="floatright" que nos esta impidiendo moverlo

*


6) Entonces lo que hacemos es borrarlo y el menu se ira automaticamente a la derecha.

*


7) ¿Y si quiero agregar un atributo css que no esta en la lista a la derecha? Por ejemplo vamos a darle un borde y un color de fondo al div "top_section" que es el que encierra el menu y el logo que modificamos.

*


Como veran el #top_section no tiene el atributo background ni border, entonces lo que vamos a hacer es agregarselo presionando sobre el "index.css" que vemos al lado posterior derecho, esto nos llevara directamente al archivo y ahi agregamos los atributos.

*


Bueno eso es todo, anotamos todo los cambios que hicimos si estamos conformes, vamos a los archivos correspondientes y modificamos con los nuevos cambios, y asi sucesivamente hasta dejar el theme que estamos modificando a nuestro gusto.

Saludos.


« Última Modificación: Abril 04, 2013, 09:27:40 am por Jack »



Muy buen aporte!!

Gracias por compartirlo con la comunidad. Lo paso a la seccion tutoriales.


PD: Podrias hacer uno de Firebug (Es mejor y mas estable)  ;)





Muy util

muchas gracias  (y)




Gracias a los dos, ahora me pongo a ver el firebug   q no lo conocia, no uso mucho firefox




Exacto crhome es muy inestable fire fox es el mejor para programar.

Buen tuto.

Saludos enik...




BUen tuto, no lo habia visto ;)




Muy buen tutorial, me sirvio de mucho! :D




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,