Gmail gadgets on (the) right side

Gmail is the most powerful web based email client, but sometimes it lacks of some customization features.
Since it’s possible to add any gedget by url, and many are already available via Gmail Labs, why not putting them on the right side of the screen?? If you have a wide screen like mine and they are all stacked on the left side, some are hard to be noticed.

Looking to the web there seemed to be no plugin or extension to do this, so I just used Stylish Extension and added some custom CSS rules…

Following I will show how to move on the right side the Tasks gadged:

  1. Enable Add Any Gadget By URL from Gmail Labs
  2. Add the Tasks Gadget with the following URL http://www.google.com/ig/modules/tasks.xml
  3. Enable Right-Side Chat from Gmail Labs
  4. Move the Tasks Gadget to the top of the gadgets (on the left side)
  5. Install Stylish Extension
  6. Create a stylish rule with the domain rule mail.google.com
  7. Add the following code to the rule:

  8. td.Bu:nth-child(2) > div.nH > div.nH > div:nth-child(4) {
    position:absolute !important;
    right:0px;
    top:262px;
    width:164px;
    }

I’m no CSS guru, but this is the code I found to work (it was not so easy since gmail CSS complitely lacks of IDs..!). You can change the top distance according to your Chat Gadged height, you can apply the procedure to any gadget in your gmail page, or eventually to more gadgets just by editing the rule above.

The result:

Thanks to the Smashing Magazine for the explanation about CSS pseudo-classes.