En el código puse varias instrucciones para que sepas como editarlo, no te preocupes que el texto no afectará el funcionamiento del código. Si te parece medio complejo de leer dejé una copia del código en este enlace que resalta un poco mejor cada parte:
http://pastebin.com/AwEcCBcU
En la
PARTE 1 se eliminan todos los estilos que tiene definido el diseño Butterfly por defecto. No necesitas tocar nada en esa parte del código.
En la
PARTE 2 se definen estilos generales para todos tus botones, como por ejemplo borrar el texto y definir el tamaño de las imágenes de los botones.
En la
PARTE 3 se define la URL de la imagen para cada botón. Fijate que la forma que usamos para identificar cada botón es
[href="/Dirección-de-la-página.htm"]. En tu página los nombres son algo complejos ya que usaste símbolos (como por ejemplo los corazones) que hacen que se defome un poco, te recomiendo ponerles nombres más sencillos como por ejemplo "Inicio", "Contacto", "Libro de visitantes". Así puedes generar tus códigos más facilmente, por ejemplo,
[href="/Inicio.htm"],
[href="/Contacto.htm"],
[href="/Libro-de-visitantes.htm"].
Por cuestiones de tiempo, para este código de ejemplo yo usé un sitio web que te deja generar imágenes automáticas en base a la dirección URL, por eso verás que mis URL de imágenes dicen algo así como "
http://placehold.it/234x50/11202A/ffffff/&text=INICIO". Reemplazalas por las URL de tus imágenes subidas a PWG, te dejé info sobre como hacerlo en mi mensaje anterior. Con este código también puedes definir una imagen diferente para cuando se pase el mouse por encima de cada botón.
Pegué ese mismo código en mi sitio para que veas como funciona:
http://tokarg.es.tl , lo voy a dejar puesto un par de horas.
Como verás no es de lo más sencillo pero con ganas y paciencia seguramente lo consigas, cualquier cosa si te trabas en alguna parte, dejanos una respuesta con todo el avance que hayas podido hacer y lo vamos viendo juntos.
Saludos!
