Изменяя лицо или как себе обустроить форум
Ключевые слова: mista, firefox, javascript, greasemonkey
Начало
Честно говоря, не в обиду Стасу, меня всегда немного раздражала навигация на форуме. Точнее, отсутствие таковой...
(дальше пропущено строк 50 рассуждений о красоте мира, об эстетике, о юзабилити и прочей фигне)
Ладно, каюсь. Началось с того, что я поставил себе Greasemonkey. Как написано в wikipedia, "Greasemonkey — расширение Mozilla Firefox позволяющее добавить на любую страницу пользовательский
JavaScript". Живет эта обезьяна тут: http://www.greasespot.net/
Так вот, поставил я себе Greasemonkey, и подумал: "а зачем, собственно?" Но раз есть такое средство, нужно же на чем то его испробовать. А на чем же его еще пробовать, как не на любимом сайте? :)
Все плохо
Смотрел я на Мисту такую: http://img338.imageshack.us/my.php?image=mistaasmodystyle0wk9.jpg (можете не открывать, такой ее все и видят, если серый фон установить и строки по темам раскрасить) и думал - что меня не устраивает?
Не устроило меня:
1. Баннер (сразу вру, потому как AdBlock plus баннеры режет отменно);
2. Поиск "в полу";
3. Навигация;
4. "Превед, Asmody"
Ну хватит для начала.
Избавление близко
Я решил написать скрипт для Greasemonkey. (Да! Я с версии 2.0 плотно "сижу" на FireFox'e. И пусть Opera правильнее, а IE (в исполнении Maxthon) роднее, с FireFox'ом у меня минимум проблем, особенно при постоянной миграции с win на lin и обратно.) Как писать скрипты для этой обезьяны хорошо написано тут: http://diveintogreasemonkey.org/. По-этому повторяться не буду, а сразу перейду к делу.
Шаг 0. Заготовка
Обезьян требует специального заголовка для скрипта. У меня получился такой:
// Asmody.forum.mista.ru !!!
// version 0.1 BETA!
// 2007-06-15
// Copyright (c) 200 ,
// Released under the GPL license
// http://www.gnu.org/copyleft/gpl.html
//
// --------------------------------------------------------------------
//
// This is a Greasemonkey user script.
//
// To install, you need Greasemonkey: http://greasemonkey.mozdev.org/
// Then restart Firefox and revisit this script.
// Under Tools, there will be a new menu item to "Install User Script".
// Accept the default configuration and install.
//
// To uninstall, go to Tools/Manage User Scripts,
// select "Asmody.forum.mista.ru !!!", and click Uninstall.
//
// --------------------------------------------------------------------
//
// ==UserScript==
// @name Asmody.forum.mista.ru !!!
// @namespace http://www.forum.mista.ru/
// @description Asmody STYLE >;)) for the Mista.ru forum
// @include http://www.forum.mista.ru/index.php*
// @exclude
// ==/UserScript==
В коде, кстати, написано, как устанавливать скрипты. Сохраняется это в файле mista.user.js и открывается в FireFox. Если обезьян установлен, то он скажет, что нашел скрипт. Значит мы на правильном пути!
Шаг 1. Баннер долой!
Смотрим в "исходник" страницы. Видим, что баннер рисуется такой строкой:
<td id="banner-td"><a href="http://www.1ab.ru/vakan.php" target="_blank"><img border="0" src="inc/work4.gif"></a></td>
Адрес ссылки и картинки может отличаться, главное для нас, что Стас любезно положил баннер в ячейку таблицы, которой присвоил идентификатор banner-td.
Таким образом баннер можно "погасить":
var top_banner = document.getElementById("banner-td");
top_banner.style.display = 'none';
Другим образом баннер можно просто убрать:
var top_banner = document.getElementById("banner-td");
top_banner.innerHTML = '';
Но лучше всего - поместить на место баннера форму поиска! И тут я наткнулся на проблему: у формы поиска не было id, только name. Полазив по примерам скриптов, я нашел конструкцию, которая позволяет "достучаться" практически до любого тега. Основана эта конструкция на XPath. Получилось вот что:
var top_banner = document.getElementById("banner-td");
var search_form = document.evaluate("//form[@name='findform']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
top_banner.innerHTML = search_form.parentNode.innerHTML;
search_form.parentNode.innerHTML=" ";
Прокомментирую: я взял ячейку banner-td, и ее "содержимое" заменил на html-код формы поиска. А на то место, где был код формы я написал неразрывный пробел. Таким образом форма "переехала" на место баннера. На мой взляд ей тут самое место.
Шаг 2. Убираем навигациюШаг 3. Заготавливаем меню
Шаг 4. Натягиваем стильШаг 5. Чиним ворота
Шаг 6. Себя не похвалишь...Все картинки
Начало - http://img338.imageshack.us/my.php?image=mistaasmodystyle0wk9.jpg
Финал - http://img505.imageshack.us/my.php?image=mistaasmodystylejk0.jpg
Форма входа - http://img529.imageshack.us/my.php?image=mistaasmodystyle1mu3.jpg
Активно использованные ресурсы:
Проект Greasemonkey - http://www.greasespot.net/
Учебник - http://diveintogreasemonkey.org/
Справочник по DOM - http://experiment.net.ru/dom/
Справочник по JS - http://experiment.net.ru/js1/index.php
Выпадающее меню на CSS - http://beholder-eye.info/2006/03/30/dropdown-menu-css
|