Помогите изменить внешний вид через userChrome.css

ivan568 · №1

Всем привет. Помогогите изменить внешний вид. Не пойму что то. Сам занимаюсь сайтами, css и html вроде знаю, но что только не делал, а линия(border) эта никак не хочет быть под низом. Z-index ставил, не помогло. Хочу выделить активную вкладку и что бы сам блок с поисковой строкой немного выделялся. Сильно внешний вид браузера не меняю. Просто привык к старым вкладкам, сильно уж не нравится эти округлые вкладки.
Что бы в инспекторе внешний вид менять, можно открыть страницу chrome://browser/content/browser.xhtml. сам border стоит в #nav-bar.

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

Можно сделать вместо border, box-shadow, как бы задний фон.

Отредактировано ivan568 (30-06-2024 05:49:28)

ivan568 · №2

Уже не нужно))
Сам сделал.

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

Выделить код

Код:

#titlebar {
	position: relative !important;
}
#titlebar::after {
	width: 100% !important;
	height: 4px !important;
	content: "" !important;
	bottom: 0px !important;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAIAAADAusJtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVBhXY3j//j3Tnz9/mP7+/cv09etXAFyGC562h5lbAAAAAElFTkSuQmCC');
	z-index: -999 !important;
	position: absolute !important;
	background-repeat:repeat-x;
	 
}

all_zer · №3

А где вообще находится этот файл, чтобы редактировать вид браузера под себя?
Всегда сидел на версии 88. Но в последнее время, сайты стали черезчур напичканы всяким хламом, и не отображается вовсе ничего (просто белый фон). Пришлось обновиться до 127.
И этот дурацкий дизайн вкладок... с громадными отступами между закладками... хочу, в общем, вернуть прежний дизайн, 70-80 версий

vending_machine · №4

all_zer пишет

А где вообще находится этот файл, чтобы редактировать вид браузера под себя?

Расширенные возможности настройки и конфигурации Firefox | Справка Firefox

ivan568 · №5

all_zer пишет

А где вообще находится этот файл, чтобы редактировать вид браузера под себя?
Всегда сидел на версии 88. Но в последнее время, сайты стали черезчур напичканы всяким хламом, и не отображается вовсе ничего (просто белый фон). Пришлось обновиться до 127.
И этот дурацкий дизайн вкладок... с громадными отступами между закладками... хочу, в общем, вернуть прежний дизайн, 70-80 версий

Вам надо включить в about:config обработку файлов.
/*Возвращение обработки userChrome.css и userContent.css с 69.0 работает*/
lockPref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
В папке профиля создать папку chrome и в ней создать эти файлы.
файл userChrome.css для изменения внутри браузера и файл userContent.css для изменения стилей сайтов. Ну это если не хотите расширения всякие ставить лишние, хотя расширения удобнее, они на лету меняют, только страницу перезагрузить, с этими файлами нужно постоянно закрывать браузер.

Можете для удобства что бы постоянно не лазить в about:config при каждой переустановке браузера создать файл :
"C:\Program Files\Mozilla Firefox\defaults\pref\local-settings.js"

С таким содержанием:
pref("general.config.filename", "mozilla.cfg");
pref("general.config.obscure_value", 0);

После чего добавить файл "C:\Program Files\Mozilla Firefox\mozilla.cfg"
В который уже можете вносить изменения. И например при сбросе профиля настройки сами будут подхватываться.

Если не хотите ничего менять и хотите такой же вид как у меня на фотке, ну без настройки кнопок, то можете использовать, добавить надо в userChrome.css:

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

Выделить код

Код:

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
/* Для изменений смотреть файл - C:\Program Files\Mozilla Firefox\browser\omni.ja\chrome\browser\content\browser\browser.xhtml */
/* Для изменения в браузере отрыть страницу и менять через инспекор, после чего сохранять в userChrome.css - chrome://browser/content/browser.xhtml */

.tab-close-button {
	width: 20px !important;
	height: 20px !important;
	padding: 5px !important;
	margin-right: 2px !important;
}
#appMenu-new-tab-button2,
#appMenu-find-button2,
#appMenu-zoom-controls2,
#appMenu-downloads-button {
	display: none !important;
}
#appMenu-new-window-button2, 
#appMenu-new-private-window-button2,
#appMenu-bookmarks-button,
#appMenu-history-button,       
#appMenu-passwords-button,       
#appMenu-extensions-themes-button,
#appMenu-print-button2,
#appMenu-save-file-button2,         
#appMenu-settings-button,
#appMenu-more-button2,             
#appMenu-help-button2,
#appMenu-quit-button2,              
#panelMenuBookmarkThisPage,
#panelMenu_searchBookmarks,
#panelMenu_viewBookmarksToolbar,
#panelMenu_recentBookmarks,
#panelMenu_bookmarksMenu,
#panelMenu_showAllBookmarks,
#appMenuRecentlyClosedTabs,
#appMenuRecentlyClosedWindows,
#appMenuRestoreSession,
#appMenuClearRecentHistory,
#panelMenu_recentHistory,
#PanelUI-historyMore,
#backForwardMenu,
#BMB_unsortedBookmarks,
#BMB_unsortedBookmarksPopup,
#BMB_bookmarksShowAll,
.bookmark-item {
	padding: 7px !important;
}
/* #BMB_bookmarksShowAll Убрать кнопку "Показать все закладки Ctrl+Shift+B" */
#BMB_viewBookmarksSidebar/* Показать боковую панель закладок */,
#BMB_bookmarksToolbar/* Панель закладок */,
/* #BMB_unsortedBookmarks Другие закладки */
/*#BMB_mobileBookmarks Mobile Bookmarks */
/* #BMB_mobileBookmarks + menuseparator Разделитель после Mobile Bookmarks */
#BMB_bookmarksShowAllTop, #BMB_bookmarksShowAllTop + menuseparator/* Показать все закладки */,
#BMB_bookmarksPopup .openintabs-menuitem,/* Открыть всё во вкладках */
#BMB_searchBookmarks, 
.menuseparator {
	display: none !important;
}
.bookmarks-actions-menuseparator {
	display: none !important;
}
#BMB_bookmarksShowAll.subviewbutton.panel-subview-footer .menu-accel-container {
	display: none !important;
}

#BMB_bookmarksShowAll.subviewbutton .menu-accel-container .menu-accel {
	display: none !important;
}
#BMB_bookmarksShowAll {
	text-align: center !important;
	box-shadow: -0px -6px 0px -5px #dedede !important;
	border-radius: 6px !important;
	border-top: 3px solid #fff !important;
	margin-top: 4px !important;
}
menuseparator.hide-if-empty-places-result {
	display: none !important;
}
#ctrlTab-panel {
	display: none !important;
}
.tabbrowser-tab {
	padding-inline: 0 !important;
}
toolbar#nav-bar.browser-toolbar {
	min-height: 50px !important;
	border-top: 1px solid #f7f7fb !important;
	background: linear-gradient(180deg, #f9f9fb, #F4F4F4, #F0F0F0, #EEE, #F0F0F0,#f9f9fb) !important;
}
:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
	padding-top: var(--space-above-tabbar) !important;
	margin-top: -0px !important;
}
#TabsToolbar {
	--tab-min-height: 33px !important;
	--toolbarbutton-inner-padding: unset !important;
}
:root[uidensity="compact"] #TabsToolbar {
	--tab-min-height: 29px !important;
}
:root[uidensity="touch"] #TabsToolbar {
	--tab-min-height: 45px !important;
}
.titlebar-spacer[type="pre-tabs"] {
	width: 0px !important;
	margin-left: -1px !important;
	;
}
#TabsToolbar .toolbarbutton-1 {
	padding: 0px 5px !important;
}
.tab-background,
.tab-content,
.tab-stack {
	margin-top: 0 !important;
	border-radius: 0 !important;
	margin-bottom: 0 !important;
}
.tab-background {
	margin-block: 0 !important;
}
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
        box-shadow: none !important;
	border-left: 1px solid #ddd !important;
	border-right: 1px solid #ddd !important;
	border-top: 3px solid blue !important;
	background-color: #f9f9f9 !important;
	position: relative;
}
.tabbrowser-tab {
	padding: 0 !important;
	overflow: none !important;
}
.tab-context-line {
	display: -moz-inline-box !important;
	height: 3px !important;
}
.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
	background-color: #bebec9 !important;
	opacity: 1 !important;
	transform: none !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
	background-color: #dadae1 !important;
}
toolbarbutton#scrollbutton-down, toolbarbutton#scrollbutton-up {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 8px !important;
}
toolbarbutton#scrollbutton-down {
}
toolbarbutton#scrollbutton-up {
}
#urlbar-background {
	border: 1px solid #e8e8e8 !important;
	background-color: #fff !important;
	box-shadow: 0px 0px 6px #ddd !important;
}
#urlbar[focused="true"] {
	border: 0 !important;
}
#navigator-toolbox {
	border-bottom: 1px solid #ddd !important;
}
#titlebar {
	position: relative !important;
}
#titlebar::after {
	width: 100% !important;
	height: 0px !important;
	content: "" !important;
	bottom: 0px !important;
	box-shadow: 0 0 3px 0px #c8c8c8 !important;
	border-bottom: 1px solid #ddd !important;
	z-index: -999 !important;
	position: absolute !important;
	background-repeat: repeat-x;
}

В файл mozilla.cfg нужно добавлять подобное:
lockPref("toolkit.legacyUserProfileCustomizations.stylesheets", true);
Что бы было lockPref, не помню вроде pref там не работает.

Плюс в том что вам не нужно больше лазить по этим about:config. Просто один раз настроили внешний вид и прочее, и всё. И с этими 4 файлами "путешествуете" при переустановке браузера. Хотя можно при переустановке ещё брать из профиля файл закладок иконки например и что то там ещё забыл уже.

Если не хотите обновляться можно так же закинуть файл policies.json в "C:\Program Files\Mozilla Firefox\distribution\policies.json"
с таким содержимым:

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

Выделить код

Код:

{
  "policies": {
    "AppUpdateURL": "",
    "DisableAppUpdate": true,
  }
}

Добавлено 07-07-2024 02:45:54
хотел ещё тени сделать сбоку активной вкладки, там border стоит, но там не выходит что то опять, по разному пытался сделать в итоге забил, просто если сделать тень у активной вкладки, она как бы вперед будет выпирать что будет сильно выделяться.

В боковом меню можно ещё вот так сортировать пункты, но я на это забил наверно ещё на 80 версии где то или раньше. Просто у меня ноут с экраном 1366х768 и меню это листать надо было, да и как по мне там кучу бесполезных пунктов. Зачем мне кнопки копировать или что там, если я на клавиатуре это нажимаю.

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

Выделить код

Код:

/*Сортировка пунктов меню*//*
#appMenu-save-file-button {-moz-box-ordinal-group:1 !important;}
#appMenu-print-button {-moz-box-ordinal-group:2 !important;}
#appMenu-customize-button + toolbarseparator {-moz-box-ordinal-group:3 !important;}
#appMenu-library-button {-moz-box-ordinal-group:4 !important;}
#appMenu-addons-button {-moz-box-ordinal-group:5 !important;}
#appMenu-preferences-button {-moz-box-ordinal-group:6 !important;}
#appMenu-customize-button {-moz-box-ordinal-group:7 !important;}
#appMenu-print-button + toolbarseparator {-moz-box-ordinal-group:8 !important;}
#appMenu-developer-button {-moz-box-ordinal-group:9 !important;}
#appMenu-more-button {-moz-box-ordinal-group:10 !important;}
#appMenu-help-button {-moz-box-ordinal-group:11 !important;}
#appMenu-help-button + toolbarseparator {-moz-box-ordinal-group:12 !important;}
#appMenu-quit-button {-moz-box-ordinal-group:13 !important;}
*/

Отредактировано ivan568 (07-07-2024 02:45:54)

ivan568 · №6

Ну или вот ещё разных настроек из файла mozilla.cfg

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

Выделить код

Код:

/* настройки tab-bar */
lockPref("browser.uiCustomization.state", "{\"placements\":{\"widget-overflow-fixed-list\":[],\"unified-extensions-area\":[],\"nav-bar\":[\"back-button\",\"forward-button\",\"stop-reload-button\",\"urlbar-container\",\"bookmarks-menu-button\",\"ublock0_raymondhill_net-browser-action\",\"_a9c2ad37-e940-4892-8dce-cd73c6cbbc0c_-browser-action\",\"downloads-button\"],\"toolbar-menubar\":[\"menubar-items\"],\"TabsToolbar\":[\"tabbrowser-tabs\",\"new-tab-button\",\"alltabs-button\",\"sidebar-button\",\"history-panelmenu\",\"fxa-toolbar-menu-button\"],\"PersonalToolbar\":[]},\"seen\":[\"developer-button\",\"ublock0_raymondhill_net-browser-action\",\"_a9c2ad37-e940-4892-8dce-cd73c6cbbc0c_-browser-action\"],\"dirtyAreaCache\":[\"nav-bar\",\"PersonalToolbar\",\"toolbar-menubar\",\"TabsToolbar\"],\"currentVersion\":18,\"newElementCount\":13}");
/*Значки обычные, мобильные, компактные*/
lockPref("browser.uidensity", 2);
/* Кнопка загрузки скрыта/не скрыта */
lockPref("browser.download.autohideButton", false);
/* Панель закладок слева true или справа false */
lockPref("sidebar.position_start", false);
/* Запрет закрытия последней вкладки */
lockPref("browser.tabs.closeWindowWithLastTab", false);
/* Открыть закладку в новой вкладке */
lockPref("browser.tabs.loadBookmarksInTabs", true);

Добавлено 07-07-2024 03:13:36
Жаль скрипты нельзя применять внутри браузера, а то я бы себе такую удобную домашнюю/новую страницу забабахал, поднимать сайт для нее как то не очень, а делать локальный сервер с сайтом тоже как то жирно по ресурсам пк. Даже если расширение свое сделать, то локальные файлы открыть ты можешь, а вот в них скрипты работать не будут.
Как то на старый телефон ставил php сервер с базой данных, если не ошибаюсь назывался KSWEB, давал доступ в сеть в локальной сети и мог с ноута заходить этот сервер, но там всё медленно работало, да и телефон с 1гб памяти тормозной был, можно на современных это попробовать, но как по мне идея дно. На роутере ещё хотел поднять))) на openwrt вроде что то можно было.

Отредактировано ivan568 (07-07-2024 03:17:41)

Dobrov · №7

ivan568 пишет

Жаль скрипты нельзя применять внутри браузера

можно, используя менеджеры скриптов/стилей, например UserChromeFiles - читайте шапку темы.

ivan568 · №8

Dobrov пишет

ivan568 пишет
Жаль скрипты нельзя применять внутри браузера
можно, используя менеджеры скриптов/стилей, например UserChromeFiles - читайте шапку темы.

не, это левое всё. Не стоковое. Было бы это в браузере, а так это нужно что то левое качать.
То же изменение стилей из коробки предусмотрено. Со скриптами же сложнее, браузер как я понял не поддерживает работу скриптов так как мне надо. Раньше можно было это обойти, но теперь этот функционал убрали.

Например раньше я хотел сделать поисковую форму на новую страницу, но потом этой идеей переболел, и нафига мне ещё строка поиска, когда есть там где url писать.
Но скажем я бы разместил на новой странице что то полезное. Погода, фон красивый, можно например курсы валют. Как то делал страницу которая подтягивает музыку из папки на компе и можно ее в браузере включать. Типа плеер браузерный получился))
Понятно что можно обычный плеер включить), просто это были идеи такие. А так это всё фигня и баловство.
все это работает в локальный файлах, но когда пытаешься сделать расширение и поставить его, там локальные файлы со скриптами работать не будет, а где то публиковать его я не хочу, да и сервера нет для размещения всего этого.

Или я наверно не правильно понял. Смотрел ссылку на гитхабе но пока не врубился что там такое.

Отредактировано ivan568 (08-07-2024 03:10:37)

pavelp · №9

ivan568 пишет

не, это левое всё. Не стоковое. Было бы это в браузере, а так это нужно что то левое качать.

Того, чего вы хотите, в браузере не будет никогда.

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

№130-06-2024 05:37:28