MCP

среда, 21 июля 2010 г.

Раскраска Twitter через Opera user CSS

Сегодня я расскажу как ещё можно усовершенствовать сайт твиттера с помощью Opera. В прошлый раз я рассказывал про хитрый скрипт, который разворачивает ссылки и картинки. В этот раз займёмся внешним видом вашей страницы.
Точно также, как и в прошлый раз, создаём css-файл и в настройках сайта прописываем путь к нему.


Дальше начинается самое интересное. Мы будем писать стили для твиттера. У него весьма грамотно сделаны стили, поэтому это просто сплошное удовольствие.

Увеличение ширины страницы

Хоть твиттер и не предполагает широту взглядов, всё-таки на широких мониторах он выглядит немного узковато. Исправим это:
.subpage {width:883px !important; }
.footer {width:883px !important; }
.status-body {width:545px !important;}
#status {width:635px !important;}
#update_notifications {width:485px !important; }
В этом примере я увеличил ширину страницы на 120 пикселей. Т.е. поправил существующие значения на +120. Никто не мешает вам изменить всё это на свой вкус и сделать твиттер резиновым.

Выделение своих твитов

Берём класс .mine и раскрашиваем себя, чтобы было заметно.
.mine {background-color:#ffffe0 !important;color:#407010;}

Выделение чужих твитов

Тут всё тоже просто замечательно. Например, мы хотим выделить отдельно @pdidenko. Берём класс .u-pdidenko и красим его в симпатичный зелёный цвет
.u-pdidenko {background-color:#30ff30 !important;color:#407010;}
Естественно для каждого человека нужно раскрашивать отдельно. Для более сложной логики придётся использовать javascript или ещё более хитрые схемы. Но думаю, что если вы действительно читаете свою ленту, то там не так уж много людей, которых вы захотите выделить.

Выделение ссылок

Хэштеги, это особые ссылки, подкрасим их:
.hashtag {color: #333399 !important;}
Внешние ссылки тоже:
a.web {color: #1060c0 !important;}
Упоминание кого-то в твитах тоже можно подсветить:
a.username {color: #700030 !important;}

Тут у меня фантазия кончилась, но никто не мешает взять приглянувшийся элемент и в любое время изменить его. Это ведь несложно, и результат виден сразу.

Результирующий CSS не даю, т.к. раскраска может сильно не вписываться в вашу цветовую схему и вам нужно будет поправить цвета. Впрочем, собрать из кусочков целиковый CSS не представляет сложности.

Ну и, конечно, полученный результат будете видеть только вы, для остальных будет та же обычная страничка. С другой стороны, кто им мешает сделать тоже самое, но по-своему?

2 комментария:

  1. класс! Макс, для pdidenko опять указал опять mine - опечатка, видимо.

    ОтветитьУдалить
  2. класс! Макс, для pdidenko опять указал опять mine - опечатка, видимо.
    Спасибо, опечатку поправил.

    ОтветитьУдалить