LinuxMint.com.ru


https://linuxmint.com.ru/

Настройка внешнего вида Cinnamon

https://linuxmint.com.ru/viewtopic.php?f=55&t=7294

Страница 1 из 2

Настройка внешнего вида Cinnamon

Добавлено: 09 янв 2022, 21:19
Kamikaze
Мне безумно интересно настраивать внешний вид в моем любимом Linux Mint с оболочкой Cinnamon.
Если вы хотите что-то поменять во внешнем виде, но не знаете где и как, то эта тема для вас! Покажу, расскажу и постараюсь понятно объяснить как вам добиться желаемого результата.

Вместе с вопросом обязательно указывайте название темы, которую используете или ссылку на неё (если это что-то не из стандартного набора).

Чтобы тема сразу была полезной, давайте немного покапаемся в апплетах.
XApp


Взглянув на картинку можно подумать, что всё нормально, но на самом деле всё не так однозначно, как кажется.
Давайте закрасим апплеты в красный цвет и посмотрим, что же получилось.

XApp имеет отступы в 2 пикселя по краям. Это мы и будем исправлять.

Переходим по адресу:
/usr/share/cinnamon/applets/xapp-status@cinnamon.org

Открываем (с root правами) файл applet.js и редактируем 14 и 15 строки приведя их к виду:

Код: Выделить всё

const HORIZONTAL_STYLE = 'padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0';
const VERTICAL_STYLE = 'padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0';
Таким образом мы уберем отступы при любом положении панели (горизонтальном и вертикальном).

Сгруппированный список окон
Тут всё проще, мы просто регулируем отступы между каждым из элементов сгруппированного списка.


Переходим по адресу: /usr/share/cinnamon/applets/grouped-window-list@cinnamon.org и открываем (с root правами) файл appGroup.js для редактирования строки 263.
Стандартное значение - 6px, но вы можете выставить то значение, которое вас устраивает, вплоть до нуля.

С апплетами закончили, дальше конфигурация Cinnamon.

Высота панели
Не знаю для чего и для кого это может быть полезно, но почему бы и нет? Давайте увеличим допустимую максимальную высоту панели (регулируется в настройках панели).
Переходим по адресу: /usr/share/cinnamon/cinnamon-settings/modules и открываем (всё так же с root правами) файл cs_panel.py.
Ищем 63 строку и редактируем пару параметров:

Код: Выделить всё

mini=20, maxi=60
Первый отвечает за минимальную высоту, второй за максимальную.

После всех манипуляций всё сохраняете и перезагружаете Cinnamon.

Для старта, я думаю, будет достаточно. Далее, надеюсь, будут уже вопросы и разборы конкретных случаев.
Спасибо за внимание!

Настройка внешнего вида Cinnamon

Добавлено: 10 янв 2022, 20:33
Kamikaze
Друзья!
Я придумал как сделать так, чтобы вам было интересно и в то же время эта тема стала гайдом по настройке внешнего вида.
В этой теме мы будем вместе с вами поэтапно создавать собственное оформление для Cinnamon.

Сегодня будет самое начало.
В папке .themes в вашей домашней директории создайте ещё одну папку и назовите её как угодно (только латиница и без пробелов). Это будет название нашей темы.
Далее в созданной папке создайте ещё одну и назовите её cinnamon (обязательно с маленькой буквы).
И уже в папке cinnamon создайте новый файл с названием cinnamon.css (тоже обязательно с маленькой буквы).

Структура следующая:
.themes
- Папка (название темы)
-- cinnamon (папка)
--- cinnamon.css (файл)

Если вы всё сделали правильно, то в параметрах системы => темы вы сможете выбрать тему рабочего стола именно ту, которую только что создали.

Из-за того, что файл пустой, оформление будет браться стандартное, которое будет выглядеть подобным образом:


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

UPD: В каком формате делать? Текст или видео?

Настройка внешнего вида Cinnamon

Добавлено: 11 янв 2022, 07:57
sheridan
Kamikaze, В формате текста, если какой то сложный момент можно и видео дополнить.

Настройка внешнего вида Cinnamon

Добавлено: 11 янв 2022, 18:28
Kifer
сори если слегка не в теме, у меня mate, но вопрос именно о внешнем виде.
LM19.3 MATE.
установка фона - беру jpg на разделе FAT32, встаёт без проблем.
при перезагрузке чорный фон.
где собака порылась?..
не то, чтобы проблема, просто интересно.
может скопировать в раздел Ext4?
или это другое?..

Настройка внешнего вида Cinnamon

Добавлено: 11 янв 2022, 19:03
rogoznik
Kifer, скорее всего раздел не успевает примонтироваться, до того как срабатывает установка фона при загрузке...так что лучше положить картинку в каталог пользователя

Настройка внешнего вида Cinnamon

Добавлено: 11 янв 2022, 19:05
Kamikaze
Kifer, к сожалению не взлюбил MATE и даже не пытался в нем разобраться. Увы, но я не помогу.

Настройка внешнего вида Cinnamon

Добавлено: 14 янв 2022, 23:19
Kamikaze
Урок #1. Панель.

Панель делится на 3 части:
  • Левая;
    Центральная;
    Правая.
Их можно изменять как отдельно, так и все вместе.

Для начала давайте в ранее созданном файле cinnamon.css пропишем следующее:

Код: Выделить всё

#panel {
	background-color: #eaebf1;
}
Так мы задали для всей панели единый цвет.

Если вам необходимо задать разные цвета для каждой из частей панели, то необходимо использовать другие стили.
#panelLeft отвечает за левую часть панели;
#panelCenter отвечает за центральную часть панели;
#panelRight отвечает за правую часть панели.

Но помимо всего прочего мы можем задавать разные стили для панели в зависимости от её положения на экране.
.panel-top отвечает за панель, расположенную сверху;
.panel-bottom отвечает за панель, расположенную снизу;
.panel-left отвечает за панель, расположенную слева;
.panel-right отвечает за панель, расположенную справа.

Всё это может сочетаться друг с другом. Давайте пару примеров.
Например, нам необходимо, чтобы левая и правая части нижней панели были закрашены, а центральная часть была прозрачной.

Код: Выделить всё

.panel-bottom #panelLeft,
.panel-bottom #panelRight {
	background-color: red;
}

.panel-bottom #panelCenter {
	background-color: transparent;
}

Если вы переместите панель в любое другое место, то стили не применятся, поскольку они прописаны только для панели, которая расположена снизу.
Обращаю внимание, что если вы оставите #panel со своим цветом, то центральная часть, которая должна быть прозрачной будет того цвета, который указан для #panel.

Если хочется чего-то более сложного, то можно сделать, например, панель в стиле DDE.
Для начала нам необходимо задать внешний отступ панели от рабочего пространства. На самом деле это делается не так, и то что мы делаем - костыль, но по-другому не получится. Всё делается для показа возможностей кастомизации.

Код: Выделить всё

#panel {
	border: 7px solid transparent;
}
border - это рамка вокруг элемента. В данном случае это прозрачная рамка вокруг панели толщиной в 7 пикселей.
Далее нам необходимо задать цвет панели. Если мы зададим цвет для #panel или, например, для .panel-bottom (-top, -left, -right), то из-за прозрачности рамки панель будет иметь сплошной цвет без отступов.

Код: Выделить всё

#panelLeft,
#panelCenter,
#panelRight {
	background-color: rgba(0, 0, 0, 0.7);
}
Теперь необходимо скруглить углы. Делается это просто.

Код: Выделить всё

#panelLeft {
	border-radius: 20px 0 0 20px;
}

#panelRight {
	border-radius: 0 20px 20px 0;
}
Для #panelCenter в данном случае указывать ничего не надо, поскольку он и так имеет примые углы.

Может показаться, что всё идеально, но если изменить положение панели, то скругленные углы не адаптируются.

Полный код:

Код: Выделить всё

#panel {
	border: 7px solid transparent;
}

#panelLeft,
#panelCenter,
#panelRight {
	background-color: rgba(0, 0, 0, 0.7);
}

.panel-bottom #panelLeft,
.panel-top #panelLeft {
	border-radius: 20px 0 0 20px;
}

.panel-bottom #panelRight,
.panel-top #panelLeft {
	border-radius: 0 20px 20px 0;
}

.panel-left #panelLeft,
.panel-right #panelLeft {
	border-radius: 20px 20px 0 0;
}

.panel-left #panelRight,
.panel-right #panelRight {
	border-radius: 0 0 20px 20px;
}
По мере продвижения панель будет редактироваться и дополняться (как и многие другие элементы).
По возможности в уроках будет несколько вариаций, чтобы к концу вы могли не просто повторить, а создать своё уникальное оформление Cinnamon.

Если есть какие-то вопросы, то обязательно задавайте!

Настройка внешнего вида Cinnamon

Добавлено: 15 янв 2023, 23:08
genribolit
Здравствуйте.
Подскажите, пожалуйста, имя класса заголовка у окон (бесит серый цвет, хочу поменять)

Настройка внешнего вида Cinnamon

Добавлено: 16 янв 2023, 01:56
Laszcz
genribolit, нынешний WM напрочь игнорирует темы metacity, их редактирование или удаление никак не влияет на внешний вид, а декорацию окон тащит из темы GTK3. Её-то и надо ковырять. Я так думаю, что в имени класса должно быть что-нибудь типа .window.caption .

Настройка внешнего вида Cinnamon

Добавлено: 16 янв 2023, 22:55
Kamikaze
genribolit писал(а): ↑
15 янв 2023, 23:08
 Здравствуйте.
Подскажите, пожалуйста, имя класса заголовка у окон (бесит серый цвет, хочу поменять)
На примере Mint-Y.
В папке темы есть папка gtk-3.0 и в ней файл gtk.css
Строка 788 (headerbar, .titlebar:not(headerbar)).

border-color - полоса снизу.
background-color - это отвечает за основной цвет.
box-shadow - внутренняя тень (сверху полоса в один пиксель).
Это что касается цвета в основных приложениях Linux Mint (например, файловый менеджер, параметры системы и прочее), но при этом часть пересекается с другими GTK приложениями.

Строка 799 (.csd headerbar, .csd .titlebar:not(headerbar))
Имеем пару значений background-color и border-color.
Тут настраивается цвет для других GTK приложений, например, "Журналы" или "Заметки".

Это если максимально просто. Изменения этих параметров дадут, например, такой эффект.
Если нужно что-то большее - продолжай менять значения для элементов headerbar и .titlebar.

Надеюсь не поздно ответил.
Если что - задавайте вопросы, постараюсь помочь.

Настройка внешнего вида Cinnamon

Добавлено: 18 янв 2023, 11:27
chiv
Можно ли сделать в окне главного меню и для панели эффект блюр?

Настройка внешнего вида Cinnamon

Добавлено: 18 янв 2023, 12:29
Kamikaze
chiv писал(а): ↑
18 янв 2023, 11:27
 Можно ли сделать в окне главного меню и для панели эффект блюр?
Нет.
Для меню точно нет, для панели есть вариант.
Если вы используете одни обои рабочего стола, то можете вырезать нижнюю часть (под размер панели), заблюрить её в фотошопе и поставить эту картинку вместо обычной заливки цветом.

Настройка внешнего вида Cinnamon

Добавлено: 31 июл 2024, 15:26
Anatolij
Здравствуйте.
Подскажите пожалуйста, как отредактировать главное меню в Cinnamon?
В частности как поменять местами пункты меню? Как перенести пункт меню из одного подменю в другое?

Настройка внешнего вида Cinnamon

Добавлено: 31 июл 2024, 15:32
WWolf
Anatolij, ПКМ - Редактировать меню ж..

Настройка внешнего вида Cinnamon

Добавлено: 31 июл 2024, 16:05
Anatolij
WWolf писал(а): ↑
31 июл 2024, 15:32
 Anatolij, ПКМ - Редактировать меню ж..
Это я делал, но к сожалению так и не нашёл как один пункт подменю поднять выше, а другой опустить ниже. Технология драг анд дроб неработает от слова совсем :sad:
Так же функция "Копировать", "Выркзать" и "Вставить" работает весьма своеобразно.
Может нужно доставить какуюто программу, напремер как в Mate нужно установить Mozo?

Настройка внешнего вида Cinnamon

Добавлено: 31 июл 2024, 16:08
rogoznik
Anatolij писал(а): ↑
31 июл 2024, 16:05
 напремер как в Mate нужно установить Mozo?
У Cinnamon свой редактор меню

Настройка внешнего вида Cinnamon

Добавлено: 31 июл 2024, 18:01
sveta13
:smile: Мне нравиться так:
КАСТОМИЗАЦИЯ LINUX MINT 20/21 + NORD THEME
https://dzen.ru/a/YuVYT4koykP07iVa?yscl ... 6z96045055
PAPIRUS FOLDERS В DEBIAN:
https://github.com/PapirusDevelopmentTe ... erivatives



Ну и т.д. :smile:

Настройка внешнего вида Cinnamon

Добавлено: 31 июл 2024, 18:07
Dja
sveta13, тоже предпочитаю такие часики :thumbs:

Настройка внешнего вида Cinnamon

Добавлено: 31 июл 2024, 20:32
Anatolij
rogoznik писал(а): ↑
31 июл 2024, 16:08
У Cinnamon свой редактор меню
[/quote]
Это я понимаю, и собственно говоря, по этому и спрашиваю. Как добиться аналогичного функционала?

Настройка внешнего вида Cinnamon

Добавлено: 31 июл 2024, 20:39
rogoznik
Anatolij писал(а): ↑
31 июл 2024, 20:32
 Как добиться аналогичного функционала?
Да собственно, скорее всего, никак. Можно на гитхабе завести issue с запросом хотелки - может когда-нибудь сделают. Вон для thunderbird 25 лет ждали иконку в трей - дождались :-D
Часовой пояс: UTC+03:00
Страница 1 из 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/