[Web] Настраиваем вид Gmail

У Google есть почта. У неё есть фича: рекламный блок. Это было бы ничего, если бы он был внизу. Но он справа и отнимает 189px ширины окна. К счастью, во многих браузерах есть возможность задать дополнительный stylesheet.

Открываем DOM Inspector, тыкаем в рекламу. Поднимаясь по дереву, видим, что ближайший адресуемый блок имеет класс yxEQwb. Открываем $(profile)/chrome/userContent.css (для Firefox; в IE положение дополнительного CSS настраивается через диалог Internet Options), пишем:

/*
 * GMail ads 2007-11
 */
.yxEQwb { display: none !important; }

Перезапускаем Firefox. Рекламы больше нет, но остался блок с ссылками New window и Print all. Их можно было бы убрать аналогичным образом, но они могут когда-нибудь понадобиться. Так что мы их уберём в другое место. Скажем, в правый нижний угол окна. Кроме того, пусть им будет какая-нибудь ненавязчивая рамочка.

Если верить DOM Inspector’у, они лежат в блоке с классом yMuNaf (всегда поражаюсь, как в Google умеют точно, кратко и понятно выразить назначение блока).

.yMuNaf
{
  position: fixed !important;
  bottom: 0px !important;
  right: 0px !important;
  border: 1px solid silver !important;
}

Ещё раз перезапускаемся. Кнопки уехали на место, но колонка свободного места осталась.

Смотрим в дерево. Видим, что там таблица на три колонки, из которых нам мешает третья. Но выделить её из трёх ни по классу, ни по id’у не получается.

Спускаемся внутрь, видим там <div> класса XoqCub с явно заданной шириной: style="width: 189px;". XoqCub’ов на странице полно. Попробуем подобрать правильный селектор:

.XoqCub[style] { border: 3px solid red !important; }

Ууу, сколько их много.

.eWTfhb>.XoqCub[style] { border: 3px solid red !important; }

А вот так уже нормально.

.eWTfhb>.XoqCub[style] { width: 0px !important; }

Ооо. Much better. Только правый край письма просвечивает через кнопки. И кнопки неплохо бы отбить чуть-чуть по краям.

.yMuNaf
{
  position: fixed !important;
  bottom: 0px !important;
  right: 0px !important;
  border: 1px solid silver !important;
  background: white !important;
  padding: 0px 3px !important;
}

Вот теперь можно жить.