drupal-header

Drupal: throbber para input gordos

La ruedita de autocomplete de drupal tiene un fallo, y es que cuando un input es un poquito “gordo” ya se ve parte de la ruiedita activa (porque es un sprite).
Aca les dejo el css y las imagenes que reemplazan al throbber de Drupal por el mismo pero separados, así deja de ser un incordio.

1
2
3
4
5
6
7
html.js input.form-autocomplete {
    background: url("throbber-inactive.png") no-repeat scroll 98% 50% transparent;
}
 
html.js input.form-autocomplete.throbbing {
    background: url("throbber-active.gif") no-repeat scroll 98% 50% transparent;
}

throbber-inactive <—- (click derecho y “guardar imagen como”)

throbber-active <—-(click derecho y “guardar imagen como”)

Aca pongo una versión con las imágenes embebidas. no hace falta que descargues las imágenes porque ya vienen incrustadas en el CSS.

1
2
3
4
5
6
7
html.js input.form-autocomplete {
  background: url('data:"image/png";base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAARCAMAAAA11AaTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGRkY0M0MxQ0ZDOUFFMjExOUYwNTkyQzM4NDM3MTEyQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNzEyMkVCMjlBRkUxMUUyQTQxNTk4RTJBMDQ5RjZDQiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNzEyMkVCMTlBRkUxMUUyQTQxNTk4RTJBMDQ5RjZDQiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA1RjUzQzFDRkM5QUUyMTE5RjA1OTJDMzg0MzcxMTJCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZGRjQzQzFDRkM5QUUyMTE5RjA1OTJDMzg0MzcxMTJCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+8+0pVAAAAFFQTFRFxsbGzs7O3t7e5+fnCHO9////a6/Yi7/h3u/3RpzODHu91uf3HITG7/f/oM7nNZDKyuLztdbv5+/3GHvG9/f/7+/vvb291tbW9/f3tbW1////V+AtUQAAABt0Uk5T//////////////////////////////////8AJzQLNQAAAFxJREFUeNp8j1kOgDAIRIHGI7CM9z+oharRuvBBeJBhgNZ70BureIuTg5HBMTgMxk6ALcUMyokaPFlhQ6pAL0iqXVK0nhyyc1WP+ayf96c/rv7HfR4f9//+uwkwABszFtyhYnczAAAAAElFTkSuQmCC') no-repeat scroll 98% 50% transparent !important;
}
 
html.js input.form-autocomplete.throbbing {
  background: url('data:"image/gif";base64,R0lGODlhDwARAMQTAMri8xyExgx7ve/3/73e7/f3/9bn9xh7xrXW797v91qi0zWQyou/4aDO52uv2Ofv90aczghzvf///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGRkY0M0MxQ0ZDOUFFMjExOUYwNTkyQzM4NDM3MTEyQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3RkE0MTI2MTlBRkUxMUUyQUNCRDlCOEFDNDQ5MzZGQyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3RkE0MTI2MDlBRkUxMUUyQUNCRDlCOEFDNDQ5MzZGQyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyRjUzQzFDRkM5QUUyMTE5RjA1OTJDMzg0MzcxMTJCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkZGRjQzQzFDRkM5QUUyMTE5RjA1OTJDMzg0MzcxMTJCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQYAEwAsAAAAAA8AEQAABWjgJI5kaZ6mwThNgiZQJMvKUCZCJAQR3xek2CLBiDAAPMfIoHtIigwJQGabNCIOydOojSFEDu42KgkzRMWsBKFAdCPfCVPg1GqnkepEmLADDlgkODIQDjE/JQ+HMw56JQYNLC4olJUoIQAh+QQFBgATACwAAAIADQANAAAFR+AkTkDDTMOormIxPsEULcoiLukqFUF0vCoJIwIhiB6rhExpI5wcIoVK2mhMpJOHwzUiAGQskUAyinVZ5qttsg5HkSvkaRUCACH5BAUGABMALAAAAgANAA0AAAU/4CROz5iMY4mK6nSK0FqsoiQBwghM0SgRi55AIlKwjJEADSVg0Bwo1YI1ya0IvNZiJ+KmRtOYaGBazlZe8igEACH5BAUGABMALAAAAgANAA0AAAVI4CROBuOM6JSk4oAKE+xAYsCmtmjEqCQBk4hrcpoQGEiGDXFiiJyRaGSCRCEUWMVydwNOhqLVTQWbQIqTQGH0YDnAo91JLAoBACH5BAUGABMALAAAAgANAA0AAAVJ4CROQMNMw6iuYjE+wRQtyrikbP7kEyHuqofjIZEseieHqCZgSGqNxqQ22UUigSMBIFMRFpGJQDKKjQiClXl6nLR5U2BwclqFAAAh+QQFBgATACwAAAIADQANAAAFQOAkTs+YjGOJiup0itC0jMW6HiMwRbYuSCIFqjaJ2UQM4MohSvASStJEMGJEIIRda6ErBHio7WpgOhJROhF5FAIAIfkEBQYAEwAsAAACAA0ADQAABUXgJE7G5IzolKTigAoT7EBiwKa2WMJ35JoiAoOAQpwYIuToqExOGJIJDVEaMSJQQAuVuDIABy4vEMkFCqMHy/FDlU6rUQgAIfkEBQYAEwAsAAACAA0ADQAABUbgJE7AxEzDqK5iMT7BFC3KuKRs/uQTIe6qhwO36J0cohpyUms0mL2IACcilCKTRaQhGQm6osNMIvGtYllFMcsbKYBBEysEACH5BAUGABMALAAAAgANAA0AAAVB4CROz5iMY4mK6nSK0LSMxboeIzBFti5IIoXoVJvEUAUGzwYL8ByjGUkUgRiAE8KuFQBgdagWbDQwMYso8KQ8CgEAIfkEBQYAEwAsAAACAA0ADQAABUngJE4G44zolKTigAoT7EBiwKa2aMT3FA2MSUBBVCBQiFNkKQpOTs4FY8ogiGiIneAhkYwArdFi1UvAJpBTrTB6sByu1O5EFoUAACH5BAUGABMALAAAAgANAA0AAAVI4CROQMNMw6iuYjE+wRQtyrikY8yKjxxBhhGB15hAApGIA7eYEE6OwmniENWKE4VEkoiqCADZbiKQ5L4sXbY5YY+zvVVvqgoBACH5BAUGABMALAAAAgANAA0AAAVB4CROz5iMY4mK6nSiy1isUSweI8AuUSPqAolIISFMBCPISiJRrFAO1mQgspWQK2OktdD9VtyJUkQVvVazlXeKCgEAOw==') no-repeat scroll 98% 50% transparent !important;
}

Chau!

One Comments

  • Juan M. Sosso 09/05/2014

    Muchas gracias, no sabía porque me aparecía siempre el icono girando y efectivamente, los INPUT del tema que uso son bastante altos 🙂

    Un cordial saludo.
    Desarrollo web servinube

:).