Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Graphixx en 31 Julio 2014, 09:47 am



Título: [TUTORIAL] Cambiar logo de plantilla Rockettheme Hadron
Publicado por: Graphixx en 31 Julio 2014, 09:47 am
Aclaración importante, este tutorial sirve para cambiar el logo de cualquier plantilla publicada en el 2014 por rocketthemes.

Primero que todo debemos reemplazar la imagen del logo original, por la nuestra eso lo logramos de la siguiente forma:

1. En el navegador firefox, instala el complemento firebug (no voy a explicar como instalarlo).
Nota: obviamente durante este proceso a mi en las imagenes me salia el logo ya cambiado por lo que yo ya lo habia reemplazado por el mio, a ti te debe salir el logo de hadron, aclaro para que no te confundas.

2. Abre la pagina web en el navegador firefox, y encima del logo le das clic derecho->inspeccionar elemento.
(http://imagizer.imageshack.us/v2/280x200q90/905/pURzZq.png) (https://imageshack.com/i/p5pURzZqp)
3. Ubicamos en la ventana que saca firebug, deberia estar en la primera sección del panel inferior de la derecha, la opcion que dice: logo-type-preset1
(http://imagizer.imageshack.us/v2/280x200q90/908/6j2JY2.png) (https://imageshack.com/i/p86j2JY2p)
Y nos paramos encima de lo que dice background que tiene una url que apunta a un png de nombre logo.png, y enseguida debe aparecer la imagen del logo alli asi:
(http://imagizer.imageshack.us/v2/280x200q90/913/qsLCOi.png) (https://imageshack.com/i/pdqsLCOip)
Le damos entonces clic derecho y seleccionamos la opcion: copiar ubicacion de la imagen asi:
(http://imagizer.imageshack.us/v2/280x200q90/673/otJehv.png) (https://imageshack.com/i/ipotJehvp)
Despues procedemos a cargar esa url en el navegador dandole simplemente ctrl+v en la barra de direcciones asi:
(http://imagizer.imageshack.us/v2/280x200q90/540/SnTvQ9.png) (https://imageshack.com/i/f0SnTvQ9p)

A mi me dice que el logo esta en:
http://www.servitecst.com/web/templates/rt_hadron/images/logo/preset1/logo.png
Debemos entonces ir al cpanel y en el administrador de archivos ubicar dicha ruta asi:
(http://imagizer.imageshack.us/v2/280x200q90/538/zfui3C.png) (https://imageshack.com/i/eyzfui3Cp)
Yo lo que hice fue primero renombrar el logo original logo.png a logo_original.png por si las moscas, y despues cargar el logo mio que deberia llamarse logo.png si lo cargas con otro nombre recuerda renombrarlo a logo.png luego.

Ahora ya debe cargar tu logo en la pagina web, ve a la pagina y actualizala, lo mas seguro es que el logo te quede mascado asi:
(http://imagizer.imageshack.us/v2/280x200q90/539/mZrq4s.png) (https://imageshack.com/i/ezmZrq4sp)

Pasemos entonces al paso 2, que es arreglar el tamaño del logo en la plantilla.

Para ello ubicamos en el administrador de archivos del cpanel, la ruta:
public_html/web/templates/rt_hadron/css
Alli creamos un nuevo archivo llamado: "rt_hadron-custom.css" sin las comillas.

Dentro de ese archivo agregamos el codigo:
Código
  1. .logo-type-preset1 #rt-logo {
  2.    background: url("../images/logo/preset1/logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  3.    display: block;
  4.    height: 88px;
  5.    width: 191px;
  6. }
Nota: Ojo observar que dice preset1 en ese codigo, alli debes reemplazar ese preset por el numero de la preset de diseño que estes usando hadron tiene 8 presets diferentes. Te das cuenta cual esta establecida para tu pagina en la sección donde ubicabamos la imagen con el firebug.

Y listo esto fue todo, con esto tu pagina debe quedar asi de bonita:
(http://imagizer.imageshack.us/v2/280x200q90/743/iJYyuj.png) (https://imageshack.com/i/kniJYyujp)


Articulo original con el tutorial (sin imagenes) y en ingles:
http://www.rockettheme.com/forum/joomla-template-hadron-solved-threads/216216-solved-customize-the-logo?start=0#1060864

Si no estoy mal para visualizar los contenidos del foro rt debes ser usuario registrado y no estoy tan seguro hasta que punto usuario pago, asi que monte el articulo en ingles a mega: 800KB
https://mega.co.nz/#!JsowWRia!BVSNbMbB499GxXES9SkRXoV9KPoqEi7lYGpH2PpiTyk (https://mega.co.nz/#!JsowWRia!BVSNbMbB499GxXES9SkRXoV9KPoqEi7lYGpH2PpiTyk)

MOD: Prohibido dejar correo personal en los posts.