21 April 2012

Customise GMail with Userstyles


There is a huge collection of GMail userstyles published at www.userstyles.org, and more are being added all the time.

Using these styles is easy for users of Firefox and Chrome. You simply install the Stylish browser extension, available on the Userstyles website. Then, when you find a style you like, you will see an install button on the page to install the correct version of the script for your browser. The styles install directly into Stylish and don't litter up your extensions/add-ons list - that means if you don't find anything you like, you can just remove or disable Stylish from your browser extensions/add-ons list and everything will be gone.

Userstyles can even be added to Internet Explorer if you don't mind delving into IE's settings. You need to apply the scripts across to the board to all websites, but as the GMail CSS is very site specific, doing that is unlikely to make alarming changes to any other site but the GMail web interface.

Here's how to do it. First choose your GMail style at www.userstyles.org. Use the Show Code button to see the script itself. Copy and paste the code into Notepad or a similar text editor and save the file to your computer with the .css extension.  Then go here and follow the steps set out: http://webdesign.about.com/od/css/ht/htcssuseriewin.htm

For Stylish users, userstyles can be easily and quickly turned on and off, deleted or edited by clicking the Stylish icon in your browser  toolbar and calling up the Stylish menu - you can also check for updates using this menu. In Chrome it will appear in the top right, and in Firefox it lives in the bottom left.

All the styles are written by GMail users for themselves, and published for others to share. A keen user will keep his style updated as GMail changes, and the best style developers update their styles regularly at www.userstyles.org. However, they are not endorsed by Google, and could break at any time if the GMail code changes.

Some of those that work well with the new interface of GMail include:

GMail Theme
For those who like blue, this style loads a custom blue background image (stored in a Picasa Web Album and linked to the style with the image URL) and adds a blue background or read messages, with an ochre colour - similar to the old GMail orange - for the unread messages. Hover colours are slightly darker. The style also adds a border to the work area, similar to the old interface.
In a Compose or Reply message window, the message frame is now pale blue instead of grey.
In Conversation View, the subject is highlighted with blue

One interesting point about this style for users who like to customise their look is the background image. This is simply a photo stored in Picasa Web albums - replacing the URL in the script with the URL of one of your own Picasa Web Album stored images will add your own chosen picture instead of the blue background image.

This needs to be used with the Dusk theme in GMail's theme gallery, to make sure of getting the right text colours
NB This does not work with the Right Side Chat lab, nor with a vertical split selected in the Preview Pane lab.


Gmail - Highlight Unread Mail (Blue)
This is very simple indeed, and does exactly what it says on the tin and no more - but it does make an amazing difference to the look of even the default light theme.
The style is so simple that it is easy to edit to use any highlight colour of your choice, once you know the hex code for it. You can look up Hex codes here: http://www.rapidtables.com/web/color/RGB_Color.htm or at http://www.colorpicker.com/


GMail New Preview Theme
This userstyle is even simpler - just two lines of code to change the colour of the text of unread mail. It comes with red set as standard, but is easily edited to the colour of your choice by replacing the hex colour code. Here it is in dark blue, as an example:


GMail Real Turf Theme
This simple style for use with the Turf HD GMail theme amends the read/unread message list colours to green and darker green, very similar to the way the Turf and Treetops themes looked in the old interface. It fills a big hole in the current theme gallery, as there is nothing there which is comfortably usable by people who like green!
In Conversation view, every second message is also highlighted in a pale green/blue shade, to distinguish messages from each other more easily.
This style is quite simple and could easily be edited to match with other non-green HD themes by changing the colours.


New Gmail - Read / unread contrast increase
This style does nothing other than increase the depth of the grey highlight for read messages. Before installing it, you can choose how much contrast you want. It has only three lines of code, each containing a colour specification and transparency specification, so is very easy to edit yourself by changing the colours and the transparency - you could have a pink or purple background for your read mail, for example!


Gmail - Show Gmail/Contacts/Tasks menu items
Those that are irritated by the two-click access to Contacts can install this style, which - after the first use of the main menu - keeps the main menu expanded horizontally into three clickable links to Mail, Contacts and Tasks.


Gmail messages, rounded and compressed
The recent update to conversation view has made a significant difference to its readability. But for those who still want the borders and rounded corners of the old interface, this style works effectively. Messages in a conversation are now more easily distiguishable from each other, and from the right-hand column.


New Gmail without any of the annoyances
Whether you like this style will depend on what you consider to be annoyances and what you consider to be important. It renders the Compose button almost invisible, for example! It makes the black top bar semi-transparent, which only really shows in a light theme. It functions with many of the dark themes effectively, but - as noted by the author - some tweaking of text colours may be required for it to work with all themes. In Conversation View, the entire message area has a dark grey background, which seems illogical - but can easily be changed once you identify it in the script.
The only way to discover if you will like this is to try it!

GMail Easy Access Coloured Buttons
For those that like the icons and haven't switched back to text, this style colours the icons on the buttons. It adds a spot of colour to the page as well making it easier to distinguish between the icons - Trash, for example, is bright red! You get a choice when installing to install for a light or a dark theme - the dark theme selection gives brighter colours.



Gmail menu and auto-completion highlighting
Many GMail users have commented that the standard colour used to highlight your selections in various dropdown menus is too pale to be easily visible. This simple style fixes that - the default colour is blue, but as the author - GMail user David Kewley - points out, the colour can be easily edited after installation to be any colour you like.


And finally...here's one I made earlier:


GMail Message List Colours
This style lets you choose your own colours for read/unread and selected mail in the Inbox and other lists, and applies colours of your choice to alternating messages in conversation view, to aid in distinguishing one message from the next. You make these choices from the Style page before installing the userstyle.  Here is the result of using the default settings, with a custom background of my own uploaded into Gmail's new background theme, which is rolling out right now....

I have drawn upon the skills of several other userstyle authors to produce this style - notably "bookdragoness" for leading me to the trick of allowing users to pre-select their own colours, and to "C2600" for help with defining the correct elements for altering the colours in message lists.


You can also use the style with any of the GMail themes - here it is with TeaHouse and the default colour set of various shades of green.


Other Userstyles
There are a host of other styles available at userstyles.org.  Several of them attempt to recreate the "old look", and these are prone to breaking because they are very complex. Return to Old GMail, GMail b2b and the GMail 2012 Merge style have all lost their lefthand sidebar scrolling ability, and Return to Old GMail has no scroll bar at all in the central pane. However, it must be noted that these styles are among the most complex, and are more liable to break than the simpler styles which refer to only a handful of elements. All of them have already required several updates to keep pace with the subtle changes which occur in GMail on an almost weekly basis. Safer is simpler - and most of the styles outlined in this article are just about as simple as it gets!

GMail's own options
The above are just a small selection of userstyles I have tested with GMail, and for which there appears to be user demand. However, it's worth remembering that GMail's own built-in options can also be used to restore text to your buttons, choose to have less space in your listings, transform the look and feel and banish the glaring whiteness. The following images are of the Ocean theme at varying times of day, with text on the buttons and compact density selected. I've also collapsed Chat leaving the sidebar free for my labels:




20 comments:

  1. Dear Sir I wish to like old Gmail lookout so pl. same activate and give both option in setting
    S B Kulshrestha

    ReplyDelete
  2. Yeah, me, too. I've tried Yahoo, but, that sucks, too. Amazing how IT people always want to fix things that aren't broken.

    ReplyDelete
  3. This is not the GMail Help Forum. Nor is it the place to complain about Google.

    Do feel free to comment on the article content, but please take your petulant demands and complaints about Gmail somewhere else.

    ReplyDelete
    Replies
    1. This comment has been removed by a blog administrator.

      Delete
  4. This is not about chosing the style or contrast. My Gmail does not look like it suppose to look! It doesn't have stars next to messages, On a left side all the options (mail, draft, etc are smashed on top of each other and when the arrow is pointed,they will get mixed up or open unwanted files! Scralling down does not drag all the page down, but only part of it this way upper page stays the same, but underlayers disappear underneagh. And this way I see a double reflection with 3 see through layers! It's so frustrating! Help!

    ReplyDelete
  5. This is not the GMail Help Forum.

    Go here for your Gmail questions that are not related to the content of this article:
    http://groups.google.com/a/googleproductforums.com/forum/#!forum/gmail

    ReplyDelete
  6. Thank you CWD. and all you code gurus for these! Esp the ones that we can substitute our own hex codes for our color preferences.
    I've recently installed waterfox instead of firefox.. hoping stylish works in the new browser :)

    question.. do we need to select a preset google theme to begin or can we start with the plain html look and fix it from there?

    ReplyDelete
  7. Hi, opal - for some of the userstyles, you do need to select an existing GMail theme - for example, the blue and yellow GMail Theme works best with Dusk selected as the theme - but the developer usually says so on his description page.

    ReplyDelete
  8. Works great with Gmail on my regular Google Chrome window. Anyone know can I get it to work in the incognito window?

    ReplyDelete
  9. Hi, jon - incognito in Chrome automatically disables all extensions, which includes Stylish.

    BUT you can over-ride this. Click the wrench, click Tools/Extensions. Find Stylish, and click "Allow in Incognito". That should do it for you.

    ReplyDelete
  10. PLEASE PUT THE OLD GMAIL LOOK BACK...!!!
    HAVE YOU GOT AN EXACT EMAIL ADDRESS FOR ONE OF THE SISSIES IN GOOGLE - WHO PROPOSED THE CHANGE IN GMAIL.. LOOK..!!!!

    DOES ANYONE KNOW OF ANOTHER COMPANY - AS I NEED TO MOVE ON AND DROP GMAIL - IN FAVOUR OF SOMEONE ELSE...
    GMAIL'S NEW LOOK IS FOR PANSIES AND IDIOTS..!!!

    ReplyDelete
    Replies
    1. MY SENTIMENTS EXACTLY. I CANNOT STAND THIS " NEW LOOK " and I WANT THE OLD LOOK BACK. WHO IS THIS LOSER WHO DECIDED THAT THE OLD LOOK SHOULD CHANGE. AND MOREOVER, WHO ARE THE OTHER LOSERS WHO AGREED WITH HIM????? Do you remember the genius move another company once made??? - To change the taste of Coca Cola??? to new and improved Coke. GIMME A BREAK!!! It didn't take long for them to bring back the taste people were used to - COCA COLA CLASSIC. DON'T THESE PEOPLE KNOW THE DEMOGRAPHIC THEY'RE DEALING WITH HERE??? WE'RE THE BABY BOOMERS AND WE NEED TO HAVE OUR NEEDS MET FOR GOODNESS SAKE. WAKE UP GOOGLE!!!!! I SAID WAKE UP!!!!!!! BEFORE WE GO GO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! I TOO NEED TO DROP GMAIL AND MOVE ON!!!!!. I COULD NOT AGREE WITH YOU MORE sabspencer. Gabriel Defreitas gabedef@gmail.com

      Delete
  11. New Gmai layout is less than a piece of pure bull....
    SO, As an idea you can add a special text about google policies in your
    automatic own mail signature, Like I've done (sere here after).
    I want hope that if each Gmail opononent of the New Gmail layout do it,
    Google will not stay so sufficient.

    AUTOMATIC GMAIL SIGNATURE HERE AFTER:
    IMPOSSIBLE NEW GMAIL LAYOUT POLICY..........
    Google new layout is less than a piece of pure Bu.....
    Not anymore userfriendly but only made for AD insert, NO WAY.
    It's not Google that can dict the rule to their customer. NO WAY
    Please; perhaps as like me will you not agree to be a slave of google so NO WAY
    Till google will not accept to use the existing old interface, thanks to switch for another email povider and add in your signature your comments about the new Gmail.
    There are plenty of other solution than can better preseve your privacy, like Opera. thunderbird or even hotmail or other up to you .
    Gmail is dead , Original google spirit is dead, and perhaps forever. Just forget it.
    It's a shame but this time is over. !!
    The best way to put it deep in google rule is to copy past this message and add it on your signature.
    Very soon, I will let all my contact inform of my new mail provider.

    ReplyDelete
  12. none of this affects functionality - it's just cosmetic. Show me a theme or whatever that's usable on a netbook.

    ReplyDelete
  13. I'm not sure what happened.. I had several working stylish codes going - on the html view and the standard *both offensive looking without stylish* views of gmail and now I can't get a stylish script to work on either. I had altered a couple of the colors involved - but they were working... and now they're not. I'm at a loss
    I have uninstalled and reinstalled stylish and styles.. started in safe mode with addons disabled and am at a loss. My other style the web things are working.. all sites except gmail.

    ReplyDelete
  14. Same issue continues.. stylish extensions not working on the basic html version of Gmail, using Waterfox.. identical code working like a charm using chrome.. if only I liked chrome......

    ReplyDelete
  15. There are so many features which I have to explore about gmail. You have discussed about a very important and useful one in this article. Thanks and keep exploring more, I will regularly visit your blog.
    digital certificate

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. ALL Your blog posts about Gmail ann now InBox are a real gift - Thanks for all the time you put into them. Google should be paying you!

    ReplyDelete