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

Пользователи не любят читать документацию. Станьте оригинальным, будьте не как все. Ознакомьтесь с нашей базой знаний.
  • Форумы
  •  » Firefox
  •  » Замена иконок на стандартных кнопках

№125-05-2011 20:44:31

Shumway
Участник
 
Группа: Members
Зарегистрирован: 14-11-2010
Сообщений: 11
UA: Firefox 4.0

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

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

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

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

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

Отсутствует

 

№225-05-2011 21:01:42

imyax
пользователь FF c 2010года
 
Группа: Members
Откуда: Сейчас здесь
Зарегистрирован: 13-04-2010
Сообщений: 209
UA: Firefox 4.0

Отсутствует

 

№326-05-2011 04:55:36

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Aurora 5.0

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

Shumway пишет

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

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

Отсутствует

 

№426-05-2011 13:44:26

Shumway
Участник
 
Группа: Members
Зарегистрирован: 14-11-2010
Сообщений: 11
UA: Firefox 4.0

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

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

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

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

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

Выделить код

Код:

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

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

Отсутствует

 

№526-05-2011 17:31:45

Крошка Ру
Участник
 
Группа: Extensions
Зарегистрирован: 19-10-2008
Сообщений: 8718
UA: Nightly 7.0

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

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

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

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

Отсутствует

 

№626-05-2011 18:23:33

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Aurora 5.0

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

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

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

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

Shumway пишет

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

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

Отсутствует

 

№726-05-2011 19:05:20

Крошка Ру
Участник
 
Группа: Extensions
Зарегистрирован: 19-10-2008
Сообщений: 8718
UA: Nightly 7.0

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

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

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

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

Отсутствует

 

№826-05-2011 20:46:59

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Aurora 5.0

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

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

Отсутствует

 

№926-05-2011 21:26:03

Крошка Ру
Участник
 
Группа: Extensions
Зарегистрирован: 19-10-2008
Сообщений: 8718
UA: Nightly 7.0

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

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

Отсутствует

 

№1026-05-2011 23:26:09

vladmir
SeaMonkey - вот это браузер
 
Группа: Extensions
Откуда: НН
Зарегистрирован: 16-10-2004
Сообщений: 4630
UA: Seamonkey 2.1

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

hydrolizer

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

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

Отсутствует

 

№1127-05-2011 04:42:20

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Aurora 5.0

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

vladmir пишет

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

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

Отсутствует

 

№1227-05-2011 11:22:23

Shumway
Участник
 
Группа: Members
Зарегистрирован: 14-11-2010
Сообщений: 11
UA: Firefox 4.0

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

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

Кое-что стало получаться.
Получилось изменить иконку через изменение файла 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)

Отсутствует

 

№1327-05-2011 11:26:17

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Aurora 5.0

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

Shumway пишет

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

list-style-image

Отсутствует

 

№1427-05-2011 11:49:08

Shumway
Участник
 
Группа: Members
Зарегистрирован: 14-11-2010
Сообщений: 11
UA: Firefox 4.0

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

Ура!
Спасибо, 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; и можно ли опустить этот параметр в моем примере?

Отсутствует

 

№1527-05-2011 12:08:57

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Aurora 5.0

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

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 пишет

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

нет

Отсутствует

 

№1627-05-2011 12:12:28

Shumway
Участник
 
Группа: Members
Зарегистрирован: 14-11-2010
Сообщений: 11
UA: Firefox 4.0

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

Отлично.

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

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

Отсутствует

 

№1727-05-2011 13:29:39

vladmir
SeaMonkey - вот это браузер
 
Группа: Extensions
Откуда: НН
Зарегистрирован: 16-10-2004
Сообщений: 4630
UA: Seamonkey 1.1

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

hydrolizer

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

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

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

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

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

Отсутствует

 
  • Форумы
  •  » Firefox
  •  » Замена иконок на стандартных кнопках

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]