Fix your OpenID Login Icon

Doesn't it bug you that through 10 versions of Drupal 6 that dam OpenID icon is still hiding under the link text? Granted Garlands default styles somewhat mitigate the issue but for most themes the display of the OpenID icon on the User Login block and the Drupal login page remains broken.

In this short article (its not a big problem) I have outlined the issue and offered up a CSS solution that requires nothing more than dropping it in your themes CSS file and making rudimentary adjustments. On with the show!

**Update: my [patch to fix the OpenID icon in Drupal 7]( core passed the test bed but needs some testing in Linux and Mac browsers, if you have the opportunity please test the patch! and has been committed to HEAD for D7 - horray!**

## Whats the problem?
The link text is displayed in an item-list and the main problem is that the current CSS displays the icon as a background image on the <li>. Ok, so that's fine, but to "position" the background image (the icon) we need to apply some padding-left to the list item, but that wont work because it then misaligns the link text. Remember, Drupals default styling centres everything in the login block (which I personally think is wrong, but that's another patch...). Bugger, back to square one.

## How do we fix this?
The fix, while taking me some hours and head scratching turns out to be actually pretty logical. Instead of displaying the background image on the <li>, we display it on the actual link.

So heres the CSS. Just drop this in your style sheet, make any necessary adjustments and you should be set. Note: you MUST configure the path to the icon—I have assumed your theme is installed in sites/all/themes and that your stylesheet is in the root of your theme.

#user-login-form li.openid-link,
#user-login-form li.user-link {
  text-align: center;
html.js #user-login-form li.openid-link,
html.js #user-login li.openid-link {
  list-style: none;
#user-login-form ul {
  margin-top: 0;
#user-login ul {
  margin: 0 0 5px;
#user-login ul li {
  margin: 0;
#user-login-form li.openid-link,
#user-login li.openid-link {
  background: none;
#user-login-form li.openid-link a,
#user-login li.openid-link a {
  background: transparent url("../../modules/openid/login-bg.png") no-repeat 0 2px;
  padding: 0 20px;

Happy days people.

Last updated 14th April, 2009 - 3:10pm

Authored by Jeff Burnz on