Автор: Дистрибутив Pop!_OS разрабатывается компанией System76, которая занимается продажей компьютеров, ноутбуков и серверов с предустановленной системой Linux. Дистрибутив Pop!_OS базируется на Ubuntu, но имеет ряд улучшений, в том числе и в окружении рабочего стола, которое тут называется Cosmic. По умолчанию в Cosmic меню имеет практически всегда не изменяемую цветовую палитру, которая может выбиваться из общего оформления. Конечно, если вы используете тему оформления по умолчанию, то цвет меню вписывается, но часто пользователи ставят свои темы, и в этом случае, меню может отличаться по цвету. В данной статье мы кастомизируем меню, что бы оно лучше вписывалось в общий стиль системы.
P.S. Это лишь некоторые наработки, но никак не окончательный вариант, по этому в приведенном ниже примере могут быть некоторые недочеты. Все ниже приведенные параметры можно подогнать под свои нужды, для этого необходимо лишь посидеть и потрать некоторое время.
Pop!_OS – Меняем цвет меню
Все настройки касательно меню находятся по адресу “/usr/share/gnome-shell/extension/pop-cosmic@system76.com”:
Но редактировать их там не следует, так как в случае обновления, все изменения могут быть утеряны. По этому мы скопируем данные настройки в домашний каталог пользователя “.local/share/gnome-shell/extensions”. В случае если директория “extension” отсутствует, создайте ее вручную:
Копировать можно просто перетащив данную папку. Теперь обратите внимания на файлы которые можно отредактировать в каталоге “cosmic@system76.com”, dark.css – отвечает за темное оформление темы, соответственно light.css – за светлое оформление и общий файл – stylesheet.css. В этих трех файлах цвета хранятся в кодировке “rgba”, в сети существуют сайты где вы можете выбрать свой цвет в удобной форме, например этот.
Если сравнить файлы dark.css тот который идет с системой и тот, который отредактированный, то увидите разницу всего в трех параметрах, на отредактированном эти параметры выделены жирным цветом во втором случае:
Файл dark.css оригинальный:
.cosmic-applications-dialog {
background-color: #36322f;
box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
}
.cosmic-applications-icon {
color: #9b9b9b;
}
.cosmic-applications-folder-title {
color: white;
}
.cosmic-applications-available {
color: white;
}
.cosmic-folder-edit-button {
background: #353535;
}
.cosmic-folder-edit-button:hover {
background: #484848;Файл dark.css отредактированный:
.cosmic-applications-dialog {
background-color: rgba(25, 25, 25, 0.95); /* #191919 */
}
.app-well-app:focus .overview-icon {
background-color: rgba(25, 25, 25, 0.95); /*background-color: #9b9b9b;*/
}
.cosmic-applications-icon {
color: white; /* #9b9b9b */
}
.cosmic-applications-folder-title {
color: white;
}
.cosmic-applications-available {
color: white;
}
.cosmic-folder-edit-button {
background: #353535;
}
.cosmic-folder-edit-button:hover {
background: #484848;
}
А вот файл “light.css” отредактирован более существенно, сравнить изменения вы можете ниже. В этом файле наоборот, оригинальный код выделен жирным, вы это можете наблюдать во втором примере, где файл уже отредактированный:
Файл light.css оригинальный:
.cosmic-applications-dialog {
box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
}
.cosmic-applications-dialog .overview-icon {
color: black;
}
.app-well-app:focus .overview-icon {
background-color: #9b9b9b;
}
.app-well-app:hover .overview-icon, .app-well-app:selected .overview-icon {
background-color: #d0d0d0;
}
.cosmic-applications-icon {
color: #555555;
}
.cosmic-applications-folder-title {
color: #555555;
}
.cosmic-applications-available {
color: black;
}
.cosmic-folder-edit-button {
color: #555555;
background: #f2f1ef;
}
.cosmic-folder-edit-button:hover {
background: #f8f8f7;
}Файл light.css отредактированный:
.cosmic-applications-dialog {
background-color: rgba(25, 25, 25, 0.95); /* #191919 */
}
.app-well-app:focus .overview-icon {
background-color: rgba(25, 25, 25, 0.95); /*background-color: #9b9b9b;*/
}
.cosmic-applications-icon {
color: #555555;
}
.cosmic-applications-folder-title {
color: #555555;
}
.cosmic-applications-available {
color: black;
}
.cosmic-folder-edit-button {
color: #555555;
background: #f2f1ef;
}
.cosmic-folder-edit-button:hover {
background: #f8f8f7;
}
Ну и последний файл “stylesheet.css”, сначала, как обычно, оригинальный, изменения выделены жирным шрифтом:
.cosmic-applications-dialog .app-well-app-running-dot {
background-color: transparent;
}
.cosmic-applications-box {
spacing: 12px;
}
.cosmic-applications-separator {
background: #000000;
}
.cosmic-app-display {
}
/* Width & height of scroll view are set dynamically to handle scaling. */
.cosmic-app-scroll-view {
}
.cosmic-applications-folder-title {
font-weight: bold;
font-size: 1.5em;
}
.cosmic-applications-search-entry {
width: 504px; /* 168 * 3 */
}
.cosmic-app-icon {
height: 168px;
width: 168px;
}
.cosmic-base-folder-button {
width: 120px;
}
.cosmic-applications-available {
font-weight: bold;
}
.cosmic-applications-search-results {
spacing: 32px;
}
.cosmic-folder-edit-dialog {
min-width: 512px;
}
.cosmic-folder-edit-dialog .message-dialog-description {
text-align: left;
}
.cosmic-folder-edit-button-box {
spacing: 8px;
}
.cosmic-folder-edit-button {
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
border-radius: 12px;
border-width: 1px;
padding: 4px 6px 4px 6px;
}Отредактированный файл:
.cosmic-applications-dialog .app-well-app-running-dot {
background-color: transparent;
}
.cosmic-applications-box {
spacing: 12px;
}
.cosmic-applications-separator {
background: white; /* #000000 */
}
.cosmic-app-display {
}
.cosmic-app-scroll-view {
height: 504px; /* 168 * 3 */
width: 1176px; /* 168 * 7 */
}
.cosmic-applications-folder-title {
font-weight: bold;
font-size: 1.5em;
}
.cosmic-applications-search-entry {
width: 504px; /* 168 * 3 */
background: rgba(255, 255, 255, 0.95);
}
.cosmic-app-icon {
height: 168px;
width: 168px;
}
.cosmic-base-folder-button {
width: 120px;
}
.cosmic-applications-available {
font-weight: bold;
}
.cosmic-applications-search-results {
spacing: 32px;
}
.cosmic-folder-edit-dialog {
min-width: 512px;
}
.cosmic-folder-edit-dialog .message-dialog-description {
text-align: left;
}
.cosmic-folder-edit-button-box {
spacing: 8px;
}
.cosmic-folder-edit-button {
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
border-radius: 12px;
border-width: 1px;
padding: 4px 6px 4px 6px;
}
После того как отредактировали настройки меню, перезапускаем систему для их применения. В результате получаем следующее:
До изменения файлов:
После изменения файлов:
При желании можно поиграть с прозрачностью, но это уже дело вкуса. За прозрачность и цвет окна отвечает параметр:
.cosmic-applications-dialog {
background-color: rgba….
}
Заключение
В любом случае даже если по какой-то причине вы хотите вернуть оформление меню по умолчанию, то достаточно просто удалить все папку “cosmic@system76.com” из каталога “.local/share/gnome-shell/extensions”, а затем перезапустить систему.
Обращаю ваше внимания, что если полностью удалить пункт
.cosmic-applications-dialog {
background-color: rgba….
}
То настройки будут наследоваться от установленной темы, что в свою очередь, весьма удобно. А также, обращаю ваше внимание, что все приведенные настройки из статьи, это всего-навсего для ознакомления, их еще надо подгонять, дорабатывать в зависимости от установленной темы.
Кастомизация меню в Pop!_OS не так уж и сложна как может показаться, в любом случае, вы всегда можете отключить в Pop!_OS все установленные по умолчанию расширения и в итоге, получите старый добрый GNOME.
Демо файлы для кастомизации меню в Pop!_OS вы можете скачать ниже, они уже имеют внесенные изменения, но требуют некоторой доработки. Так что, если есть желание, скачивайте и экспериментируйте:
Все что вам необходимо сделать, так это после скачивания данного архива, распаковать его в директорию “.local/share/gnome-shell/extensions” и перезапустить систему для применения настроек.
Что касается кастомизации Pop!_OS, то также хотелось вам порекомендовать статью про изменения Plymouth заставки.
Либо, что крайне важно, так это сделать бэкап системы, для восстановления в случае непредвиденных обстоятельств, в Pop!_OS для этого существует встроенное средство, о котором читайте тут.
А на этом сегодня все, если статья оказалась вам полезна, подписывайтесь на рассылку журнала в pdf формате, а так же на социальные сети журнала Cyber-X:
Юморилка, Telegram канал с анекдотами:
Telegram
По вопросам работы сайта, сотрудничества, а так же по иным возникшим вопросам пишите на E-Mail. Если вам нравится журнал и вы хотите отблагодарить за труды, вы можете перечислить донат на развитие проекта.
С уважением, редакция журнала Cyber-X
