Замена иконок на стандартных кнопках

Shumway · №1

Задача: создать свой собственный стиль без использования сторонних дополнений и тем, так как версии меняются очень быстро, и разработчики тем и дополнений не успевают, либо бросают поддержку своих продуктов.

Как разукрасить браузер я нашел: userChrome.css
Остался последний штрих: изменить стандартные иконки на кнопках «новая вкладка», «обновить», «печать» и т. д.

Где-то же они должны хранится. Или может где-то в настройках можно указать, где брать иконки для кнопок.

Кто знает, поделитесь, пожалуйста, знаниями.

imyax · №2

Уроки стилеписания на CSS | Форум Mozilla Россия
Настройка внешнего вида Firefox в userChrome.css | Форум Mozilla Россия
Restyle the web with Stylish! - userstyles.org

Отредактировано imyax (25-05-2011 21:04:02)

hydrolizer · №3

Shumway пишет

Где-то же они должны хранится.

Они в общем случае хранятся много где. Вот здесь, например: chrome://global/skin/icons/. Кнопки тулбара - вот здесь: chrome://browser/skin/Toolbar.png (все кнопки - в одном файле, по отдельно взятым кнопкам изображения распределяются с помощью -moz-image-region).

Shumway · №4

Спасибо за ссылки и подсказки.

Но там ни слова нет об иконках. Мне не нужен стиль, просто заменить стандартные иконки своими.

В указанном hydrolizer месте я нашел файл с иконками, но вот где он находится на жестком диске или где в настройках поменять к нему путь?

Вот, например, иконки на закладках можно поменять с помощью

Выделить код

Код:

toolbarbutton.bookmark-item {
list-style-image: url('the\path\to\yourimage.xxx') !important;

А можно ли также вставить команду для иконок панели инструментов?

Крошка Ру · №5

Но там ни слова нет об иконках. Мне не нужен стиль, просто заменить стандартные иконки своими.

Shumway , стиль может быть создан даже для замены одной иконки - таких сколько угодно . Иконки те же элементы интерфейса , которые можно изменять как и прочие с помощью стилей :angel: .... в Stylish и правке через userChrome.css используется практически один и тот же язык ( пусть меня поправят знающие :angel: )

Отредактировано Крошка Ру (26-05-2011 17:33:08)

hydrolizer · №6

Крошка Ру пишет

в Stylish и правке через userChrome.css используется практически один и тот же язык ( пусть меня поправят знающие)

Поправляю: не практически, а один и тот же

Shumway пишет

Но там ни слова нет об иконках. Мне не нужен стиль, просто заменить стандартные иконки своими.

Не в том направлении копаете. Заменить их путем замены файла, конечно, можно - нужно распаковать omni.jar, найти там файл с иконками, заменить по образу и подобию (см. выше про много иконок в одном файле), запаковать обратно. Но так никто не делает. Все правят UI через userChrome.css.

Крошка Ру · №7

Поправляю: не практически, а один и тот же

hydrolizer то есть можно копировать туда-сюда один к одному ? в смысле - без изменений, не добавляя какие-то сопроводительные значки ? :angel:

... а , ну да - я ж, когда Stylish в очередной раз отвалился ,просто перенёс стили в userChrome.css , правда не все заработали , потому и возникло предположение что следует учитывать некоторые нюансы :sick:

hydrolizer · №8

Крошка Ру
Stylish умеет применять стили динамически на рантайме. Стили из юзерхрома применяются один раз при старте браузера - если элемент, к которому они применяются, изменит свой вид после старта, то стиля не будет видно. В этом всё отличие.

Крошка Ру · №9

hydrolizer ага, теперь вроде бы понятно

vladmir · №10

hydrolizer

Но так никто не делает. Все правят UI через userChrome.cs

Врать не надо.))
У меня по ссылке в подписи уж лет 5 как написано как это легко меняется в коде и как кнопки всобачивать.

hydrolizer · №11

vladmir пишет

У меня по ссылке в подписи уж лет 5 как написано как это легко меняется в коде и как кнопки всобачивать.

Я очень за вас рад. Вы патчите Seamonkey каждый раз при выходе обновления?
И да, совет отредактировать XUL-разметку очень подходит человеку, который только-только начал разбираться с userChrome.css.

Shumway · №12

Еще раз спасибо всем.

Кое-что стало получаться.
Получилось изменить иконку через изменение файла Toolbar.png, спрятанного в omni.jar. Для теста просто перекрасил иконки – сработало.

С userChrome.css также есть успехи. Почитав материалы, ссылки на которые вы дали, нашел таки как обратиться к конкретной кнопке через CSS:

Выделить код

Код:

toolbarbutton[id="print-button"] {
background-color: red !important;
}

toolbarbutton[id="print-button"]:hover {
background-color: yellow !important;
}

Для полной победы не хватает лишь маленького штриха. Есть ли параметр в CSS, который описывает, какую картинку использовать в качестве иконки?

Пробовал background-image – не работает.

Добавлено.

Разобрался, не работает, так как цвет фона непрозрачен.
Вот так работает:

Выделить код

Код:

toolbarbutton[id="print-button"]{
background-color: Transparent !important;
background-image: url("colosseum_small.png") !important;
background-repeat: no-repeat !important;
background-position: top !important;
}

Но проблема в том, что родная иконка все равно отображается поверх картинки, положенной на фон.

То есть осталось лишь отключить ее, но как?

Отредактировано Shumway (27-05-2011 11:41:10)

hydrolizer · №13

Shumway пишет

Есть ли параметр в CSS, который описывает, какую картинку использовать в качестве иконки?

list-style-image

Shumway · №14

Ура!
Спасибо, hydrolizer, огромное :beer:
А также спасибо господам imyax и vladmir за полезные ссылки.

Теперь все заработало, вот код:

Выделить код

Код:

toolbarbutton[id="print-button"]{
list-style-image: none !important;
background-color: Transparent !important;
background-image: url("colosseum_small.png") !important;
background-repeat: no-repeat !important;
background-position: top !important;
}

И маленький вопрос, чтобы закрыть эту тему.
Для чего в каждой строке нужно писать !important; и можно ли опустить этот параметр в моем примере?

hydrolizer · №15

Shumway пишет

Теперь все заработало, вот код:

вообще это делается вот так:

Выделить код

Код:

#print-button {
    list-style-image: url("path_to_my_image\my_image.png") !important;
    -moz-image-region: auto !important;
}

Shumway пишет

Для чего в каждой строке нужно писать !important;

http://htmlbook.ru/css/!important

Shumway пишет

и можно ли опустить этот параметр в моем примере?

нет

Shumway · №16

Отлично.

Еще раз спасибо, вопрос полностью решен, и тему можно закрывать.

Отредактировано Shumway (27-05-2011 12:18:57)

vladmir · №17

hydrolizer

Вы патчите Seamonkey каждый раз при выходе обновления?

Само-собой я меняю всё как мне удобно в каждой версии, которую ставлю.

совет отредактировать XUL-разметку очень подходит человеку, который только-только начал разбираться с userChrome.css.

Во-первых, копипастом там любой может справиться, было бы желание. Во-вторых, это стимул изучить некоторые вещи. А если чел знаком с html то с xul он разберётся махом. Ну на уровне, достаточном для таких простых действий.

Но у тебя заява была не про тех, кто "только-только", а абсолютно про всех, якобы "Но так никто не делает. Все правят UI через userChrome.cs", что не соответствует окружающей дейстительности.

Полезная информация