Персонализированный


Вы здесь: Авторские колонки FantLab > Авторская колонка «GBV» > Персонализированный Фантлаб
Поиск статьи:
   расширенный поиск »

Персонализированный Фантлаб

Статья написана 16 февраля 2011 г. 21:23
Сегодня мы немного отвлечёмся от литературной тематики и поговорим о том, какие замечательные возможности есть у браузера Google Ghrome по изменению внешнего вида (и не только) любого web-сайта под вкус каждого отдельного пользователя. Объектом экспериментов станет всеми любимый сайт Лаборатория Фантастики, над внешним видом которого мы и будем издеваться (чисто в клиентской части, разумеется). Статья в первую очередь актуальна для пользователей Google Chrome (в дальнейшем «гуглохром») версии 4 и выше, но наработки из статьи могут быть использованы и в других браузерах, если там есть подобные возможности.

Итак, для начала нужно сделать три клика левой кнопкой мыши и установить расширение по ссылке Personalized Web.


Далее нужно добавить набор правил для конкретного сайта, который мы в дальнейшем будем называть «темой». Я уже подготовил одну демонстрационную тему для Фантлаба, теперь подробная инструкция, как её установить, это совсем не сложно:
1. Открываем щелчком мыши внизу статьи прикреплённый текстовый файл damp.txt, копируем содержимое: Ctrl+A, Ctrl+C;
2. Переходим на страницу расширений гуглохрома: Настройки и управление->Инструменты->Расширения (минуя пункт «Инструменты» если у вас ранняя версия браузера) или переходим по ссылке chrome://extensions/, кликаем по кнопке Настройки напротив расширения Персонализированный Веб;
3. В открывшейся вкладке нажимаем вторую по счёту кнопку внизу Загрузить дамп, в поле ввода в открывшемся окошке вставляем скопированный в пункте 1 набор иероглифов, нажимаем ОК;
4. Сохраняем изменения кнопкой Сохранить, теперь, пока тема активна, можно смело открывать любую страничку Фантлаба и смотреть, что получилось.
Вот пара скриншотов, как будет выглядеть сайт.
главная страница

страница форума с открытым «Моим портфелем»

Вот список изменений, внесённых этой темой:
  1. как хорошо видно, Фантлаб немного «позеленел». Перекраска не полная и сделанная на скорую руку, такой уж я художник, но в принципе раскрасить при наличии желания и времени можно всё, что угодно, позаменять все рисунки;
  2. изменено меню «Мой портфель»: оно стало уже, под размер окна с информацией о профиле, добавлен пункт для изменения регистрационной информации, добавлен анимационный эффект при появлении и исчезании этого меню;
  3. заменены для примера несколько смайликов на форуме. Например, кому-то недавно не нравилось, что на странице литературного ресурса слишком много пива — все пивные смайлики :beer: заменены на рукопожатие .
В общем, пример скорее демонстрационный, чем полностью законченный, сделать можно ещё много различных изменений, а вообще без поддержки сервера на чистом JavaScript далеко не уедешь. Кто разбирается в web-вёрстке, может самостоятельно улучшить эту тему или создать полностью свою, для этого можно открыть снова открыть настройки Персонализированного Веба изменить содержимого полей «Добавлять CSS» и «Добавлять HTML». В пример вошли не все наработки, например, я для своего 22-дюймого монитора увеличил размер текста на Фантлабе — уж больно неудобно читать мелкий текст. Чтобы вернуть эту возможность в тему, необходимо на странице её настройки в поле «Добавлять CSS» внести такие строки:
font.v9b {
font-size: 18 !important;
}
p {
font-size: 16 !important;
}
a {
font-size: 12 !important;
}

Важный момент — чтобы изменённая менюшка портфеля правильно работала, ссылалась всегда на ваш профиль, а не на мой, в поле «Добавлять HTML» темы желательно найти поиском по странице число 20655 (их всего три) и позаменять на конкретно свой ID фантлабовского аккаунта.
Снова таки, знакомые с «тремя китами web-вёрстки» смогут самостоятельно разобраться в примере и внести свои изменения/улучшения.
Пока всё, ждём предложения, замечания и вопросы по статье:-)


Тэги: web

Файлы: damp.txt (5 Кб)


190
просмотры





  Комментарии


Ссылка на сообщение16 февраля 2011 г. 23:02
а для Оперы слабО?
Я металлург, а не программист, увы...
свернуть ветку
 


Ссылка на сообщение16 февраля 2011 г. 23:56

цитата old_fan

а для Оперы слабО?

Не специалист я по Опере 8:-0 В принципе, подобные возможности в ней должны быть, но у меня сейчас даже не установлена Опера, поэтому ничего проверить пока не смогу. Если и займусь другими браузерами кроме гуглохрома, то не раньше следующей недели, тогда возможно напишу ещё статейку.


Ссылка на сообщение21 февраля 2011 г. 08:34
Сделал всё, как сказано. Ничего не получилось. А так хотелось зелёненький фантлаб с такими цветами!:-(((
свернуть ветку
 


Ссылка на сообщение21 февраля 2011 г. 11:49

цитата Fadvan

Сделал всё, как сказано. Ничего не получилось. А так хотелось зелёненький фантлаб с такими цветами!

Вы заходите через http://fantlab.ru или через http://www.fantlab.ru ? Если по первому варианту, то не получится, это недоработка, над устранением которой я пока работаю, нужно использовать «канонический» адрес Фантлаба


⇑ Наверх