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

YrdErfgert · №10626

Подскажите, как размер кнопки "Х" на вкладке поменять? Была поменьше, теперь очень большая.

oleg.sgh · №10627

YrdErfgert
Попробуйте так
Как сделать появление крестика закрытия на вкладках, при наведении мыши

YrdErfgert · №10628

oleg.sgh пишет

Попробуйте так

Т.е. размер креста не изменить?

Да добавил код в userChrome.css, в моём случае "Х" никуда не делся, а при наведении мыши цвет меняется на красный. И ещё, у меня активен custom_tab_color_settings.css, возможно поэтому такое поведение и с цветом и с исчезновением кнопки.

oleg.sgh · №10629

YrdErfgert

Т.е. размер креста не изменить?

Наверное, можно, подскажут кто знает. Просто этот вариант мне понравился и прижился.

Отредактировано oleg.sgh (14-07-2021 15:37:23)

_zt · №10630

egorsemenov06
В расширение, скрипт uc/ucf или еще куда - создайте подпапку в chrome\user_chrome_files, например chrome\user_chrome_files\custom_styles\png и прописывайте адрес так - url("chrome://user_chrome_files/content/custom_styles/png/startpage.png").

Отредактировано _zt (14-07-2021 16:21:28)

_zt · №10631

egorsemenov06

<div class

это html синтаксис, т.е. ответ будет - никак.
Давайте нормальный пример кода в css синтаксисе и не морочьте голову людям.

Пример смены иконки папки закладки

toolbarbutton.bookmark-item[container="true"][label="имя_папки"] > .toolbarbutton-icon {
list-style-image: url("./ico/своя_иконка.svg") !important;
}

здесь /ico/ подпапка папки chrome.

Пример смены логотипа duckduckgo через userContent.css

@-moz-document url-prefix("https://duckduckgo.com") {
a#logo_homepage_link.logo_homepage,
.is-atb-fullbleed.dark-bg .logo_homepage,
.dark-header .header__logo {
background-image: url("./png_bkmrk/duckduckgo2.png") !important;
}
a#logo_homepage_link.logo_homepage,
.is-atb-fullbleed .content--home .logo_homepage {
width: 150px !important;
height: 150px !important;
}
}

здесь /png_bkmrk/ подпапка папки chrome.

А вы даете строку не понятно откуда с пустым классом.
Ну например так:

#"здесь вставьте ближайший верхний id без кавычек" ."здесь вставьте класс элемента без кавычек" {
background-image: url("./screenshot/startpage.png") !important;
}

но вам похоже это надо именно для userContent.css, а в этом случае надо так -

@-moz-document url-prefix("здесь вставьте начало адреса страницы,кавычки оставьте") {
#"здесь возможно понадобится вставить ближайший верхний id без кавычек, а может и не понадобится, тогда просто удалите это до следующей точки" ."здесь вставьте класс элемента без кавычек" {
background-image: url("./screenshot/startpage.png") !important;
}
}

Отредактировано _zt (14-07-2021 17:41:14)

_zt · №10632

egorsemenov06
Посмотрите сообщение выше, я его отредактировал.

_zt · №10633

egorsemenov06
И где же этот скриншот сайта, я должен догадаться, это игра такая? Запустил тестовый профиль, посмотрел дом.страницу firefox, установил new_tab_page тоже посмотрел, ни то ни это на ваш скриншот не похоже.

Алексей У. · №10634

Подскажите, пожалуйста, как сделать цветными иконки загрузок и закладок в левом меню окна библиотеки:

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

Для остальных иконок библиотеки использую код от Aris bookmark icons colorized:

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

#editBMPanel_chooseFolderMenuItem .menu-iconic-icon,
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, query, hostContainer) {
list-style-image: url("./../image/folder_item.png")!important;
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

treechildren::-moz-tree-image(title, open) {
-moz-image-region: rect(16px, 32px, 32px, 16px) !important;
}

treechildren::-moz-tree-image(title, container, livemark) {
list-style-image: url("./../image/feed.png") !important;
-moz-image-region: auto !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Bookmarks Toolbar"],[label="Lesezeichen-Symbolleiste"]) .menulist-icon,
#editBMPanel_toolbarFolderItem .menu-iconic-icon,
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar),
treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
list-style-image: url("./../image/bookmarks_toolbar.png") !important;
-moz-image-region: auto !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Bookmarks Menu"],[label="Lesezeichen-Menü"]) .menulist-icon,
#editBMPanel_bmRootItem .menu-iconic-icon,
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu),
treechildren::-moz-tree-image(container, queryFolder_menu________) {
list-style-image: url("./../image/bookmarks_menu.png") !important;
-moz-image-region: auto !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Other Bookmarks"],[label="Weitere Lesezeichen"]) .menulist-icon,
#editBMPanel_unfiledRootItem .menu-iconic-icon,
treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {
list-style-image: url("./../image/unsorted_bookmarks.png") !important;
-moz-image-region: auto !important;
}

treechildren::-moz-tree-image(title, query),
treechildren::-moz-tree-image(query) {
list-style-image: url("./../image/query.png") !important;
-moz-image-region: auto !important;
}

treechildren::-moz-tree-image(title, query, dayContainer) {
list-style-image: url("./../image/calendar.png") !important;
-moz-image-region: auto !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_History),
treechildren::-moz-tree-image(query, OrganizerQuery_history____v),
treechildren::-moz-tree-image(title, query, dayContainer) {
list-style-image: url("./../image/calendar.png") !important;
-moz-image-region: auto !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
list-style-image: url("chrome://browser/skin/bookmark.svg") !important;
-moz-image-region: auto !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
list-style-image: url("chrome://browser/skin/downloads/download-icons.svg#arrow-with-bar") !important;
-moz-image-region: auto !important;
}

.bookmark-item[container] {
list-style-image: url("./../image/folder_item.png") !important;
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

.bookmark-item[container][open] {
-moz-image-region: rect(16px, 32px, 32px, 16px) !important;
}

.bookmark-item[container][livemark] {
list-style-image: url("./../image/livemark_folder.png") !important;
-moz-image-region: auto !important;
}

.bookmark-item[container][livemark] .bookmark-item {
list-style-image: url("./../image/livemark_item.png") !important;
-moz-image-region: rect(0px, 16px, 16px, 0px) !important;
}

.bookmark-item[container][livemark] .bookmark-item[visited] {
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

.bookmark-item[container][query] {
list-style-image: url("./../image/query.png") !important;
-moz-image-region: auto !important;
}

#scrollbutton-up .toolbarbutton-icon,
#scrollbutton-down .toolbarbutton-icon {
-moz-image-region: auto !important;
}

treechildren::-moz-tree-image(title, query, tagContainer),
treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v),
.bookmark-item[query][tagContainer] {
list-style-image: url("./../image/tag.png") !important;
-moz-image-region: auto !important;
}

.bookmark-item[query][dayContainer] {
list-style-image: url("./../image/calendar.png") !important;
-moz-image-region: auto !important;
}

.bookmark-item[query][hostContainer] {
list-style-image: url("./../image/folder_item.png") !important;
-moz-image-region: rect(0px, 32px, 16px, 16px) !important;
}

.bookmark-item[query][hostContainer][open] {
list-style-image: url("./../image/folder_item.png") !important;
-moz-image-region: rect(16px, 32px, 32px, 16px) !important;
}

#subscribeToPageMenuitem:not([disabled]),
#subscribeToPageMenupopup {
list-style-image: url("./../image/feed.png") !important;
}

#bookmarksToolbarFolderMenu,
#BMB_bookmarksToolbar,
#panelMenu_bookmarksToolbar {
list-style-image: url("./../image/bookmarks_toolbar.png") !important;
-moz-image-region: auto !important;
}

#menu_unsortedBookmarks,
#BMB_unsortedBookmarks,
#panelMenu_unsortedBookmarks {
list-style-image: url("./../image/unsorted_bookmarks.png") !important;
-moz-image-region: auto !important;
}

sandro79 · №10635

YrdErfgert пишет

как размер кнопки "Х" на вкладке поменять? Была поменьше, теперь очень большая

По дефолту, крест на вкладке 89+ - это едва различимый невооружённым глазом прыщ из двух тонюсеньких линий, причём никак не больше, а меньше чем в допротоновской версии.

И ещё, у меня активен custom_tab_color_settings.css

А какой ещё активен? Очевидно classic_squared_tabs.css, в нём смотрите настройки кнопки, в этом правиле. Ставьте значения меньше 16px. -moz-margin-end: - отступ от правого края вкладки.
Дефолтную кнопку он загасил неск. правилами в этом же стиле, поэтому размер кнопки подбирается чуть иначе.
В дефолтном варианте так можно уменьшить

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

Выделить код

Код:

.tab-close-button {
	width: 22px !important;
	height: 22px !important;
	padding: 7px !important;
}

kokoss · №10636

Алексей У. пишет

Подскажите, пожалуйста, как сделать цветными иконки загрузок и закладок в левом меню окна библиотеки:

В 67 и 72 строке подставьте свои иконки.

Add, и зачем выкладывать здесь весь код, лучше добавить ссылку...

Отредактировано kokoss (14-07-2021 19:31:52)

Алексей У. · №10637

kokoss пишет

В 67 и 72 строке подставьте свои иконки.

Спасибо, помогло, жаль, что сам не догадался, уж больно эти две ссылки в коде отличаются от остальных. Иконка закладок у меня есть, не могли бы вы еще подсказать, где можно найти иконку загрузок, а то через поиск не сумел отыскать.

kokoss · №10638

Алексей У. пишет

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

иконка

https://www.upload.ee/files/13312851/do … n.png.html

_zt · №10639

Vitaliy V.
Чем в 91 заменить этот код?

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

Выделить код

Код:

panel[type="autocomplete-richlistbox"] {
    background: rgba(10,10,15,0.8) !important;
    color: rgb(220,220,225) !important;
    border: 1px solid var(--v-highlight-background-color) !important;
}

panel[type="autocomplete-richlistbox"] > richlistbox {
    background: transparent !important;
    color: inherit !important;
    margin: 0 !important;
}

Он у меня менял цвет дропменю ввода логина/пароля. Было прозрачное и черное с белым текстом. Теперь же в "panel[type="autocomplete-richlistbox"] > richlistbox" можно цвета перекинуть, но прозрачности добится не получается.

YrdErfgert · №10640

sandro79 пишет

А какой ещё активен? Очевидно classic_squared_tabs.css, в нём смотрите настройки кнопки, в этом правиле.

Совершенно верно! Поставил значение 12рх. Собственно вопрос решён. Благодарю!

sandro79 пишет

В дефолтном варианте так можно уменьшить

Этот вариант оказался самым худшим. Вместо креста так и есть: едва различимый невооружённым глазом прыщ.

Отредактировано YrdErfgert (14-07-2021 21:38:38)

Vitaliy V. · №10641

egorsemenov06

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

Выделить код

Код:

@-moz-document url("about:newtab"), url("about:home") {
.tile > div,
.tile > div::before {
    visibility: var(--v-visibility-tile-children, visible) !important;
}
.tile {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
    
/* ************| Далее шаблон заменяем на своё и т.д. |************ */
.top-site-button[href="адрес"] .tile {
    --v-visibility-tile-children: collapse;
    background-image: url("иконка") !important;
}
}

_zt

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

Выделить код

Код:

panel[type="autocomplete-richlistbox"] {
    --panel-color: rgb(220,220,225) !important;
    --panel-background: rgba(10,10,15,0.8) !important;
    --panel-border-color: var(--v-highlight-background-color) !important;
}

Отредактировано Vitaliy V. (14-07-2021 21:47:56)

Vitaliy V. · №10642

egorsemenov06
Ну там не только иконку надо бы обновлять, но пока не охота,
а иконку вот, создать svg

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

Выделить код

Код:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 48 48">
    <path style="fill:context-fill;fill-opacity:context-fill-opacity;" d="M 40.4,5.23 C 37.5,2.26 32.9,2.26 29.8,5.23 L 24,11 C 21.5,13.5 21.2,17.4 22.8,20.3 L 25.8,17.3 C 25.2,15.4 25.7,14 27.2,12.6 L 31,8.8 C 33.3,6.55 36,6.55 38.1,8.8 L 39.3,9.9 C 41.4,12.1 41.4,14.7 39.2,17 L 35.4,20.8 C 33.9,22.4 32.1,23.2 30.2,22.7 L 27.8,25.2 C 30.6,26.9 34.4,26.5 37.1,24 L 42.7,18.2 C 45.7,15.2 45.7,10.5 42.7,7.49 L 40.4,5.23 M 33,15 C 32.3,14.5 31.4,14.3 30.6,14.8 L 14.8,30.6 C 14.3,31.3 14.5,32.3 15,33 15.6,33.5 16.7,33.7 17.4,33.2 L 33.2,17.4 C 33.7,16.7 33.5,15.6 33,15 M 20.3,22.9 C 17.4,21.2 13.4,21.5 11,24 L 5.23,29.8 C 2.26,32.9 2.26,37.6 5.23,40.4 L 7.48,42.8 C 10.5,45.8 15.3,45.8 18.2,42.8 L 24,37.1 C 26.5,34.5 26.8,30.6 25.1,27.7 L 22.2,30.7 C 22.7,32.6 22.3,34 20.8,35.5 L 17,39.3 C 14.8,41.5 12,41.5 9.8,39.4 L 8.8,38.2 C 6.55,36 6.55,33.3 8.8,31 L 12.5,27.3 C 14,25.7 15.4,25.3 17.2,25.7" />
</svg>

лучше загрузить её по протоколу chrome: , например
img = "chrome://user_chrome_files/content/custom_styles/svg/ucf-text-to-link.svg";

Отредактировано Vitaliy V. (15-07-2021 01:22:05)

Devuan · №10643

Как починить?

Отредактировано Devuan (15-07-2021 19:01:23)

falcon1598 · №10644

Что-то автор зачастил с обновлениями.
https://github.com/Aris-t2/CustomCSSforFx
Это что, рекомендуется тоже это все с выходом новых версий обновлять?
Каждый раз искать строки и править их в userChrome.css
Оно, конечно, можно, но утомительно.
Жаль, что нельзя делать импорт-экспорт этих настроек.
У меня пока 3.2.8.

Отредактировано falcon1598 (15-07-2021 23:20:23)

Дурбетсель · №10645

Всем добра, и у всех пардон.
Вопроса два.

1. Как сделать, чтобы кнопка "Список всех вкладок" была доступна всегда? Код

Выделить код

Код:

#alltabs-button{
  visibility: visible !important;
  display: unset !important;
}

не работает.

2. Ещё нужно вернуть в адресную строку или хотя бы рядом кнопку "Перейти", чтобы всегда была. Может не CSS, но как это сделать?

Всё это нужно буквально каждые пять минут, будь прокляты гопники-погромисты... Ну да ладно. Поможите, люди :sick:

sandro79 · №10646

falcon1598 пишет

Это что, рекомендуется тоже это все с выходом новых версий обновлять?

А вам чего обновлять, вы же не на Протоне сидите, а на 78-ой.

Дурбетсель пишет

Как сделать, чтобы кнопка "Список всех вкладок" была доступна всегда? Код не работает

Этот код работает по сей день и в 92 [nightly] . Может вам поддержку файлов стилей нужно включить toolkit.legacyUserProfileCustomizations.stylesheets — true

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

И кнопка "Перейти" никуда не делась

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

кнопку "Перейти", чтобы всегда была

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

Выделить код

Код:

#urlbar-container  :is(.urlbar-go-button, #urlbar-go-button) {
  display: initial !important;
}

Отредактировано sandro79 (18-07-2021 23:53:18)

Alex_one · №10647

Установил [firefox] v.90.0 (до этого была v.84)
Цвет в настройках стал тёмный.
Буду очень благодарен за помощь!
Как можно его поменять на светлый #f2f2f2

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

Алексей У. · №10648

Использую такой код для замены стандартных черно-белых кнопок закрытия вкладок на цветные (изображения свои):

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

#tabbrowser-tabs .tabbrowser-tab .tab-close-button:-moz-lwtheme {
list-style-image: url("./../image/close.png") !important;
width: 16px !important;
height: 16px !important;
}

#tabbrowser-tabs .tabbrowser-tab .tab-close-button:hover {
list-style-image: url("./../image/close_hover.png") !important;
border-radius: 2px !important;
width: 16px !important;
height: 16px !important;
}

#tabbrowser-tabs .tabbrowser-tab .tab-close-button:active {
list-style-image: url("./../image/close_active.png") !important;
border-radius: 2px !important;
width: 16px !important;
height: 16px !important;
}

#tabbrowser-tabs .tabbrowser-tab:not([pinned]) .tab-close-button {
visibility: visible !important;
display: block !important;
}

#tabbrowser-tabs .tabbrowser-tab:not([pinned])[faviconized="true"] .tab-close-button {
visibility: collapse !important;
display: none !important;
}

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

kokoss · №10649

Alex_one
Как вариант, добавьте в файл config.js -> строку lockPref("browser.theme.toolbar-theme", 2); но будет светлая везде ( настройках, дополнениях и...

Devuan · №10650

Как включить что бы меню вверху всегда оставалось (которое нажимается кнопкой Alt).

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

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