Vestir botones
Usando Ubercart, el sistema Drupal-Friendly para e-Commerce, me doy cuenta que hay varios botones que vestir: Carrito de compra, Añadir, Remover, Actualizar. Además de los que ya vienen por defecto en Drupal: Log in, Sign up, Cancel, etc.
Lo ideal sería acompañar un icono para cada botón, ayuda a identificar la función que desempeñan. Para esto hice un sprite con diferentes imágenes.
El estilo general del botón es fácil de aplicar; es cosa de decir que input[type=”submit”] y voilá… tenemos estilos aplicados a todos los botones que envíen información al servidor. Si añadimos clases o id’s también funcionan: input.clase, input#identificador también son válidos.
Pero, para aplicar diferentes imágenes de fondo nos podemos valer de sus atributos: id, class, name, value, type: Jeffrey Way describe cómo lograr esto en un excelente artículo que se ha convertido en mi cheat-sheet.
Solución:
input[name=”update-cart”] {
background: url(“../images/icons_icons.png”) no-repeat scroll 0 -161px #F05A24;
}
input[value=”Remove”] {
background: url(“../images/icons_icons.png”) no-repeat scroll 0 -129px #F05A24;
}
< / saludos >
