BOROZDILKA.RU

на главную | пишите нам | версия для печати

Меняем серую полосу панели вкладок SpeedDial на изображение

В одной из статей я описывал расширение Speed Dial для браузера FireFox. На сей раз мы будем его курочить. Изменения будут визуальными, а именно, мы зададим фоновое изображение для панели Speed Dial, на которой расположены вкладки групп. При задействованных темах или обоях (они же Personas) и заданном фоновом изображении в основном окне Speed Dial, пустая серая полоса уж очень сильно выбивается из интерьера. Для наглядности сравним то, что было, с тем, что будет.

Первозданный вид панели вкладок Speed Dial
Первозданный вид панели вкладок Speed Dial

После модификации
После модификации

Итак, для начала приведём упрощенную структуру изменяемой страницы:

<vbox class="sd-tabbox" id="speeddialTabbox"> <hbox class="sd-tabs" id="speeddialTabbox-tabs"></hbox> <hbox class="sd-tabpanels" id="speeddialTabbox-panelContainer"></hbox> </vbox>

speeddialTabbox – подложка всей страницы, на (или поверх) которой в верхней части находится полоса с вкладками групп (speeddialTabbox-tabs), а ниже панель выбранной группы (speeddialTabbox-panelContainer) с миниатюрками страниц.

У каждой группы Speed Dial своё фоновое изображение, оно выводится на основную панель и не распространяется на панель вкладок. Поэтому, если мы хотим использовать эти изображения, то нам придётся перелопатить весь код расширения, чтобы сделать обе панели прозрачными, а фон выводить на подложку и менять его при переходе от одной группы к другой. Попутно переписать код всех связанных с фоновыми рисунками окон и пересмотреть назначение некоторых настроек. В общем, не как на рабочем столе обои поменять.

Поэтому, в качестве фона будем использовать текущие обои (Personas, если кто забыл). Обычно они находятся по следующему пути (Windows XP):

*:\Documents and Settings\Имя пользователя\Application Data\Mozilla\Firefox\Profiles\********.default\personas\cache\Папка с номером\header.png

Кому что нравится, а я использовал Paint.NET. Не изобретая велосипедов, делаем снимок (кнопкой «Print Screen» на клавиатуре) окна браузера, вставляем в редактор. Теперь слоем выше загружаем файл обоев header.png, делаем его полупрозрачным и совмещаем с фоновым изображением. Теперь сверху срезаем лишнее, как показано на рисунке, по нижней кромке панели вкладок браузера. Оставшуюся полоску копируем в новый файл и сохраняем под другим именем (в моём случае «header2.png»).

Совмещаем картинку обоев с фоновым изображением
Совмещаем картинку обоев с фоновым изображением

Теперь переходим непосредственно к расширению. Найти его можно по следующему пути:

*:\Documents and Settings\Имя пользователя\Application Data\Mozilla\Firefox\Profiles\********.default\extensions\

Много папок с непонятными названиями, и не знаете, которая из них нам нужна? Тогда откройте в FireFox страницу «about:support» и в таблице под заголовком «Расширения» в столбце «Имя» найдите «Speed Dial». В этой же строке, но в столбце «ID», вы найдёте название папки, в которой лежат файлы расширения Speed Dial. Переходим в неё, дальше – в папку «chrome» и находим файл «speeddial.jar». На всякий случай сделайте его резервную копию.

Для дальнейших манипуляций необходимо закрыть все окна FireFox. Теперь меняем расширение файла «speeddial.jar» на «.zip», открываем, проходим по пути «skin\classic\speeddial» и открываем файл «windows.css».

Вспоминаем, что будем прописывать фон для блока

<hbox class="sd-tabs" id="speeddialTabbox-tabs" …>

Поэтому находим в файле следующие строки:

hbox#speeddialTabbox-tabs {
-moz-binding: url('chrome://speeddial/content/speeddial.xml#tabs') !important;
/*overflow-x: hidden; */
}

И меняем их на:

hbox#speeddialTabbox-tabs {
-moz-binding: url('chrome://speeddial/content/speeddial.xml#tabs') !important;
background-image: url("chrome://speeddial/content/header2.png");
background-position: right top;
background-repeat: no-repeat;
/*overflow-x: hidden; */
}

Новые строки указывают, что в качестве фона будет использовано наше изображение, которое будет примагничено к правому верхнему углу (right top) и выводиться без повторения или «не плиткой» (no-repeat). Это необходимо для того, чтобы при изменении размеров окна браузера картинки по-прежнему стыковались между собой.

Само изображение нужно поместить в этом же архиве в папку «content» (находится в корне архива).

Сохраняем все изменения, закрываем архив и меняем расширение обратно на «.jar». Открываем FireFox и любуемся.

Конечно, можно было и не встраивать картинку в расширение, но раз уж мы всё равно его меняем, то почему бы и нет, тем более, что и путь до картинки будет выглядеть в коде короче, да и не будет проблем со сменой путей или отсутствием картинки на диске при её случайном удалении.

Ну, и на последок.

Смотрится, конечно, красиво, но есть существенный минус – если вы часто меняете обои, то придётся также часто менять фоновый рисунок. Правда, меня это мало заботит, потому что обои я меняю только один раз – при установке FireFox. Ну а вам в помощь фантазия и прямые руки, растущие из правильного места.

Кому понравились обои, сообщаю, называются они «Angel of Death 2010» с интригующим описанием «the angel of death is watching». Автор: Ben2Jam – увидите, передайте от меня «спасибо».

Если вы не используете темы или обои, то и убогая серая полоса не будет особо бросаться в глаза. В противном случае ищите, где там хранятся фоновые изображения и определяйте, как вам лучше их нарезать и пристыковать.