Изменяя лицо или как себе обустроить форум
Ключевые слова: Миста, mista, firefox, javascript, greasemonkey, engine
Начало
Честно говоря, не в обиду Стасу, меня всегда немного раздражала навигация на форуме. Точнее, отсутствие таковой...
(дальше пропущено строк 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. Убираем навигацию
Итак, навигация... на мисте навигация устроена эээ... никак. Попробуем собрать все в одно меню. Но для начала подготовим место. Если посмотреть в исходник страницы, то можно увидеть, что вся верхняя навигация лежит во второй строке таблицы header-table. Чтобы точно не промахнутся, я получаю эту строку с помощью именованной первой колонки (там, где обычно написано "Превед, Asmody"), и, заодно, создаю заготовку под свое будущее меню:
var tr_navigation=document.getElementById("user-td").parentNode;
var td_new_navigation=document.createElement("td");
td_new_navigation.id="new-navigation-td";
td_new_navigation.colSpan=2;
navigation='тут будет меню';
td_new_navigation.innerHTML = navigation;
tr_navigation.innerHTML='';
tr_navigation.appendChild(td_new_navigation);
В предпоследней строке совсем зверски вырываем "родную" навигацию, а в послежней аккуратно пришиваем свою.
Примерно вот так это будет выглядеть: http://img488.imageshack.us/my.php?image=mistaasmodystyle2yn5.png
(кстати, этот скрин сделан на домашнем компе, под убунтой. Как видите на деле разницы не много, за что мне и нравится FireFox!)
Шаг 3. Заготавливаем менюШаг 4. Натягиваем стиль
Шаг 5. Чиним воротаШаг 6. Себя не похвалишь...
Все картинки
Начало - http://img338.imageshack.us/my.php?image=mistaasmodystyle0wk9.jpg
Без навигации - http://img488.imageshack.us/my.php?image=mistaasmodystyle2yn5.png
Финал - 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 |