➡️ Шаг 1. Создание поля в панели администратораДля начала нужно подготовить текстовое поле, куда пользователи будут загружать свои стили или ссылки.Перейдите в Администрирование ⭢ Пользователи ⭢ Дополнительные поля профиля.Создайте Новое поле:Название: Например, Кастомизация или Мой CSSТип поля: Выберите Текстовое поле (textarea)Раздел: Обязательно выберите ДополнительноПосле сохранения посмотрите на ID созданного поля. В коде MyBB/Rusff они обычно именуются как fld1, fld2, fld3 и так далее.Как узнать ID: Откройте страницу редактирования профиля, нажмите правой кнопкой мыши на это поле ⭢ «Просмотреть код» (Explore) и найдите его id="fldX" (где X — это номер).➡️ Шаг 2. Установка скрипта кастомизацииЭтот скрипт будет находить код, который пользователь вставил в поле, и применять его как персональный стиль только на странице его профиля.Перейдите в Администрирование ⭢ Оформление ⭢ HTML-низ и вставьте следующий код (замените fld1 на ID вашего поля, если оно отличается):html<script style="text/javascript">
if (window.location.href.indexOf("profile.php?id=") > -1) {
    document.addEventListener("DOMContentLoaded", function() {
        // Находим блок с дополнительным полем (замените fld1 на ваш ID)
        var customField = document.querySelector("#fld1");
       
        if (customField) {
            // Получаем текст, который ввел пользователь
            var userCss = customField.value || customField.innerText;
           
            if (userCss.trim() !== "") {
                // Создаем элемент стиля и внедряем его на страницу
                var styleTag = document.createElement("style");
                styleTag.type = "text/css";
                styleTag.innerHTML = userCss;
                document.getElementsByTagName("head")[0].appendChild(styleTag);
            }
           
            // Опционально: прячем само текстовое поле от чужих глаз в режиме просмотра профиля
            // если оно находится в режиме чтения, а не редактирования
            var viewField = document.querySelector(".fld-custom-view"); // Класс зависит от верстки вашего HTML-профиля
            if (viewField) viewField.style.display = "none";
        }
    });
}
</script>
Используйте код с осторожностью.💡 Как пользователи смогут этим пользоваться (примеры кода)В описании к этому полю на форуме вы можете дать игрокам подсказку, какой код они могут туда вставлять.Изменить фон профиля:css#profile { background-image: url('ссылка_на_картинку.jpg') !important; background-size: cover; }
Используйте код с осторожностью.Изменить цвет текста в профиле:css#profile, #profile td, #profile th { color: #ff00ea !important; }
Используйте код с осторожностью.Добавить кастомный курсор на страницу своего профиля:cssbody { cursor: url('ссылка_на_курсор.cur'), auto !important; }
Используйте код с осторожностью.Если вы хотите сделать кастомизацию более простой для игроков (например, чтобы они вставляли не CSS-код, а просто ссылку на картинку-фон, а скрипт сам подставлял её в нужный блок), дайте знать.Для этого мне понадобится уточнить:Какой номер ID присвоился вашему полю в панели администратора?Вы хотите, чтобы пользователи вставляли чистый CSS-код или просто ссылку на фоновое изображение?ИИ может ошибаться. Проверяйте его ответы. из полученных игроками фонов профиля, плашек, иконок, находящихся в блоках слева, они выбирают и он становится на примерку профиля справа, после сохранения, все изменения профиля остаютсяДля реализации такой интерактивной «примерочной» на платформе MyBB / Rusff, где игрок кликает на инвентарь слева (фоны, плашки, иконки), видит изменения в реальном времени справа, а после сохранения всё это применяется к его анкете, используется скрипт-конструктор и скрытое техническое поле.Поскольку на Rusff структура страницы редактирования профиля (profile.php?section=essentials или personal) статична, а элементы инвентаря обычно выдаются через HTML-блоки, мы свяжем клики по элементам со скрытым полем. При клике скрипт будет записывать ID выбранных вещей в поле, а при сохранении профиля MyBB штатно запишет эти данные в базу данных.➡️ Шаг 1. Создание скрытого поля в админкеЭто поле нужно для хранения информации о том, что именно выбрал пользователь.Перейдите в Администрирование ⭢ Пользователи ⭢ Дополнительные поля профиля.Создайте поле:Название: Код кастомизации (или любое другое).Тип: Текстовое поле (textarea или обычная строка).Раздел: Дополнительно (или любой другой, где будет примерочная).Узнайте ID этого поля (например, fld4). Запомните его, мы подставим его в скрипт.➡️ Шаг 2. Разметка инвентаря и профиляЧтобы скрипт понимал, на что кликает пользователь и куда это применять, оберните элементы в специальные HTML-классы и дата-атрибуты.Вы можете разместить этот блок в описании дополнительного поля в админке (прямо над полем или под ним) либо через HTML-низ.html<!-- Контейнер примерочной (флекс-сетка: слева инвентарь, справа превью) -->
<div class="fitting-room-container">
 
  <!-- ЛЕВАЯ ЧАСТЬ: ИНВЕНТАРЬ ИГРОКА -->
  <div class="inventory-left">
    <h3>Ваш инвентарь</h3>
   
    <!-- Секция фонов -->
    <div class="inventory-section">
      <h4>Фоны профиля</h4>
      <div class="inventory-grid">
        <!-- data-type="bg" указывает, что это фон. В data-value передаем URL картинки -->
        <div class="inv-item" data-type="bg" data-value="https://imgur.com">
          <img src="https://imgur.com" alt="Неон">
          <span>Неоновый город</span>
        </div>
        <div class="inv-item" data-type="bg" data-value="https://imgur.com">
          <img src="https://imgur.com" alt="Космос">
          <span>Кибер-Космос</span>
        </div>
      </div>
    </div>

    <!-- Секция плашек/аватарок/рамок -->
    <div class="inventory-section">
      <h4>Плашки / Рамки</h4>
      <div class="inventory-grid">
        <!-- data-type="badge" указывает на элемент декора -->
        <div class="inv-item" data-type="badge" data-value="https://imgur.com">
          <img src="https://imgur.com" alt="Плашка 1">
          <span>Синдикат</span>
        </div>
      </div>
    </div>
  </div>

  <!-- СПРАВА: ПРИМЕРКА (Упрощенная копия вашей карточки профиля) -->
  <div class="preview-right">
    <h3>Предпросмотр профиля</h3>
    <!-- Этот блок будет менять свой background-image -->
    <div id="preview-profile-card" class="profile-card-mock">
      <div class="avatar-container">
        <img src="https://forum.ru" class="preview-avatar" alt="Аватар">
        <!-- Сюда будет накладываться выбранная плашка/рамка -->
        <div id="preview-badge-slot" class="badge-slot"></div>
      </div>
      <div class="preview-user-info">
        <div class="preview-username">Ваш Никнейм</div>
        <div class="preview-usertitle">Статус / Ранг</div>
      </div>
    </div>
  </div>

</div>
Используйте код с осторожностью.➡️ Шаг 3. Основной скрипт (в HTML-низ или описание поля)Этот скрипт отвечает за интерактив (клик ⭢ примерка ⭢ запись данных) и за отображение сохраненного результата, когда пользователь просто заходит на страницу чьего-то профиля.Замените #fld4 на фактический ID вашего созданного скрытого поля.html<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
    // === КОНФИГУРАЦИЯ ===
    var FIELD_SELECTOR = "#fld4"; // ID вашего дополнительного поля в профиле
   
    // Проверяем, находимся ли мы на странице редактирования профиля
    var isEditProfile = window.location.href.indexOf("profile.php") > -1 && (document.querySelector(FIELD_SELECTOR));
    // Проверяем, находимся ли мы на странице просмотра профиля (у MyBB это обычно profile.php?id=X)
    var isViewProfile = window.location.href.indexOf("profile.php?id=") > -1;

    // Скрываем техническое текстовое поле от пользователя, чтобы он не правил код руками
    if (document.querySelector(FIELD_SELECTOR)) {
        document.querySelector(FIELD_SELECTOR).style.display = "none";
    }

    // 1. РЕЖИМ РЕДАКТИРОВАНИЯ И ПРИМЕРКИ
    if (isEditProfile) {
        var storageField = document.querySelector(FIELD_SELECTOR);
        var previewCard = document.querySelector("#preview-profile-card");
        var previewBadge = document.querySelector("#preview-badge-slot");
       
        // Объект текущего выбора
        var currentSelection = { bg: "", badge: "" };
       
        // Попытка загрузить уже сохраненные ранее данные из скрытого поля
        try {
            if (storageField.value.trim() !== "") {
                currentSelection = JSON.parse(storageField.value);
                // Сразу применяем к превью сохраненные декорации
                if (currentSelection.bg) previewCard.style.backgroundImage = "url('" + currentSelection.bg + "')";
                if (currentSelection.badge) previewBadge.innerHTML = "<img src='" + currentSelection.badge + "'>";
               
                // Подсвечиваем уже выбранные элементы в инвентаре активным классом
                document.querySelectorAll(".inv-item").forEach(function(item) {
                    var type = item.getAttribute("data-type");
                    var val = item.getAttribute("data-value");
                    if (currentSelection[type] === val) item.classList.add("active-item");
                });
            }
        } catch(e) { console.log("Данные кастомизации пусты или повреждены"); }

        // Обработчик кликов по инвентарю
        document.querySelectorAll(".inv-item").forEach(function(item) {
            item.addEventListener("click", function() {
                var type = this.getAttribute("data-type"); // bg или badge
                var value = this.getAttribute("data-value"); // URL картинки
               
                // Если кликнули по уже активному — снимаем выделение (сброс)
                if (this.classList.contains("active-item")) {
                    this.classList.remove("active-item");
                    currentSelection[type] = "";
                    if (type === "bg") previewCard.style.backgroundImage = "none";
                    if (type === "badge") previewBadge.innerHTML = "";
                } else {
                    // Убираем активность у других элементов этой же категории
                    document.querySelectorAll('.inv-item[data-type="' + type + '"]').forEach(function(el) {
                        el.classList.remove("active-item");
                    });
                    // Активируем текущий
                    this.classList.add("active-item");
                    currentSelection[type] = value;
                   
                    // Применяем изменения на превью в реальном времени
                    if (type === "bg") {
                        previewCard.style.backgroundImage = "url('" + value + "')";
                    }
                    if (type === "badge") {
                        previewBadge.innerHTML = "<img src='" + value + "'>";
                    }
                }
               
                // Записываем JSON-строку в скрытое поле профиля.
                // При нажатии кнопки "Сохранить" на форуме, MyBB сам отправит её в БД.
                storageField.value = JSON.stringify(currentSelection);
            });
        });
    }

    // 2. РЕЖИМ ПРОСМОТРА ПРОФИЛЯ ИГРОКА (Применение сохраненного стиля на самом форуме)
    if (isViewProfile) {
        // Ищем на странице блок профиля, куда MyBB вывел значение нашего доп. поля fld4
        // На Rusff блоки доп. полей в профиле обычно имеют класс вида .fld-название или лежат в таблице
        // Нам нужно найти контейнер, где вывелось скрытое поле, считать данные и применить стиль к РЕАЛЬНОМУ профилю.
       
        var profileDataBlock = document.querySelector(".fld-custom-view") || document.querySelector("#profile");
        // Примечание: Чтобы скрипт нашел данные, убедитесь, что в настройках поля в админке включена опция "Отображать при просмотре профиля".
       
        // Для примера: ищем строку JSON в коде страницы, которую вывело поле
        // Допустим, мы дали полю класс или ищем его по текстовому содержимому. Более изящно — найти текст, похожий на {"bg":...}
        var allHtml = document.body.innerHTML;
        var match = allHtml.match(/\{"bg":[^]*?"badge":[^]*?\}/);
       
        if (match) {
            try {
                var savedData = JSON.parse(match[0]);
               
                // Применяем сохраненный фон к реальному блоку профиля на вашем форуме (замените селектор #profile на ваш класс)
                if (savedData.bg) {
                    var realProfileCard = document.querySelector("#profile") || document.querySelector(".profile-view");
                    if (realProfileCard) {
                        realProfileCard.style.backgroundImage = "url('" + savedData.bg + "')";
                        realProfileCard.style.backgroundSize = "cover";
                        realProfileCard.style.backgroundPosition = "center";
                    }
                }
               
                // Применяем плашку/рамку к реальной аватарке в профиле
                if (savedData.badge) {
                    var realAvatarContainer = document.querySelector(".profile-avatar") || document.querySelector(".user-avatar");
                    if (realAvatarContainer) {
                        // Оборачиваем/добавляем плашку
                        var badgeImg = document.createElement("img");
                        badgeImg.src = savedData.badge;
                        badgeImg.className = "applied-profile-badge";
                        badgeImg.style.position = "absolute";
                        // Настройте позиционирование стилями CSS
                        realAvatarContainer.style.position = "relative";
                        realAvatarContainer.appendChild(badgeImg);
                    }
                }
            } catch(e) { console.log("Ошибка разбора сохраненного стиля профиля"); }
        }
    }
});
</script>
Используйте код с осторожностью.➡️ Шаг 4. Стили (CSS) для красивого отображенияДобавьте этот код в Администрирование ⭢ Оформление ⭢ Таблица стилей (CSS), чтобы инвентарь и карточки выглядели аккуратно.css/* Сетка примерочной */
.fitting-room-container {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    background: #1a1a1a;
    padding: 15px;
    border-radius: 8px;
    color: #fff;
}
.inventory-left {
    flex: 1;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}
/* Карточка предмета */
.inv-item {
    background: #2a2a2a;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 5px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}
.inv-item:hover {
    background: #3a3a3a;
    border-color: #555;
}
.inv-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.inv-item span {
    display: block;
    font-size: 10px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Активный выбранный предмет */
.inv-item.active-item {
    border-color: #00ffcc !important;
    background: #1f3a35;
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.4);
}

/* Правая часть: Карта предпросмотра */
.preview-right {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #111;
    border-radius: 8px;
    padding: 15px;
}
.profile-card-mock {
    width: 100%;
    height: 220px;
    background-color: #222;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    position: relative;
    border: 1px solid #333;
}
.avatar-container {
    position: relative;
    width: 90px;
    height: 90px;
}
.preview-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
/* Слот наложения плашки/рамки */
.badge-slot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Пропускает клики сквозь себя */
}
.badge-slot img {
    width: 100%;
    height: 100%;
}
.preview-user-info {
    text-align: center;
    margin-top: 10px;
    background: rgba(0,0,0,0.6);
    padding: 5px 10px;
    border-radius: 4px;
}
Используйте код с осторожностью.Как это работает в комплексе:Игрок заходит в изменение профиля.Кликает на элемент инвентаря слева. Скрипт мгновенно меняет CSS-свойство background-image (или добавляет картинку плашки) у правого демонстрационного блока.Одновременно с этим скрипт формирует строку данных (например: {"bg":"ссылка","badge":"ссылка"}) и подставляет её в скрытое поле textarea.Игрок нажимает кнопку «Сохранить изменения» внизу страницы профиля. Кнопка отправляет стандартную форму MyBB, и строка сохраняется в профиле игрока.Когда любой другой пользователь заходит в профиль этого игрока, скрипт на странице считывает эту строку из кода и на лету модифицирует реальные блоки форума, украшая его.Если у вас возникнут трудности с точными CSS-классами аватарок и карточек профиля на konami.rusff.me, вы можете подсказать, какие именно классы используются у вас в верстке профиля (HTML-шаблоне), и я скорректирую финальные селекторы скрипта под ваш дизайн. Какой ID номер поля у вас получился после его создания?