Информация Графика | Меняем фон форума на собственный

[Lev_Exelent]

Приветствую всех, кто читает эту тему!

С помощью этой темы вы можете настроить внешний вид вашего форума по своему вкусу.

В настоящее время на форуме используется следующий фон:

Спойлер: Стандартный фон

Мы можем заменить этот фон на любую подходящую картинку или видеоролик.

Начнем:

Спойлер: Первый способ

1. Скачиваем расширение User JavaScript and CSS
2. Теперь выбираем что будем заменять:

Спойлер: Изображение

body {
    background-image: url('https://') !important; /* Укажите ссылку на ваше изображение */
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

.p-body {
    background: none !important;
}

.p-body-main, .p-body-inner {
    background: none !important;
    box-shadow: none !important;
}

Спойлер: Видеоролик

Здесь мы должны добавить код в JavaScript и CSS.

Спойлер: JavaScript

const video = document.createElement('video');
video.src = 'https://v1.pinimg.com/videos/iht/720p/89/80/1d/89801d8463a34b81277a64a742cdd106.mp4'; // Укажите ссылку на ваше видео
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;

video.style.position = 'fixed';
video.style.top = '0';
video.style.left = '0';
video.style.width = '100%';
video.style.height = '100%';
video.style.objectFit = 'cover';
video.style.zIndex = '-1';

document.body.appendChild(video);

Спойлер: CSS

body {
    background: none !important;
}

.p-body {
    position: relative;
    z-index: 1;
    background: none !important;
}

.p-body-main, .p-body-inner {
    background: none !important;
}

Спойлер: Второй способ

Второй способ предлагает более продвинутые функции.

Динамическая смена фона: Вы можете загрузить любое изображение прямо через интерфейс, без необходимости редактировать код.
Сохранение настроек: Фон остается неизменным даже после перезагрузки страницы.
Сброс фона: Одна кнопка — и фон возвращается к стандартному.
Иконки вместо текста: Всё выглядит стильно и минималистично.
Поддержка SweetAlert2: Создаются красивые модальные окна для выбора изображения.

1] Устанавливаешь Tampermonkey.
2] Добавляешь скрипт. (Автор @Cort Quwin)
3] На форуме появляется кнопка «Сменить фон», которая открывает удобный интерфейс для загрузки изображения.

СКОПИРУЙ КОД ОТСЮДА / КЛИКАБЕЛЬНО

 

[Oskar_Kayfman]

Приветствую.
Полезно, закреплю.

 

[Cort Quwin]

Это, конечно, работает, но для человека, который ставит себе "</>" в профиль, такое решение выглядит слишком простым.

Позволь предложить более продвинутый вариант, который я использую:


Что делает мой скрипт:

• Динамическая смена фона: Можно загрузить любое изображение прямо через интерфейс, без необходимости редактировать код.
• Сохранение настроек: Фон сохраняется даже после перезагрузки страницы.
• Сброс фона: Одна кнопка — и фон возвращается к стандартному.
• Иконки вместо текста: Всё выглядит стильно и минималистично.
• Поддержка SweetAlert2: Красивые модальные окна для выбора изображения.

СКОПИРУЙ КОД ОТСЮДА / КЛИКАБЕЛЬНО

Как это работает:

• Устанавливаешь Tampermonkey.
• Добавляешь мой скрипт.
• На форуме появляется кнопка "Сменить фон", которая открывает удобный интерфейс для загрузки изображения.

 

[Lev_Exelent]

Это, конечно, работает, но для человека, который ставит себе "</>" в профиль, такое решение выглядит слишком простым.

Позволь предложить более продвинутый вариант, который я использую:


Что делает мой скрипт:

• Динамическая смена фона: Можно загрузить любое изображение прямо через интерфейс, без необходимости редактировать код.
• Сохранение настроек: Фон сохраняется даже после перезагрузки страницы.
• Сброс фона: Одна кнопка — и фон возвращается к стандартному.
• Иконки вместо текста: Всё выглядит стильно и минималистично.
• Поддержка SweetAlert2: Красивые модальные окна для выбора изображения.

СКОПИРУЙ КОД ОТСЮДА / КЛИКАБЕЛЬНО

Как это работает:

• Устанавливаешь Tampermonkey.
• Добавляешь мой скрипт.
• На форуме появляется кнопка "Сменить фон", которая открывает удобный интерфейс для загрузки изображения.

Я, конечно, не супер разбираюсь в этом, но твой способ тоже добавил.