Archive for October, 2012

Change the default throbber in Drupal 7

‘Throbber’ in Drupal is the animated loader ( found at  /misc/throbber.gif ), used to indicate Ajax progress.

If you want to change it evenly across your theme, don’t even think to just replace the ‘/misc/throbber.gif’, instead save your .gif file in your drupal theme, and in your theme’s .css file override drupal’s default CSS rules which style the ‘throbber’. This default CSS can be found ( but not edited ) at ‘/modules/system/system.base.css’, and you just have to copy them to your css file, as shown below.

Keep in mind that ‘throbber.gif’ is in fact a sprite image, which contains two states ( one static, used for idle state, and one animated used for progress ).

Add these in your theme’s .css, and tweak them accordingly to your animated loader :

/* these apply to auto-completing form fields */
html.js input.form-autocomplete {
  background-image: url(path-to-your/loader.gif); /* tweak this according to your gif */
  background-position: 100% 0px; /* tweak this according to your gif */
  background-repeat: no-repeat;
}
html.js input.throbbing {
  background-position: 100% -20px; /* tweak this according to your gif */
}

/* these apply to all ajax progresses */
.ajax-progress {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.ajax-progress .throbber {
  background: transparent url(path-to-your/loader.gif) no-repeat 0px 0px; /* tweak this according to your gif */
  float: left;
  height: 20px; /* tweak this according to your gif */
  width: 20px; /* tweak this according to your gif */
  margin: 2px;
}