How to block out Gmail logotype when printing an email

Introduction

Gmail includes its logotype at the top of the page when printing email messages. To get rid of it, we use a userscript to apply an extra class to the html document to be able to select on domain name, and then use a Custom.css to remove the logotype. By limiting the selector to @media="print", the logo stays on the screen but is removed when printing. The same technique can be used to change or remove any element.

This example is for Chrome. You will have to work out on your own how to do the same in other browsers. It's probably going to be possible in most cases.

Custom.css

A custom client-side CSS for this purpose can look like this:

@media print {
       html.domain-google-com img[alt=Gmail] {
           display: none;
       }
}

Place this in a file called Custom.css and copy it to

  • MacOS: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
  • Windows: probably %USER_HOME%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
  • Linux: most likely ~/.config/google-chrome/Default/User StyleSheets/Custom.css

See here for more info

The selector uses a custom class to select only for the domain "google.com". This is achieved through a userscript based on a comment on this page.

Put the following in a file called "userscript.user.js" and drag it to the "extensions" view in Chrome:

// ==UserScript==
// @name Domain Style
// @description Enables domain-specific Custom.css styles using CSS classes.
// @include https://mail.google.com/mail/*
// ==/UserScript==
 
var ds = location.hostname.split(".");
var cs = document.documentElement.classList;
for (var i = ds.length-2; i >= 0; --i) {
cs.add("domain-" + ds.slice(i).join("-"));
}

Note that the @include statement in this script should probably be less specific. The whole point is to be able to control the styling in the Custom.css file, after all. Try "@include https?://*", for example.