Botones con Imagenes con StandardForm ...

lennyv · septiembre 2008

Mi pregunta es la siguiente , se puede hacer de alguna manera de reemplazar los botones que por defecto genera el standardform de
Agregar , Consultar , Visualizar , Reporte ...etc por íconos con algun efecto por ejemplo que se agranden cuando se pasa el mouse por ellos ...

Algo como lo que adjunto en la imagen ...

deivinsontejeda · septiembre 2008

Si lo puedes hacer mediante estilos CSS

lennyv · septiembre 2008

Hay algún ejemplo donde pueda ver cómo se hace ?

Gracias.

deivinsontejeda · septiembre 2008

Con CSS, buscas ejemplo de hacer botones con CSS o como crear img con botones...

lennyv · octubre 2008

Estuve trabajando para cambiar los botones del standardform por imagenes , y como me sugeriste lo puede hacer usando css ... todo perfecto , salvo que tuve que agregar en el archivo "browse.php" , en la línea 382 lo siguiente para agregarle el "id" al botón "volver" para que me lo tome el css ... es una tontería pero sería bueno que lo incluyan para futuras versiones ...

Saludos ... aca les paso lo que agregué ( en negrita ) ...

....
Generator::forms_print("</table>");
Generator::forms_print("<center><br><br>No Hay Registros Para Visualizar</center>");
}
Generator::forms_print("</form>");
Generator::forms_print("\r\n<br><center><input type='button' class='controlButton'
value='Volver' id='volver' onclick='window.location = \"".self::writeLocation()."back"."\"'></center>");
}
}

deivinsontejeda · octubre 2008

Si tienes razón... sera agregado un estilo con ese nombre para que las personas que tengan la misma inquietud que tu tuviste puedan realizar estas modificaciones a nivel de CSS

lennyv · octubre 2008

Si , la verdad que se pueden hacer cosas interesantes ... como por ejemplo , así nos está quedando el "look and feel" de la aplicación que estamos desarrollando ...

Adjunto un par de capturas...

deivinsontejeda · octubre 2008

Se creo un Ticket[1] en el Trac de Kumbia con esta Mejora a los Formularios StandardForm.

[1]->http://tools.assembla.com/kumbia/ticket/13

cjgo100 · octubre 2008

Alguien nos puede facilitar los css para cambiar las imagenes y si fuera mucho perdir los ejemplos, estaria muy agradecido ademas de que le haria muy bien a la comunidad ya que muchos tenemos esas dudas y nos es dificil al principio.

lennyv · octubre 2008

No hay problema ... te cuento ... para los botones utilizamos imagenes .png con dos tamaños de 64px y de 70px ... adjunto una imagen con algunos ejemplos ...

luego tenemos configurada la aplicación para que utilice un estilo "style.css" ...dentro del mismo está la configuración para cada botón ... y lo que hace es cambiar los botones por imágenes y a su vez cuando se pasa el mouse por encima de la imagen se agranda la misma para mostrar que está seleccionada ...

Aca les paso la parte del css donde está la definición de los botones :
(si ven por cada botón están definidos 2 elementos , uno que cambia el botón por la imagen y el "hover" que hace el efecto de agrandar el botón ...

.controlButton#aceptar {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/aceptar64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
.controlButton#aceptar:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/aceptar70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#cancelar {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/cancelar64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
.controlButton#cancelar:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/cancelar70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#adiciona {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/nuevo64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
caption-side:bottom;
}

.controlButton#adiciona:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/nuevo70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#consulta {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/consultar64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#consulta:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/consultar70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#visualiza {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/visualizar64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#visualiza:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/visualizar70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#reporte {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/imprimir64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#reporte:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/imprimir70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#primero {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/primero64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#primero:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/primero70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#anterior {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/anterior64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#anterior:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/anterior70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#siguiente {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/siguiente64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#siguiente:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/siguiente70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#ultimo {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/ultimo64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#ultimo:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/ultimo70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#modifica {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/modificar64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#modifica:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/modificar70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#borra {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/eliminar64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#borra:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/eliminar70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#volver {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/atras64px.png");
background-repeat: no-repeat;
width: 75px;
height: 75px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

.controlButton#volver:hover {
color: blue;
border: none;
background-color: transparent;
background-image: url("@path/img/botones/atras70px.png");
background-repeat: no-repeat;
width: 80px;
height: 80px;
margin: 5px auto;
padding: 60px 0 0 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}

cjgo100 · octubre 2008

Muchas gracias eres muy amable.... lo voy a probar... espero me sirva pues he tenido muchos problemas usando el Framework ya que soy nuevo en esto....!!!

¡Hola Forastero!

Categorías

In this Discussion

Botones con Imagenes con StandardForm ...

Comentarios