Update 09/10/2010: With some of the recent changes Google has made to the GMail interface, it appears that my issue is no longer a problem because the search query is placed on its own line and the Archive, Spam, and Delete buttons are anchored in place. Yay! Nice work, Googs!
As I was going through and bulk-deleting emails in my Gmail account today, I became annoyed. My process was as follows:
- Perform a search in the inbox, or hover over an email, click “More” and choose “Recent Conversations”
- Click the “All” link to select all the emails matching the query
- Click “Delete”
By default, the “Archive,” “Report Spam,” and “Delete” buttons are set up to flow next the search query. See below:
The point of annoyance is this: the longer the query, the farther to the right the “Delete” button gets pushed. This means that every time I want to delete a set of emails, I have to relocate the Delete button. It slows my process down because there is no standard place where I can always find the delete button:
User-Defined CSS to the Rescue
If you’re using Firefox, you can pretty easily fix this by creating some CSS of your own to override the default behavior. First, you need to find your Firefox Profile folder. On Mac, it is in *username*/Library/Application Support/Firefox/Profiles/xxxxxx.default/chrome/ while on PC it is at C:\Documents and Settings\*username*\Application Data\Mozilla\Firefox\Profiles\xxxxxx.default\chrome. The “xxxx” part is a seemingly random string of letters and numbers.
Next, find the file named “userContent-example.css” and create a duplicate. Name the duplicate “userContent.css” and open it in a text editor. Add the following at the very bottom of the file:
.AQ {
width: 100% !important;
padding-bottom: 10px !important;
}
.yV {
padding: 10px 0px 5px 2px !important;
}
Save the file, quit Firefox, and then restart Firefox and return to gmail. You should now see that the buttons are always below the search results line, effectively anchoring them in place.
How did I come up with .AQ and .yV? Being the web nerd that I am, I used Firebug to inspect the code and figure out what container the buttons lived in – “AQ” in this case. While I was there, I checked to see what container housed the “Select: All, None..” buttons– yV – and gave it some extra padding.
Well, there you have it! In only a few minutes you can customize a website to meet your needs. There is a slim chance that the CSS used here could interfere with another website (if the same container names were used on both), so if something looks funky on a website other than gmail, make sure to try removing the custom styles you created and see if that does the trick.
