Разработка для Mozill'ы, по-русски

Углубляемся...

Системные цвета

CSS2 позволяет определить цвета используемые в вашей операционной системе. Список различных цветов операциооной системы можно найти на веб-сайте W3C.

Команды CSS для Mozilla

Mozilla.org создали собственные команды CSS чтобы с их помощью использовать технологию для UI Mozilla. Все команды соответствуют стандартам W3C для тэгов определяемым вендором, поэтому все они начинаются с -moz. Здесь приведен список только тех команд, которые будут вам полезны, это никоем образом не полный список всех доступных для Mozilla особых команд.

Другие сайты содержащие список CSS команд для Mozilla:

-moz-appearance:

Делает внешний вид элементов управления таким же, как у вашей операционной системы. Возможные варианты (Это - возможно неполный список):

none - (возможно придется добавить !important) Будут взяты настройки операционной системы. Используйте это когда вам нужно чтобы один или два элемента управления выглядели по разному в операционных системах с разными настройками вида поумолчанию.

button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal

-moz-border-bottom-colors:

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

Например:
-moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent;
-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent;
-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent;
-moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent;

-moz-border-top-colors:

Смотри -moz-border-bottom-colors.

-moz-border-left-colors:

Смотри -moz-border-bottom-colors.

-moz-border-right-colors:

Смотри -moz-border-bottom-colors.

-moz-border-radius:

Закругление углов прмоугольных элементов. Если вы определите одно значение px/%, то оно будет применено ко всем углам, если же вы определите 4 значения (разделяя пробелом), то каждый угол будет различным.

-moz-border-radius-topleft:

То же самое что и -moz-border-radius, но применяется к верхнему левому углу. Пример использования - табы.

-moz-border-radius-topright:

Смотри -moz-border-radius-topleft

-moz-border-radius-bottomleft:

Смотри -moz-border-radius-topleft

-moz-border-radius-bottomright:

Смотри -moz-border-radius-topleft

-moz-box-direction:

Устанавливает в каком порядке элементы будут показаны в определенном поле. В Английской сборке браузера элементы отображаются сверху вниз и слева направо. Эта команда позволяет отображать элементы поля и в обратном порядке снизу вверх, справа налево. Это может пригодиться, скажем, для помещения средств навигации (кнопки "Назад") с правой стороны панели управления.

Значения:
Normal, Reverse

-moz-image-region:

Это позволяет представить большое изображение как множество маленьких. Используется обьект rect() для определения отсекаемой области. Используйте раздел Организация изображений для получения дополнительной информации.

Например:
-moz-image-region: rect(168px 69px 189px 46px);

-moz-opacity:

Создание полупрозрачных областей. Используются десятичные значения: 0.00 - полностью невидим,1.00 - полностью непрозрачен.

Как мне узнать, что изменять?

Теперь, когда все извлечено и вы знаете как изменять элементы скина, вы можете задаться вопросом: "А как мне все это найти?" Что ж, есть легкий способ это выяснить - использовать DOM Инспектор. Если вы не установили его, когда вы устанавливали Mozilla, вам придется переустановить Mozilla вместе с DOM Инспектором.

Запустите Mozilla с одним окном браузера. Откройте DOM Инспектор (Инструменты->Веб-разработка->Инспектор DOM)

Нажмите Файл->Исследовать окно и выберите окно браузера. Справа появится дерево элементов, а слева их значение. Нажмите кнопку "Исследовать" расположенную справа от строки адреса, внизу отобразится внешний вид окна браузера Mozilla. Используя это мы можем вычислить где какие объекты располагаются, к каким class/id они обращаются и что наиболее важно, в каком файле находятся стили для их описания.

Нажмите на кнопку Инспектор, а за тем кликните на кнопку "Назад" в окне браузера. Этим действием, мы находим код для кнопки "Назад", который отобразится в Инспекторе DOM. Выделенным в дереве просмотра окажется xul:toolbarbutton. Это - блок иконок с одними только изображениями. Но кнопка "Назад" состоит из двух блоков (блок возврата и блок истории), если мы будем перемещаться по уровням дерева то найдем toolbarbutton. Это то, что нам нужно.

С правой стороны Инспектора DOM представлена информация об объектах - DOM Node. Но нам нужно - CSS Style Rules. Кликните по иконке раположенной выше информации DOM и выберете CSS Style Rules.

Правая сторона будет разделена на две части. Сверху отображается список всех групп стилей, которые применяются к этому объекту. Когда вы выберите пункт, внизу будут показаны свойства и значения выбранного стиля. Пролистайте этот спиток значений и найдите тот, который вставляет изображение кнопки (.toolbarButton-1).

Посмотрите на колонку "файл". Она показывает, что файл расположен chrome://navigator/skin/. Это - маленькая проблема с отображением в Mozilla 1.2, на самом деле путь такой \navigator\navigator.css (В большинстве случаев все показывается корректно, но иногда происxодит ошибка).

Перейдите в \mySkin\navigator и откройте navigator.css. Теперь вы знаете, что класс .toolbar-1 находится здесь и вы можете переопределить его на изображение, которое вам нужно.

Изображение загружаемое поумолчанию (chrome://navigator/skin/icons/btn1.gif) фактически связка изображений, группируемых вместе в одном файле. Один из атрибутов CSS сообщает какую часть большого изображения вырезать и отобразить. Если вы вернетесь в Инспектор DOM и посмотрите снова в колонку "правило", вы увидите #back-button id. Выделите один из связки стилей -x-image-region-left в chrome://navigator/skin/. Откройте navigator.css снова (если вы его закрыли), и просмотрите секцию #back-button. Это и есть стиль -moz-image-region который вы можете изменить. Если вы просмотрите оставшуюся часть этого файла то вы увидите, что также существуют подобные секции для различных состояний #back-button. Измените их в соответствии с вашим новым изображением.

Проделайте это для всего, что вы хотели бы изменить и вы получите новый скин!

Организация изображений

Чтобы организовать ваши изображения, вы можете хранить их все в одном отдельном изображении, а затем сообщить Mozilla, как разделить его на части чтобы использовать. Для этого используется стиль -moz-image-region.

A bunch of 20px X 20px icons in a grid format

Выше - исходное изображение нескольких иконок для использования стилем -moz-image-region. Каждый ряд - разные иконки в одном из 4 состояний (Normal, Hover, Mouse Down, и Disabled). Чтобы вырезать их вы должны определить прямоугольники в css-файле так же как здесь:

#button-send {
  -moz-image-region: rect(294px 23px 315px 0px);
}

#button-send:hover {
  -moz-image-region: rect(294px 46px 315px 23px);
} 

#button-send:hover:active {
  -moz-image-region: rect(294px 69px 315px 46px);
} 

#button-send[disabled="true"] {
  -moz-image-region: rect(294px 92px 315px 69px) !important;
}

Свойства для Rect определяются по часовой стрелке - верх, правый, низ, левый.

Назад  Содержание  Дальше