Botones con Imagenes con StandardForm ...

lennyv

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

Si lo puedes hacer mediante estilos CSS

lennyv

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

Gracias.

deivinsontejeda

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

lennyv

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

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

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

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

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

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

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....!!!