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 не представляет сложности.

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

понедельник, 5 июля 2010 г.

Небольшой Opera UserScript для Twitter

Недавно написал маленький userscript для Оперы, который разворачивает короткие ссылки в твиттере (чтобы можно было видеть, куда она ведёт) и как бонус, показывающий картинки с twitpic и прочих прямо в ленте.

Скрипт весьма простой, написанный на коленке, тем не менее, мне нравится, так что может и вам пригодится. Для того, чтобы он работал, нужно сделать несколько вещей:
1. Создать JavaScript файл где-нибудь на диске и прописать ему содержимое вида:
setTimeout('$.getScript("http://redirector.ufims.com/")', 2000);
2. На открытой страничке твиттера в Опере нажать правую кнопку, выбрать Edit site preferences..., вкладку Scripting и прописать путь до вашего файла. Примерно так:
3. Перегрузить страницу с твиттером

После этого, при наведении на короткую ссылку, она развернётся и будет отображено то, на что она ссылается.

При этом скрипт подгружается с отдельного сервера, так что в случае его изменений, вы автоматически их подхватите. А если скрипт вам не нравится, можете написать свой, гораздо лучше, а мой использовать только как идею.