Настройка внешнего вида Firefox в userChrome.css

negodnik · №1551

Pony_Smile_Pack
Не, «на некоторых сайтах» не надо. Мне в userContent строку разделить, в которой изначально пробелов не было.
Может значок какой хитрый есть, вроде \n

Отредактировано negodnik (05-08-2014 17:37:33)

Zafod Biblbroks · №1552

Прошу прощения, если вопрос уже задавался (не нашёл), но можно ли как-то с помощью userChrome.css создать вверху панели вкладок [firefox] полоску шириной в один пиксель, как в [opera] для удобного масштабирования окна браузера?

jkeks · №1553

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

Иконочка без текста, у меня их много, но хотя бы для одной научиться бы.

villa7 · №1554

jkeks
Сначала присвойте названия букмарклетам, например 1,2,3... и т.д.
для идентификации. Надписи потом этим скроете

Выделить код

Код:

.bookmark-item .toolbarbutton-text {-moz-appearance: none !important;
display: none !important;}

а иконки вставляйте этим, только номер и иконки меняйте.

Выделить код

Код:

.bookmark-item[label="1"] {-moz-appearance: none !important;
list-style-image: url("ИКОНКА")   !important; 
-moz-image-region: auto !important;  }

Ну и до кучи, как делать иконки, если что. Подбираете иконки .ico, .png, .jpg, размер 16х16, ну или свой, и переводите их в base64 и вставляете в код вместо надписи ИКОНКА, кавычки остаются. Всё.
Кликнуть по картинке.

Отредактировано villa7 (18-08-2014 17:39:11)

amid525 · №1555

Не подскажите, как сделать в ff неоновое оформление в адресной строке, как тут?

Отредактировано amid525 (16-09-2014 00:30:26)

villa7 · №1556

amid525

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#urlbar {background: #eee !important;}

или с градиентом

Выделить код

Код:

#urlbar 
{background:  -moz-linear-gradient(top, #999999, #ffffff, #999999) no-repeat  !important;}

Отредактировано villa7 (16-09-2014 00:48:49)

amid525 · №1557

Блин, ничего не поменялось, в обоих случаях..

villa7 · №1558

amid525
Эти коды нужно ложить в userChrome.css

amid525 · №1559

Получилось в данном файле.
Только, ваш villa7 первый вариант не заработал, второй сработал, но серый а не неоновое оформление

Добавлено 16-09-2014 01:14:46
Вот что получилось (синяя рамка широковата)

А хотелось бы как тут

Как можно по-узить?

Отредактировано amid525 (16-09-2014 01:14:46)

villa7 · №1560

amid525
Я так понимаю это бордюр

Выделить код

Код:

border: 1px solid  !important;

turbot · №1561

amid525

Выделить код

Код:

#urlbar {
    box-shadow: 0px 0px 3px 1px rgba(0,104,205,0.8) inset!important;
}

Первые два значения - сдвиг тени по оси x/y, третье - радиус размытия тени, четвертое - растяжение тени и, наконец, цвет в палитре rgb + прозрачность от 0 (полная), до 1 (непрозрачная). inset - тень отображается внутри элемента. Подгоняйте под себя.

amid525 · №1562

villa7, turbot спасибо! Второй код в точку.)

amid525 · №1563

turbot пишет

#urlbar {
box-shadow: 0px 0px 3px 1px rgba(0,104,205,0.8) inset!important;
}
Первые два значения - сдвиг тени по оси x/y, третье - радиус размытия тени, четвертое - растяжение тени и, наконец, цвет в палитре rgb + прозрачность от 0 (полная), до 1 (непрозрачная). inset - тень отображается внутри элемента. Подгоняйте под себя.

Не подскажите, как данную неоновую рамку, сростить и для строки поиска с данной надстройкой.

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

#searchbar .searchbar-textbox:hover{
-moz-appearance: none !important;
box-shadow: orange 0px 0px 2px 2px! important;
}

#searchbar .searchbar-textbox[focused="true"]{
box-shadow: lightgreen 0px 0px 1px 2px!important;

Отредактировано amid525 (16-09-2014 21:28:17)

turbot · №1564

amid525

Если хотите исключительно статичную подсветку, то оставьте только:

Выделить код

Код:

#searchbar .searchbar-textbox {
    box-shadow: 0px 0px 3px 1px rgba(0,104,205,0.8) inset!important;
}

Псевдоэлемент :hover - означает, что стиль применяется к элементу при наведение на него курсора, [focused="true"] - (если упростить) при помещении в него курсора.

Соответственно, меняя цвет для каждого условия:

Выделить код

Код:

#searchbar .searchbar-textbox {
    box-shadow: 0px 0px 3px 1px rgba(0,104,205,0.8) inset!important;
}

#searchbar .searchbar-textbox:hover {
    box-shadow: 0px 0px 3px 1px rgba(0,64,165,0.9) inset!important;
}

#searchbar .searchbar-textbox[focused="true"] {
    box-shadow: 0px 0px 3px 1px rgba(0,44,145,0.9) inset!important;
}

мы получим, что тень будет становиться темнее при наведении или помещении курсора в поисковую строку. А вообще все это есть в ссылке из шапки:http://htmlbook.ru/css Цвет легко можно подобрать с помощью какого-нибудь колорпикера (например)

Отредактировано turbot (16-09-2014 21:53:56)

amid525 · №1565

turbot
вставил ваш второй код, получилась только статическая подсветка. При наведении мыши нет инных оформлений..
Вот и у меня получалось - так или с наведением..

Отредактировано amid525 (16-09-2014 22:53:40)

turbot · №1566

amid525, попробуйте так:

Выделить код

Код:

/*AGENT_SHEET*/
#main-window:not(:-moz-lwtheme)[defaultfxtheme="true"] #searchbar .searchbar-textbox {
    box-shadow: 0px 0px 3px 1px rgba(0,104,205,0.8) inset!important;
}

#main-window:not(:-moz-lwtheme)[defaultfxtheme="true"] #searchbar .searchbar-textbox:hover {
    box-shadow: 0px 0px 3px 1px rgba(0,64,165,0.9) inset!important;
}

#main-window:not(:-moz-lwtheme)[defaultfxtheme="true"] #searchbar .searchbar-textbox[focused="true"] {
    box-shadow: 0px 0px 3px 1px rgba(0,44,145,0.9) inset!important;
    border-color: rgba(0,0,0,0.9)!important;
}

Ах да, это ж тема по userChrome.css... Возможно, нюансы, ибо я Stylish'ом пользуюсь.

Отредактировано turbot (16-09-2014 23:15:07)

amid525 · №1567

ни как вообще. )

turbot · №1568

amid525
Не знаю, у меня со Stylish'ем работает и так и так. Возможно какое-то расширение перебивает ваш стиль из userChrome.css.

И да, вы браузер перезапускаете после внесения изменений в userChrome.css? Они только после перезапуска применятся.

Отредактировано turbot (16-09-2014 23:24:35)

amid525 · №1569

Конечно перезапускаю.

turbot · №1570

amid525
Проверил с userChrome.css. У меня нет проблем с вот этим кодом:

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

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); 
    #main-window #nav-bar .searchbar-textbox,
    #main-window #nav-bar #urlbar {
        box-shadow: 0px 0px 3px 1px rgba(0,104,205,0.8) inset!important;
    }

    #main-window #nav-bar .searchbar-textbox:hover,
    #main-window #nav-bar #urlbar:hover {
        box-shadow: 0px 0px 3px 1px rgba(0,64,165,0.9) inset!important;
    }
    
    #main-window #nav-bar .searchbar-textbox[focused="true"],
    #main-window #nav-bar #urlbar[focused="true"] {
        border-color: rgba(0,0,0,0.9)!important;
        box-shadow: 0px 0px 4px 1px rgba(0,44,145,0.9) inset!important;
        }

(Общий, для адресной и поисковой строк.)

при отключенном Classic Theme Restorer. В моем случае - причина нерабочего стиля в нем.

С включенным CTR работает в Stylish вот этот код:

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

Выделить код

Код:

/*AGENT_SHEET*/
    #main-window:not(:-moz-lwtheme)[defaultfxtheme="true"] #nav-bar .searchbar-textbox:not(:-moz-lwtheme),
    #main-window:not(:-moz-lwtheme)[defaultfxtheme="true"] #nav-bar #urlbar:not(:-moz-lwtheme) {
        box-shadow: 0px 0px 3px 1px rgba(0,104,205,0.8) inset!important;
    }

    #main-window:not(:-moz-lwtheme)[defaultfxtheme="true"] #nav-bar .searchbar-textbox:not(:-moz-lwtheme):hover,
    #main-window:not(:-moz-lwtheme)[defaultfxtheme="true"] #nav-bar #urlbar:not(:-moz-lwtheme):hover {
        box-shadow: 0px 0px 3px 1px rgba(0,64,165,0.9) inset!important;
    }
    
    #main-window:not(:-moz-lwtheme)[defaultfxtheme="true"] #nav-bar .searchbar-textbox:not(:-moz-lwtheme)[focused="true"],
    #main-window:not(:-moz-lwtheme)[defaultfxtheme="true"] #nav-bar #urlbar:not(:-moz-lwtheme)[focused="true"] {
        border-color: rgba(0,0,0,0.9)!important;
        box-shadow: 0px 0px 3px 1px rgba(0,44,145,0.9) inset!important;
        }

(Тоже самое - единый, для адресной и поисковой строк.)

Как заставить его работать в userChrome.css при включенном CTR (если у вас тоже причина в нем) - не представляю. Пишите разрабу. Либо ставьте Stylish и используйте второй стиль.

Отредактировано turbot (17-09-2014 00:51:22)

bunda1 · №1571

amid525 пишет

Конечно перезапускаю.

Не все css коды работают в userChrome.css.

amid525 · №1572

Понятно все.. Да, Classic Theme Restorer имеется. Ну да и ладно, устраивает статическое неоновое оформление...

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

Отредактировано amid525 (17-09-2014 10:46:09)

villa7 · №1573

amid525
Под себя подберите.

Выделить код

Код:

.statuspanel-label {-moz-appearance: none !important;
background: transparent -moz-linear-gradient(top , #0df , #09a) !important;
color: black !important;}

amid525 · №1574

Не пойму, где тут цвет и прозрачность менять?

villa7 · №1575

amid525
Про прозрачность разговора не было, добавте

Выделить код

Код:

opacity: 0.5 !important;

а про цвет вам уже вроде давали пояснения.

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

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Board footer