Здесь описан процесс создания темы для браузера и дальнейшая её настройка с помощью файла userChrome.css.
В итоге получается такая тема (скин):
Шаг 1 — Создание темы
Создать (сгенерировать) простенькую тему для Firefox можно на странице-генераторе для разработчиков.
1. Для начала нужно задать название темы.
2. Выбираем файл для создания Верхнего изображения темы.
- Высота 200 пикселей
- Размер файла не больше 6.9МБ
- Формат файла: PNG, JPG, APNG, SVG или GIF (Не используйте анимированные gif’ы.)
- Изображение будет выровнено по правому краю заголовка браузера.
Я сделал файл шириной 1 пиксель, т.к. изображение всё равно будет растянуто под нужный размер окна):
3. Настраиваем цвета
- Фон области заголовка:
rgba(81, 92, 107, 1)
- Текст и значки в зоне заголовка:
rgba(255, 255, 255, 1)
- Фон панели инструментов:
rgba(151, 157, 166, 1)
- Текст и значки в зоне панели инструментов:
rgba(255, 255, 255, 1)
- Фон зоны поля панели инструментов:
rgba(199, 215, 234, 1)
- Текст зоны поля панели инструментов:
rgba(0, 0, 0, 1)
4. Нажимаем кнопку
, после чего тема будет отправлена на рассмотрение и вскоре будет доступна для всех.
Шаг 2 — Создание файла userChrome.css
Чтобы правила из userChrome.css работали, нужно включить его поддержку!
Здесь я просто помещу код файла, внутри будут комментарии к основным разделам. Единственное, что отмечу — ближе к концу файла идёт личная настройка, строчки которой можно удалить (строка 134 и далее — отключение отображения пунктов контекстного меню, изменение цвета значка BitWarden, значки папок на панели закладок, а также значки вложенных папок для папок на панели закладок):
/* set default namespace to XUL
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
*/
/* https://dentnt.trmw.ru/15441-firefox-theme-creation */
/*** Styles are mainly for the LIGHT theme ***/
:root
{
--lwt-toolbarbutton-hover-background: #898e96;
--toolbar-inactive-title-bg-color: #717f93;
--toolbarbutton-border-color: #63748f;
}
/* Remove shadow from tabs text */
*
{
text-shadow: none !important;
}
/* Bookmark toolbar panel height and text style */
#personal-bookmarks
{
color: black !important;
font-weight: bold;
}
/** Back-button fix **/
#back-button > .toolbarbutton-icon
{
background: none !important;
width: 28px !important;
height: 28px !important;
border-radius: 2px !important;
border: 1px solid var(--toolbarbutton-border-color) !important;
padding: 6px !important;
}
#back-button:not([disabled]):hover > .toolbarbutton-icon
{
background: var(--lwt-toolbarbutton-hover-background) !important;
}
#reload-button > .toolbarbutton-icon,
#stop-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon
{
border: 1px solid var(--toolbarbutton-border-color);
}
/** TABS **/
/* Hovered normal tab text color */
.tabbrowser-tab:not([visuallyselected]):hover > .tab-stack > .tab-content .tab-text
{
color: black !important;
}
/* Active tab text color */
.tabbrowser-tab[visuallyselected]:not(:hover) > .tab-stack > .tab-content .tab-text
{
font-weight: bold !important;
color: black !important;
}
/* Hovered active tab text color */
.tabbrowser-tab[visuallyselected]:hover > .tab-stack > .tab-content .tab-text
{
font-weight: bold !important;
color: white !important;
}
/** Toolbar icons frame-color **/
toolbarbutton[removable="true"] > .toolbarbutton-badge-stack,
toolbarbutton[removable="true"]:not([type="menu"]) > .toolbarbutton-icon,
#nav-bar-overflow-button > .toolbarbutton-icon,
#PanelUI-menu-button > .toolbarbutton-badge-stack
{
border: 1px solid var(--toolbarbutton-border-color);
/* Fix toolbarbutton-icon size */
width: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important;
height: calc(2 * var(--toolbarbutton-inner-padding) + 18px) !important;
}
/**********/
/** Not focused (inactive) Menubar colors and text **/
menubar:-moz-window-inactive,
menubar:-moz-window-inactive :-moz-any(#TabsToolbar, #browser-panel):-moz-lwtheme,
:root[tabsintitlebar]:-moz-window-inactive,
:root[tabsintitlebar]:-moz-window-inactive :-moz-any(#TabsToolbar, #browser-panel):-moz-lwtheme
{
background: var(--toolbar-inactive-title-bg-color) !important;
color: white !important;
}
#main-menubar:-moz-window-inactive,
#toolbar-menubar:-moz-window-inactive :-moz-any(#TabsToolbar, #browser-panel):-moz-lwtheme
{
background: var(--toolbar-inactive-title-bg-color);
}
/** Address/URL bar **/
/* Secure connection icon background color */
#identity-box[class^="verifiedDomain"]
{
background: rgba(0, 128, 0, 0.2);
border-radius: 3px; /* rounded corners of the icon */
}
/* Insecure connection icon background */
#identity-box[class^="notSecure"]
{
background: rgba(128, 0, 0, 0.2);
border-radius: 3px; /* rounded corners of the icon */
}
/***********/
/** Set Find-bar background color to default theme color **/
.browserContainer > findbar
{
background: var(--toolbar-bgcolor) !important;
}
/* Move Find-bar Close button to left and set background */
.findbar-closebutton
{
order: -1 !important;
}
toolbarbutton[checked]
{
background: rgba(0,0,0,0.6) !important;
color: white !important;
}
/** ****************/
/** Hide Context menu items **/
#appMenu-logins-button, /* Logins and Passwords */
#fill-login, /* Fill Login */
#context-sendimage, /* Email Image... */
#context-sendpagetodevice, /* Send Page to Device */
#context-inspect, /* Inspect Element */
#context-setDesktopBackground, /* Set As Desktop Background */
#context-keywordfield, /* Add a Keyword for this Search... */
#context_closeTabsToTheEnd, /* Close Tabs To The Right */
#context_pinTab, /* Pin Tab */
#context_unpinTab, /* UnPin Tab */
#context_moveTabOptions, /* Move Tab */
#context_selectAllTabs, /* Select All Tabs */
#context_sendTabToDevice, /* Send Tab to Device */
#context-viewbgimage, /* View Background Image */
#screenshots_mozilla_org-menuitem-_create-screenshot, /* Take a screenshot */
/** Hide buttons **/
#fxa-toolbar-menu-button, /* Firefox Account button (Sync) */
#_9aa46f4f-4dc7-4c06-97af-5035170634fe_-browser-action, /* ImTranslator */
#permissions-granted-icon /* Permissions Granted Icon in address bar */
{
display: none;
}
/************/
.toolbarbutton-icon[label="Bitwarden"] /* BitWarden icon color fix */
{
filter: grayscale(70%);
}
/*** ICONS ***/
/** Bookmark folder icon replacement **/
/* Bookmark Folders */
.bookmark-item
{
background: no-repeat left 15% top 60% / 12px;
}
.bookmark-item[label="[ Я ]"]
{
background-image: url("https://ya.ru/favicon.ico");
}
.bookmark-item[label="[ G ]"]
{
background-image: url("https://www.google.com/favicon.ico");
}
/* Bookmark Sub-Folders */
menu > .menu-iconic-left > .menu-iconic-icon
{
background: no-repeat left 50% top 60% / 12px;
}
menu[label="[ Сбербанк ]"] > .menu-iconic-left > .menu-iconic-icon
{
background-image: url("https://www.sberbank.ru/favicon.ico");
}
menu[label="[ mos.ru ]"] > .menu-iconic-left > .menu-iconic-icon
{
background-image: url("https://www.mos.ru/static/images/favicon/icon76x76.png");
}
menu[label="[ DDO ]"] > .menu-iconic-left > .menu-iconic-icon
{
background-image: url("https://www.ddo.com/favicon.ico");
}
/*****************/
- WordPress: Ошибка в плагине WpDiscuz - 08.10.2024
- Windows 10: Уменьшить размер виртуальной машины WSL - 06.10.2024
- Windows 10: Событие EventID 63 в Журнале Приложений - 28.09.2024