Webdesign

A few days ago I changed my Gmail theme into Preview (dense). It is clean and it suits to other Google services. It fine except one thing: it’s “denceness” is not as good as I want to. The problem is space between mail groups in Inbox. The headers of the group have too big spacing between them (padding-top) and due to that, the page is stretched too much (look at the image attached).

The solution?

Since I cannot edit any CSS files from Gmail’s themes, I had to find a way to change it in the browser. Many apps have their own custom stylesheets that we can edit to make our favorite pages look better. Most of them let us access them from the menu. But not Google Chrome.

To define custom styles for our page we have to change file hidden in the Chrome app directory structure. In Windows it’s placed under: user_dir\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css. 

Update [Oct 20 2011]! In Linux OS it is ~/.config/google-chrome/Default/User StyleSheets.

In the file (empty by default) you need to put your custom CSS code. In my case it was:

.Wg{
	padding-top:4px !important;
}

The !important directive is needed, since the CSS will be ignored as being less important than page stylesheet. Voila! Now we have really dense theme. You can see difference on the image.

Note that when you save the Custom.css file Chrome immediately changes the style for the page (if opened). It useful, when you want to try many options without reloading the page. Another option is running Developers Tools of course.

The last problem is how to make custom stylesheets for different pages. For now, I haven’t been looking for solution, since I don’t need one. If you know any, let me know in the comment.