Учимся менять дизайн

Понедельник, 23 Июня 2008 г. 21:55 + в цитатник

Учимся менять дизайн ЛиРу, избавляемся от рекламы, напоминания микроблога и тп.

Все изменения проверялись на случайных дневниках и различных страницах. Браузер: FireFox 3
Все нижеописанное будет работать только в FireFox (т.к. Stylish - для него сделан).

Краткая инструкция по установке.

1. ставим расширение Stylish для Mozilla FireFox

Stylish 0.5.7 (c сайта Mozilla)

Stylish 0.5.7 (локальная копия(меняем расширение с zip на xpi)
Страница расширения: https://addons.mozilla.org/en-US/firefox/addon/2108 и http://userstyles.org/stylish/

2. Загружаем в Stylish мои изменения. Берем тут: http://userstyles.org/styles/8215 (нажимаем Load into Stylish)
В окне с кодом жмем "Сохранить",

3. Наслаждаемся новым старым лиру) (работает на всех страницах, включая домены (которые зарегистрированы на сегодняшний день))

от чего мы избавились: надпись "не обновлялся"(в профиле ее оставим), дубляж "+в друзья" в каждом посте,дубляж этого же в профиле,реклама тулбара лиру внизу, реклама в дневнике, профиле, на странице топа.

до и после: (на примере тем_дня, излишняя информация в виде поста вырезана, рисунок не на всю ширину)

А теперь некоторые пояснения к коду, чтобы можно было вернуть нужное, либо убрать что-то еще.

0. что читать: исходные коды некоторых скриптов (смайл) и http://loc.stack.ru/projects/CSS2/cover.html - про CSS2. Наиболее важной для поиска и редактирования элемента страницы является глава 5 "Селекторы". Ну и 9я глава.

1. если мы установили стиль в Stylish - нажимаем редактировать.
если мы еще ничего не ставили - идем сюда и жмем Load into Stylish и редактируем код, а не сразу сохраняем.

2. изучаем мой код.
важно: /* текст */ - это комментарии.
!important в нашем случае следует писать во всех действиях
Итак. В начале объявляется пространство имен (эти строки не трогаем), затем объявляются домены, на которых должно работать изменение.

Далее код имеет вид объект[свойства объекта, по которым мы его ищем] {последующие действия}
Изменяем размер основного блока и немного сдвигаем его. (#CON {действия})
Изменяем размер левой панельки (#MNU, .MNUBL{width:155px !important;})
Выравниваем "меню" под аватаром по левой стороне (#MNU .MNUBL div div {float: left !important;})
Далее я отключаю рекламу, лишние надписи и напомнание микроблога о том, сколько я не писал.
(все действия в коде закомментированы). Ищутся нужные нам блоки просмотром и анализом исходного кода страницы.
div[id=] и так далее - выбираем объект div с id = заданному. (про *=, ^= и так далее - смотрим селекторы)
если написать [href=], то это будет относится ко всевозможным объектам с таким свойством.
Для неотображения объекта действие такое: {display:none !important}
Чтобы уменьшить код и сделать наглядным, все объекты с одинаковым действием можно перечислить через запятую (как это и сделано).
{margin-left:25px !important;} - позволяет двигать объект влево / вправо (значение может быть отрицательным и положительным)
Можно было бы отцентрировать статистику и подписи про музыку + сам плеер, но есть 1 проблемка: эти объекты такие же в профиле и поедут там точь-в-точь так же.
Кто знает как не увеличивая весь код в два раза обработать это - жду комментов)
В общем-то все.
Можно поиграться с шрифтами, цветами и т.п., но это уже для личных целей, а не массовости.

По поводу времени на "изучение" работы с Stylish: ночи хватает на подобное изменение, случайное удаление кода и написание его заново :):

По поводу рекламы:
чтобы рекламы не было нигде (ну или почти) используем