Замена категорий иконок на каком-либо сайте

мозя · №1

Могли бы показать пример css для смены иконок на свои, например на этом сайте для головы мозиллы в форуме?

Заранее благодарю.

Отредактировано мозя (31-08-2012 12:32:01)

Alfina · №2

мозя пишет

например на этом сайте для головы мозиллы в форуме?

Просто заменяете адрес картинки на свой. Пример:

Выделить код

Код:

div.icon{background: url("http://static.iconsearch.ru/uploads/icons/siena/24x24/globered.png") no-repeat scroll 0 0 transparent!important;}

hydrolizer · №3

Кстати. Не так давно на глаза попалась вот эта дискуссия, там люди утверждают, что в ряде браузеров (Chrome/Safari/Opera) в рамках реализации CSS3 для замены непосредственно изображения у тэга IMG можно использовать правило content: url("..."):

Выделить код

Код:

<style>
.MyClass123{
    content: url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="MyClass123"/>

- примерно так. Проверил у себя на Firefox 16b - поддержки этого правила для IMG пока что нет; на MDN в документации описано использование в рамках CSS2 для псевдоклассов :before и :after.
Может быть, кто-нибудь в курсе, когда в Firefox планируется поддержка вышеописанного?

Отредактировано hydrolizer (12-09-2012 03:39:02)

hydrolizer · №4

iDev.Pi
Спасибо, мне всё это известно, достаточно было бы обычного "нет".
Ну, и кроме того, мне известно, что ряд нововведений из разрабатываемых стандартов уже вполне себе живут в Firefox, в т.ч. в виде правил, ситаксически соотвествующих стандарту: например. Поэтому и был задан вопрос - вполне могло оказаться, что это подобный случай.

iDev.Pi пишет

Если пробежишься по ссылочкам на 18-15 версии

Эмм... да я как бы в курсе и про эти страницы for developers. И, в частности, в курсе вот про такую ремарку на этих страницах:

DRAFT
This page is not complete.

То, что находится за рамками complete, может уже обсуждаться, например, в той же багзилле.

PEAKTOP · №5

А как тем же макаром заменить favicon сайта? Пробовал менять icon на favicon не прокатило. хочу заменить favicon для http://mdex-nn.ru уж очень бесит эта бегущая строка на вкладке и в адресной строке.

Этот код

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mdex-nn.ru") {

#page-proxy-favicon,
.tab-icon-image {
list-style-image: url("file:///DКартинки/mdex-nn.ru.png") !important;
-moz-image-region: rect(0, 16px, 16px, 0) !important;
}
}

Тоже не сработал. ЧЯДН?

Отредактировано PEAKTOP (24-10-2013 07:03:08)

Infocatcher · №6

PEAKTOP пишет

заменить favicon сайта?

Пример для иконок на вкладках.

PEAKTOP · №7

Infocatcher, а ничего, что в тех стилях делается замена иконки для приватных вкладок? У меня-то вкладки обычные. Или это без разницы?

Infocatcher · №8

PEAKTOP
Так на то это и пример, чтобы отредактировать его нужным образом.
Если удалить «.tabbrowser-tab[privateTab-isPrivate] », то применится ко всем вкладкам.
Или можно уточнить .tab-icon-image через .tab-icon-image[src="тут какая-то ссылка"]

PEAKTOP · №9

Infocatcher, отредактировал код под свои нужды, но иконка не меняется. Подскажи, пожалуйста, где ошибка? К сожалению мои познания в написании CSS-стилей, да и вообще в программировании минимальны

скрытый текст

Выделить код

Код:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mdex-nn.ru") {
        .tabbrowser-tab .tab-icon-image [src="http://mdex-nn.ru/application/maxsite/templates/easy/img/favicon.gif"]
        .tabbrowser-tab.tab-icon-image > .toolbarbutton-icon {
                list-style-image: url("scr=file:///D:/Картинки/mdex-nn.ru.png") !important;
                display: -moz-box !important;
                width: auto !important;
                height: auto !important;
                margin: 0 !important;
                padding: 0 !important;
                border: none !important;
        }
        .tabbrowser-tab .tab-icon-image > .toolbarbutton-text {
                display: none !important;
        }
}

Отредактировано PEAKTOP (24-10-2013 16:41:26)

iDev.Pi · №10

PEAKTOP
тебе же okkamas_knife уже сказал про неверную область применения.

PEAKTOP · №11

iDev.Pi, слова okkamas_knife принял к сведению. Но он не предложил варианта как сделать не скрытие, а замену. Поэтому я использовал код примера от Infocatcher из этого поста. Отредактировал как он и советовал. Получается, что и его код относится к юзерхрому?
Может быть ты подскажешь, как осуществить задуманное?

bunda1 · №12

Насчёт CSS не знаю, но для Сustom Buttons можно использовать код:

Выделить код

Код:

addEventListener("TabAttrModified", function(e) {   
   var tab = e.target;
   var doc = tab.linkedBrowser.contentDocument;            
   if ( doc.location.host == "mdex-nn.ru") tab.image = "chrome://global/skin/icons/error-16.png";   
}, true, gBrowser.tabContainer );

Добавлено 24-10-2013 20:04:47
CSS

Выделить код

Код:

#urlbar [src*='http://mdex-nn.ru/application/maxsite/templates/easy/img/favicon.gif#-moz-resolution=16,16'],
.tabbrowser-tabs tab [src*='http://mdex-nn.ru/application/maxsite/templates/easy/img/favicon.gif#-moz-resolution=16,16']{
background:url("chrome://global/skin/icons/error-16.png") no-repeat !important;
padding-right: 16px !important;
}

Отредактировано bunda1 (24-10-2013 20:04:47)

littleleshy · №13

PEAKTOP пишет

Получается, что и его код относится к юзерхрому?

А к чему же ещё-то?

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

№131-08-2012 12:13:18