No matter what Google claims about the Gmail’s new look, there are people who just can’t deal with it’s new look. As of a few days ago, it seems like I’m forced to use the new look and there’s no way to go back.

I’ll save my rant for the future. The bottom line is that I don’t like it at all. If Google isn’t willing to fix it for me, I have to fix it for myself, right? Here’s how to “fix” it (for Google Chrome at least… but if you know how to inject custom CSS and JavaScript into pages, any browser should work.)

1. Open Gmail (duh!)
2. Change the display density:
   1. Click the gear button at the top right corner of the inbox. Note that there are two gear buttons to confuse you. Pick the one with smaller number of teeth.
   2. Select “Compact” display density.
3. Change the theme:
   1. Now click the same gear button and select “Themes.”
   2. Choose “Soft Grey.” The page will automatically refresh.
      Note that the custom CSS I created works with other themes as well, but I haven’t fully tested.
4. Change the button labels:
   1. Go to the “General” settings tab.
   2. In the “Button labels” section, select “Text.”
5. Hide the importance markers:
   1. Go to the “Inbox” tab.
   2. In the “Importance markers” section, select “No markers.”
6. Custom CSS and JavaScript:
1. Install Minimalist for Everything
2. From Minimalist Dashboard, enable Minimalist for Gmail and click “Edit.”
3. Scroll to bottom and select “+ Add Option”
4. In “CSS” box, copy and paste the following:
   .J-M, .wl { background-color: #333; }
.J-awr, .J-Ks-KO .J-N-Jz, .J-N, .J-LC, .J-JK { color: #ccc; }
.J-N-JT, .J-N-JW { background: #666; }
.NQ, .aij { background-color: #666; }
.nH .T-I { min-width: 0; padding: 0 7px; margin-right: 5px; }
.nH .T-I.amD { padding: 0; }
.nH .ash.T-I { margin-left: 5px; }
.nH .T-I-awG { min-width: 0; }
.ar5 .amF { display: none; }
.ae4.qRauBc { border: 1px solid #999; }
.akh, .z .Di .Dj, .nJ, .yj, .z .T9, .n4, .CL .CK, .B .Di .Dj, .uC, .vC, .pw, .dt { color: #ccc; }
.TO .n0, .nZ .nU, .nZ .n0 { color: #ccc !important; }
body.aam { overflow-y: visible; }
.w-asV + .nH { overflow: visible; overflow-y: visible; }
.ajl.aib.lKgBkb, .ajl.aib.lKgBkb.aji, .ajl.aib.lKgBkb.aji.ajm { height: auto!important; }
.oLaOvc.aeJ { overflow-y: visible; height: auto!important; }
.J-KU-Jg.J-KU-Jg-Zc.aj5 { bottom: auto; }
5. In “Body JS” box, copy and paste the following:
   

   var gmBody = document.getElementById('canvas_frame').contentDocument.body;
   gmBody.addEventListener('keydown', function(event) {
       var d = 0;
       var kc = event.keyCode;
       if (kc === 38) { d = -50; }
       else if (kc === 40) { d = 50; }
       else if (kc === 33) { d = -window.innerHeight; }
       else if (kc === 34) { d = window.innerHeight; }
       else if (kc === 36) { d = -gmBody.scrollTop; }
       else if (kc === 35) { d = gmBody.scrollHeight; }
       else if (kc === 74 || kc === 75) {
           var sit = document.getElementById('canvas_frame').contentDocument.body.getElementsByClassName('PE')[0].parentNode.offsetTop + 119;
           var sitt = sit + (kc === 74 ? 90 : -60);
           var vt = gmBody.scrollTop;
           var vb = gmBody.scrollTop + window.innerHeight;
           if (sitt < vt || sitt > vb) {
               gmBody.scrollTop += (kc === 74 ? 24 : -24);
           }
       }
       gmBody.scrollTop += d; }, false);

6. Click “Save Changes” at the top.
7. Now you’ve fixed the Gmail’s new look!

Note that most steps are optional. You don’t have to change the display density or hide the importance marker. The custom CSS somewhat works with other themes as well, although I haven’t fully tested.

Here’re a list of changes the above CSS and JavaScript makes:

• Dark background except for inbox/reading areas
• No more oversized buttons
• Just one simple scrollbar
• Improved scrolling when using j and k in inbox

I’m using WordPress for this blog so that I can focus on writing some useful posts. This is my personal blog, but I assume it will be filled with technical stuff, mostly programming-related topics.

I’m really going to blog!