Меняем внешний вид, устанавливаем различные обои на чаты в матрице (Matrix, Element Web, Element Desktop)

Опубликовано 12 октября, 2024 в 11:20Окт 12, 2024

Граждане

Разберу для начала Element Web, так как Element Desktop на Electron там всё делается через Ctrl + Shift + I.

Заходим во Все настройки.

Внешний вид и ставим Пузыри сообщений. По желанию, но выглядим вроде хорошо, как в Element X на Android

Фон слева по умолчанию подстраивается под вашу аватарку, но с размытиями всякими и эффектами, если конечно аватарка не такая как у меня, а более светлая с цветами)

В браузере можно использовать практически любое расширение, позволяющее менять стили на всех сайтах. Некоторые стили публичные. Изменить можно внешний вид любого сайта.
Мы будем использвать расширение с ручной корректировкой.
Stylish: https://chromewebstore.google.com/detail/stylish-—-настраиваемые-т/fjnbnpbmkenffdnngjfgmeleoegfcffe
или
User JavaScript and CSS: https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

Stylish

Переходим в редактор и вставляем код:

div.mx_MatrixChat>:not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
    background: linear-gradient(rgba(0,0,0,.45), rgba(24,27,33,1)), url(https://i.pinimg.com/originals/01/25/f0/0125f0f9c3d46f6445dd65a8a162125a.jpg);
    background-size: cover;
}
div.mx_EventTile .mx_EventTile_avatar img.mx_BaseAvatar_image {
    width: 40px !important;
    height: 40px !important;
}
div.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar img.mx_BaseAvatar_image {
    width: 14px !important;
    height: 14px !important;
}
div.mx_EventTile .mx_EventTile_avatar .mx_BaseAvatar span.mx_BaseAvatar_initial {
    width: 40px !important;
    line-height: 40px !important;
}
.mx_EventTile_line span.mx_MessageTimestamp {
    left: unset;
    right: 10px;
    width: fit-content;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line span.mx_MessageTimestamp {
    left: unset;
    right: 15px;
    width: fit-content;
}
.mx_UserMenu_minimized .mx_UserMenu_row {
    position: relative;
    left: 6px;
}
.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile:hover .mx_EventTile_line {
    background-color: #22262e;
    background-color: rgba(0,0,0,.3);
}
.mx_EventTile_highlight .markdown-body .mx_EventTile_line,
.mx_EventTile_highlight .mx_EventTile_line {
    background-color: #22262e;
    background-color: rgba(30,0,0,.3);
}
.mx_RoomHeader.light-panel {
    background-color: #22262e;
    background-color: rgba(24,27,33,.45);
}
.mx_MImageBody {
    width: 30%;
}
.markdown-body blockquote {
    background: linear-gradient(90deg, rgba(34,38,46,1) 0%, rgba(0,0,0,0) 80%);
    color: #fff;
}
.mx_RoomHeader_buttons {
    background-color: #181b21;
    background-color: rgba(0,0,0,0);
}
.mx_SenderProfile > span {
    background-color: #22262e;
}

Картинки можно выбирать из сети.

Копируем ссылку ни картинку.

Вставляем в код ссылку на картинку заменяя предыдущую, вместо ссылки с окончанием .jpg.

Сохраняем.

User JavaScript and CSS

Нажимаем на расширение и добавляем сайт.

Вставляем код в 3 колонку и сохраняем.

div.mx_MatrixChat>:not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
    background: linear-gradient(rgba(0,0,0,.45), rgba(24,27,33,1)), url(https://i.pinimg.com/originals/01/25/f0/0125f0f9c3d46f6445dd65a8a162125a.jpg);
    background-size: cover;
}
div.mx_EventTile .mx_EventTile_avatar img.mx_BaseAvatar_image {
    width: 40px !important;
    height: 40px !important;
}
div.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar img.mx_BaseAvatar_image {
    width: 14px !important;
    height: 14px !important;
}
div.mx_EventTile .mx_EventTile_avatar .mx_BaseAvatar span.mx_BaseAvatar_initial {
    width: 40px !important;
    line-height: 40px !important;
}
.mx_EventTile_line span.mx_MessageTimestamp {
    left: unset;
    right: 10px;
    width: fit-content;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line span.mx_MessageTimestamp {
    left: unset;
    right: 15px;
    width: fit-content;
}
.mx_UserMenu_minimized .mx_UserMenu_row {
    position: relative;
    left: 6px;
}
.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile:hover .mx_EventTile_line {
    background-color: #22262e;
    background-color: rgba(0,0,0,.3);
}
.mx_EventTile_highlight .markdown-body .mx_EventTile_line,
.mx_EventTile_highlight .mx_EventTile_line {
    background-color: #22262e;
    background-color: rgba(30,0,0,.3);
}
.mx_RoomHeader.light-panel {
    background-color: #22262e;
    background-color: rgba(24,27,33,.45);
}
.mx_MImageBody {
    width: 30%;
}
.markdown-body blockquote {
    background: linear-gradient(90deg, rgba(34,38,46,1) 0%, rgba(0,0,0,0) 80%);
    color: #fff;
}
.mx_RoomHeader_buttons {
    background-color: #181b21;
    background-color: rgba(0,0,0,0);
}
.mx_SenderProfile > span {
    background-color: #22262e;
}

Всё.

Опубликовано 13 февраля, 2026 в 13:25Февр 13, 2026

Автор
Граждане

Для приложения Element Desktop.
1. Откройте инструменты разработчика, нажав Ctrl + Shift + I.
2. Перейдите на вкладку Console.
3. В самый низ добавьте код:

const style = document.createElement('style');
style.innerHTML = `
div.mx_MatrixChat>:not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
    background: linear-gradient(rgba(0,0,0,.45), rgba(24,27,33,1)), url(https://i.pinimg.com/originals/01/25/f0/0125f0f9c3d46f6445dd65a8a162125a.jpg);
    background-size: cover;
}
div.mx_EventTile .mx_EventTile_avatar img.mx_BaseAvatar_image {
    width: 40px !important;
    height: 40px !important;
}
div.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar img.mx_BaseAvatar_image {
    width: 14px !important;
    height: 14px !important;
}
div.mx_EventTile .mx_EventTile_avatar .mx_BaseAvatar span.mx_BaseAvatar_initial {
    width: 40px !important;
    line-height: 40px !important;
}
.mx_EventTile_line span.mx_MessageTimestamp {
    left: unset;
    right: 10px;
    width: fit-content;
}
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line span.mx_MessageTimestamp {
    left: unset;
    right: 15px;
    width: fit-content;
}
.mx_UserMenu_minimized .mx_UserMenu_row {
    position: relative;
    left: 6px;
}
.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile:hover .mx_EventTile_line {
    background-color: #22262e;
    background-color: rgba(0,0,0,.3);
}
.mx_EventTile_highlight .markdown-body .mx_EventTile_line,
.mx_EventTile_highlight .mx_EventTile_line {
    background-color: #22262e;
    background-color: rgba(30,0,0,.3);
}
.mx_RoomHeader.light-panel {
    background-color: #22262e;
    background-color: rgba(24,27,33,.45);
}
.mx_MImageBody {
    width: 30%;
}
.markdown-body blockquote {
    background: linear-gradient(90deg, rgba(34,38,46,1) 0%, rgba(0,0,0,0) 80%);
    color: #fff;
}
.mx_RoomHeader_buttons {
    background-color: #181b21;
    background-color: rgba(0,0,0,0);
}
.mx_SenderProfile > span {
    background-color: #22262e;
}
`;
document.head.appendChild(style);

Меняем внешний вид, устанавливаем различные обои на чаты в матрице (Matrix, Element Web, Element Desktop)

Featured Replies

Для публикации сообщений создайте учётную запись или авторизуйтесь

Последние посетители 0

aridan 0

perekrostok 0

vwxrty 0

Cyecaid 0

ovsanchik 0

murrlu 0

stoll25 0

Важная сводка

Досье

Навигация

Розыск

Настройка push-извещений браузера

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)