Добавление вашего логотипа в редактор XenForo — это простой, но эффективный способ настроить ваше сообщество и тонко продвигать ваш бренд. Это руководство проведет вас через шаги, чтобы достичь этой тонкой и профессиональной настройки.
Демонстрация в реальном времени:Administrata - Empowering Community Leaders
Демонстрация в реальном времени:Administrata - Empowering Community Leaders
- Доступ к дополнительному шаблону LESS
- Перейдите в панель администратора XenForo.
- Перейдите в раздел Внешний вид > Шаблоны.
- Откройте шаблон extra.less для темы, которую вы хотите настроить.
- Добавьте пользовательский CSS-код
- Скопируйте и вставьте следующий код в шаблон extra.less:
CSS:
.fr-box.fr-basic .fr-element {
position: relative;
background: none;
}
.fr-box.fr-basic .fr-element:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://administrata.net/data/assets/logo_default/TESTLOGO.webp') no-repeat bottom right; /* Change to your logo */
background-size: 300px; /* Adjust size as needed */
opacity: 0.2; /* Set opacity to 20% or whatever you prefer */
pointer-events: none; /* Make it non-interactive */
z-index: -1; /* Ensure it appears behind the text content */
}
/* Media query for smaller screens */
@media (max-width: 650px) {
.fr-box.fr-basic .fr-element:before {
content: ''; /* Ensure content remains empty */
background: url('https://i.ibb.co/8rFyrtW/opacity.png') no-repeat bottom right; /* Change to your logo */
background-size: 30px; /* Adjust size for mobile or whatever you prefer */
}
.fr-box.fr-basic .fr-element {
/* Optional: Add any additional styling for the element on mobile */
}
}Как это работает
- Вид рабочего стола:
- Добавляет ваш логотип ( TESTLOGO.webp ) в качестве едва заметного фона в редактор. Не забудьте изменить мою ссылку на свою.
- Логотип отображается в правом нижнем углу, размер изменен до 300 пикселей с непрозрачностью 20% . Настройте по своему усмотрению.
- Мобильный вид:
- Настраивает логотип для экранов меньшего размера с помощью медиа-запроса.
- Меньший логотип ( opacity.png ) изменен на 30 пикселей для лучшего размещения на мобильных устройствах. Не забудьте изменить мою ссылку на свою и настроить по своему усмотрению.
- Тестирование отзывчивости:
- Проверьте, как редактор выглядит на настольных компьютерах и мобильных устройствах.
- При необходимости отрегулируйте размеры и расположение логотипа.
- Сделайте резервную копию ваших изменений:
- Всегда создавайте резервную копию файла extra.less перед внесением изменений.
- Экспериментируйте безопасно:
- Используйте тестовую тему, если вы не уверены, стоит ли вносить изменения непосредственно в рабочую тему.
