Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje22-05-2014, 17:02 (UTC)    
Título del mensaje: Cambiar los botones del menu

Quisiera saber si se pueden cambiar los botones del menu por otros hechos por mi y de ser factible, quisiera saber como hacerlo de modo facil.
Gracias
Mensaje22-05-2014, 22:22 (UTC)    
Título del mensaje:

Hola sweety-cyv,
si, puedes editar el aspecto de los botones de tu diseño. Para eso puedes usar cualquiera de estos códigos:

A) Para color sólido de fondo

Cita:
<style type="text/css">
.edit_nav_main{
background: red !important;
}
</style>


Puedes reemplazar la palabra "red" por cualquier otro atajo o código de color. Puedes obtener códigos de color en este sitio:
http://www.colorpicker.com/

Ejemplo:


El código sería:
Cita:
<style type="text/css">
.edit_nav_main{
background: #40C957 !important;
}
</style>


No olvides el símbolo #!


B) Para imagen de fondo

Cita:
<style type="text/css">
.edit_nav_main{
background: url('http://theme.webme.com/designs/butterfly/images/navi.gif') !important;
}
</style>


Puedes reemplazar la imagen marcada en rojo por la URL de cualquier imagen. Este tutorial te indica como obtenerlas:
http://www.paginawebgratis.es/forum/viewtopic.php?p=384165


Una vez que tengas tu código listo puedes pegarlo en "Diseño" / "Ajustes de diseño" / "Mostrar configuración avanzada" / "Texto sobre el diseño"


Saludos!
Mensaje23-05-2014, 14:37 (UTC)    
Título del mensaje:

gracias!!! lo probare
Mensaje24-05-2014, 16:26 (UTC)    
Título del mensaje:

Intente hacer lo que me propusiste, pero me parece que no fui clara en la explicacion de lo que yo pretendia: lo que quiero hacer es cambiar cada boton o tecla (no se como explicarlo) del menu por una imagen de un boton hecho por mi. Quiero hacer una botonera similar a la de la plantilla flash, en lo que respecta al tipo de boton con una imagen mia.
La explicacion tuya es para poner una sola imagen que este debajo de la botonera.. esta buena la idea, pero no apuntaba a eso.
Si se puede hacer, apreciaria que me expliques como.
Gracias
Mensaje24-05-2014, 17:27 (UTC)    
Título del mensaje:

sweety-cyv,
eso es un poco más complicado ya que no hay una forma fácil y efectiva de asignar una imagen diferente a cada botón. Igualmente se puede, si te interesa te dejo una posibilidad:

Código:
<style type="text/css">

/* -----------------------------------------------------
CODIGO PARA PERSONALIZAR BOTONES DEL MENU PRINCIPAL DEL
DISEÑO BUTTERFLY CON IMAGENES DISTINTAS PARA CADA UNO.
----------------------------------------------------- */

/* PARTE 1: Código para resetear el estilo de los botones de Butterfly */
.edit_headline_nav .headline3 > table > tbody > tr td.edit_nav_main{
   height: auto !important;
   background: none !important;
}
.edit_headline_nav .headline3 > table > tbody > tr td.edit_nav_main .edit_nav_main_left{
   display: none;
}
.edit_headline_nav .headline3 > table > tbody > tr td.edit_nav_main .edit_nav_main_charakter{
   width: 100%;
}
/* FIN PARTE 1 */

/* PARTE 2: Empezamos a definir nuestros propios estilos para los botones */
.edit_headline_nav .headline3 > table > tbody > tr td.edit_nav_main a{
   width: 234px; /* Ancho de los botones (te recomiendo usar 234px que es el mismo ancho que el diseño Butterfly tiene por defecto) */
   height: 50px; /* Sacar texto de los botones */
   display: block;
   text-indent: -99999px; /* Sacar texto de los botones */
}
/* FIN PARTE 2 */

/* PARTE 3: Continuamos dininiendo los estilos particulares para cada botón */
.edit_headline_nav .headline3 > table > tbody > tr td.edit_nav_main a[href="/Inicio.htm"]{
   background: url('http://placehold.it/234x50&text=INICIO') no-repeat; /* Imagen de botón para mi página /Inicio.htm */
}
.edit_headline_nav .headline3 > table > tbody > tr td.edit_nav_main a[href="/Inicio.htm"]:hover{
   background: url('http://placehold.it/234x50/11202A/ffffff/&text=INICIO') no-repeat; /* Imagen de botón al pasar el mouse encima para mi página /Inicio.htm */
}
.edit_headline_nav .headline3 > table > tbody > tr td.edit_nav_main a[href="/Contactos.htm"]{
   background: url('http://placehold.it/234x50&text=CONTACTO') no-repeat; /* Imagen de botón para mi página /Contactos.htm */
}
.edit_headline_nav .headline3 > table > tbody > tr td.edit_nav_main a[href="/Contactos.htm"]:hover{
   background: url('http://placehold.it/234x50/11202A/ffffff/&text=CONTACTO') no-repeat; /* Imagen de botón al pasar el mouse encima para mi página /Contactos.htm */
}
/* FIN PARTE 3 */

</style>


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!
Mensaje24-05-2014, 21:41 (UTC)    
Título del mensaje:

lo estudiare, espero entenderlo. Gracias por tu ayuda
Mensaje25-05-2014, 07:08 (UTC)    
Título del mensaje:

Queria consultarte algo con respecto a la primera respuesta que me diste en el tutorial para poner una foto debajo del menu: sabes que tamaño deberia tener una sola foto para ponerla alli?, o como se hace para que no salga mosaico. Te pregunto esto ya que cuando hice la prueba incial, despues de que vi tu tutorial, lo intente con una foto para un boton, y obviamente, quedo en forma repetitiva.
Este ultimo tutorial es muy complejo para mi, al menos para iniciarlo en estos momentos, tendria que intentarlo estando tranquila sin trabajo.
Otra consulta: como hago para que cuando pase el cursor por la botonera, este resalte. Antes lo podia hacer, pero ahora, cuando paso el cursor por la botonera, solo resalta el borde izquierdo, al menos para hacerle algun efecto y no quede tan feo.. Hay posibilidades de mas efectos?
Gracias


Ultima edición por sweety-cyv el Dom May 25, 2014 3:11 am; editado 1 vez
Mensaje31-05-2014, 15:52 (UTC)    
Título del mensaje:

Con el código de mi primera respuesta estarás definiendo una imagen de fondo para cada uno de los botones, el tamaño recomendado es de 235 x 28px. Puedes agregar el parámetro no-repeat para evitar que se multiplique. Por ejemplo:
Código:
<style type="text/css">
   .edit_nav_main{
      background: url('URL-DE-TU-IMAGEN-AQUI') no-repeat !important;
   }
</style>


Si lo que quieres es colocar una imagen de fondo para todo el menu, en vez de para cada botón, el código sería este:

Código:
<style type="text/css">
   td.edit_nav_main{
      background: none !important;
   }
   td.headline3{
      background: url('URL-DE-TU-IMAGEN-AQUI') !important;
   }
</style>


En este último también puedes agregar el parámetro no-repeat así como repeat-x (repetir solo en horizontal) y repeat-y (repetir solo en vertical)

Saludos!
Mensaje31-05-2014, 16:56 (UTC)    
Título del mensaje:

Muchas gracias, vere que puedo hacer
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group