04 Oct 2014

Customizing Gmail using CSS

If you’re wanting to customize your inbox beyond the use of Themes, you might want to venture into the world of using CSS.

If you’re new to CSS, there are a lot of resources online to get you started out. A few good ones are learn.shayhowe.com, blog.postach.io, htmlgoodies.com and cssbasics.com.

When you are ready to tackle a CSS, choose which element on the page you want to modify. Right click that item and select Inspect Element from the menu.

You will see a split screen with the HTML coding pop up. It should highlight the part of the code which relates to the item you right clicked. Also, as you scroll up and down through the coding, you will notice that your screen highlights the part of the screen the coding relates to.

Open Mailplane’s CSS from Mailplane 3 > Preferences... > Style. This is where you get to tell Mailplane what to change. First you have to translate the HTML code into CSS. If you’re new to this, the links above should get you started.

As you can see in the screenshot below, I chose the code to highlight the ‘Important’ field. I wanted to colour it in pink. I entered the Selector code translated to CSS into the Mailplane Style Sheet, and instantly my inbox updated to show my changes.

Using CSS gives you an unlimited amount of choice for inbox customization. We do also have a Google Group within our Mailplane page that is dedicated to CSS options. You’ll find it here.