Custom admin login

Zenettany · 15 Окт 2025

Всем доброго времени суток. Возникла необходимость кастомизации страницы авторизации в админку XenForo. После анализа доступных ресурсов обнаружил отсутствие комплексной документации по данному вопросу.

Предполагаю, что многие разработчики по XF сталкивались с подобной задачей, но не находили четкого руководства к действию.

Алгоритм реализации

Код:

1. Активация режима разработчика
2. Модификация шаблона login_form
3. Интеграция кастомных стилей

Шаг 1: Активация режима разработчика

Необходимо получить доступ к файловой системе через панель управления хостингом (ispmanager, cPanel, Fastpanel) и locate файл конфигурации:

Код:

www/ваш_домен/src/config.php

Добавить следующие параметры:

PHP:

$config['debug'] = true;
$config['development']['enabled'] = true;

Режим разработчика активирован.

Шаг 2: Модификация шаблона авторизации

В административной панели XenForo пройти по пути: Внешний вид → Стили → Мастер-стиль → Шаблоны

Найти целевой шаблон login_form и перед блоком:

HTML:

<xf:page option="template">LOGIN_CONTAINER</xf:page>

Интегрировать следующий CSS код:

HTML:

<xf:css>
.overlay {
    background: rgba(13, 17, 23, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid #30363d !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    animation: slideIn 0.3s ease-out !important;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.overlay-title {
    background: #161b22 !important;
    color: #f0f6fc !important;
    border-bottom: 1px solid #30363d !important;
    padding: 20px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.overlay-titleCloser {
    background: #21262d !important;
    border: 1px solid #30363d !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.overlay-titleCloser:hover {
    background: #30363d !important;
    border-color: #8b949e !important;
}

.blockMessage {
    background: #0d1117 !important;
    color: #f85149 !important;
    border: 1px solid #f85149 !important;
    border-radius: 8px !important;
    padding: 25px !important;
    margin: 20px !important;
    font-size: 15px !important;
    position: relative !important;
}

.blockMessage::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: #f85149 !important;
    border-radius: 4px 0 0 4px !important;
}

.p-body-nav {
  height: 30px;
  padding: 0px;
}

.p-body-nav .nav-item {
  display: block;
  text-align: -webkit-center;
  width: 50px;
  height: 25px;
  line-height: 25px;
  background: #1a1a1a;
  color: #a1a1aa;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 2px 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-item:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  transform: translateY(-1px);
}

.p-body-nav {
  position: sticky;
  padding-top: 100px;
  top: 0;
  margin: 0 auto;
  bottom: auto;
}

.p-adminLogin {
  color: #e4e4e7;
  background: #0a0a0a;
  min-height: 100vh;
}

.p-adminLogin a {
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.2s ease;
}

.p-adminLogin a:hover {
  color: #60a5fa;
  text-decoration: underline;
}

.p-adminLogin .adminLogin-contentForm {
  color: #e4e4e7;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 32px 40px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.p-adminLogin .adminLogin-row > dd input {
  background: #27272a;
  color: #fafafa;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 27px;
  transition: all 0.2s ease;
  font-size: 14px;
}

.p-adminLogin .adminLogin-row > dd input:focus {
  background: #27272a;
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.p-adminLogin .adminLogin-row > dd input:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.p-adminLogin .adminLogin-row > dd input::-webkit-input-placeholder {
  color: #71717a;
}

.p-adminLogin .adminLogin-row > dd input::-moz-placeholder {
  color: #71717a;
}

.p-adminLogin .adminLogin-row > dd input:-moz-placeholder {
  color: #71717a;
}

.p-adminLogin .adminLogin-row > dd input:-ms-input-placeholder {
  color: #71717a;
}

.p-adminLogin .adminLogin-row > dd input + .far,
.p-adminLogin .adminLogin-row > dd input + .fal,
.p-adminLogin .adminLogin-row > dd input + .fas {
  color: #a1a1aa;
  transition: color 0.2s ease;
}

.p-adminLogin .adminLogin-row > dd input:focus + .far,
.p-adminLogin .adminLogin-row > dd input:focus + .fal,
.p-adminLogin .adminLogin-row > dd input:focus + .fas {
  color: #3b82f6;
}

.p-adminLogin .adminLogin-row > dd input:-webkit-autofill + .far,
.p-adminLogin .adminLogin-row > dd input:-webkit-autofill + .fal,
.p-adminLogin .adminLogin-row > dd input:-webkit-autofill + .fas {
  color: #e4e4e7;
}

.p-adminLogin .adminLogin-row > dd input:-webkit-autofill ~ .inputGroup-text {
  color: #e4e4e7;
  background: #3b82f6;
  border-color: #3b82f6;
}

.p-adminLogin .adminLogin-row > dd .inputGroup-text.inputGroup-text {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: #27272a;
  color: #a1a1aa;
  transition: all 0.2s ease;
}

.p-adminLogin .adminLogin-boardTitle {
  color: #71717a;
  font-weight: 500;
}

.p-adminLogin .adminLogin-debug .pairs > dt {
  color: inherit;
}

.p-adminLogin .button,
.p-adminLogin a.button {
  background: #2563eb;
  border: 1px solid #2563eb;
  color: #ffffff;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 20px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.p-adminLogin .button:not(.button--splitTrigger):hover,
.p-adminLogin a.button:not(.button--splitTrigger):hover,
.p-adminLogin .button:not(.button--splitTrigger):focus,
.p-adminLogin a.button:not(.button--splitTrigger):focus {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.p-adminLogin .button:not(.button--splitTrigger):active,
.p-adminLogin a.button:not(.button--splitTrigger):active {
  background-color: #1e40af;
  transform: translateY(0);
}

.p-adminLogin .button.button--splitTrigger > .button-text:hover,
.p-adminLogin a.button.button--splitTrigger > .button-text:hover,
.p-adminLogin .button.button--splitTrigger > .button-text:focus,
.p-adminLogin a.button.button--splitTrigger > .button-text:focus,
.p-adminLogin .button.button--splitTrigger > .button-text:active,
.p-adminLogin a.button.button--splitTrigger > .button-text:active {
  background-color: #1d4ed8;
}

.p-adminLogin .button.button--splitTrigger > .button-menu:hover,
.p-adminLogin a.button.button--splitTrigger > .button-menu:hover,
.p-adminLogin .button.button--splitTrigger > .button-menu:focus,
.p-adminLogin a.button.button--splitTrigger > .button-menu:focus,
.p-adminLogin .button.button--splitTrigger > .button-menu:active,
.p-adminLogin a.button.button--splitTrigger > .button-menu:active {
  background-color: #1d4ed8;
}

.p-adminLogin .button.button--link,
.p-adminLogin a.button.button--link {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}

.p-adminLogin .button.button--link:hover,
.p-adminLogin a.button.button--link:hover,
.p-adminLogin .button.button--link:active,
.p-adminLogin a.button.button--link:active,
.p-adminLogin .button.button--link:focus,
.p-adminLogin a.button.button--link:focus {
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.p-adminLogin .button.button--primary,
.p-adminLogin a.button.button--primary {
  background: #2563eb;
  border-color: #2563eb;
}

.p-adminLogin .button.button--primary:hover,
.p-adminLogin a.button.button--primary:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}

.p-adminLogin .button.button--primary:not(.button--splitTrigger):hover,
.p-adminLogin a.button.button--primary:not(.button--splitTrigger):hover,
.p-adminLogin .button.button--primary:not(.button--splitTrigger):focus,
.p-adminLogin a.button.button--primary:not(.button--splitTrigger):focus,
.p-adminLogin .button.button--primary:not(.button--splitTrigger):active,
.p-adminLogin a.button.button--primary:not(.button--splitTrigger):active {
  background-color: #1d4ed8;
}

.p-adminLogin .button.button--primary .button--splitTrigger > .button-text:hover,
.p-adminLogin a.button.button--primary .button--splitTrigger > .button-text:hover,
.p-adminLogin .button.button--primary .button--splitTrigger > .button-text:focus,
.p-adminLogin a.button.button--primary .button--splitTrigger > .button-text:focus,
.p-adminLogin .button.button--primary .button--splitTrigger > .button-text:active,
.p-adminLogin a.button.button--primary .button--splitTrigger > .button-text:active {
  background-color: #1d4ed8;
}

.p-adminLogin .button.button--primary .button--splitTrigger > .button-menu:hover,
.p-adminLogin a.button.button--primary .button--splitTrigger > .button-menu:hover,
.p-adminLogin .button.button--primary .button--splitTrigger > .button-menu:focus,
.p-adminLogin a.button.button--primary .button--splitTrigger > .button-menu:focus,
.p-adminLogin .button.button--primary .button--splitTrigger > .button-menu:active,
.p-adminLogin a.button.button--primary .button--splitTrigger > .button-menu:active {
  background-color: #1d4ed8;
}

.p-adminLogin .adminLogin-content {
  width: 100%;
  max-width: 400px;
}

.p-adminLogin .adminLogin-content.adminLogin-content--wide {
  max-width: 800px;
}

.p-adminLogin .adminLogin-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  background: radial-gradient(ellipse at top, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #0f0f14 50%, #18181b 100%);
  position: relative;
  overflow: hidden;
}

.p-adminLogin .adminLogin-wrapper::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -25%;
  width: 50%;
  height: 100%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
}

.p-adminLogin .adminLogin-wrapper::after {
  content: "";
  position: absolute;
  bottom: -50%;
  right: -25%;
  width: 50%;
  height: 100%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
  animation: float 25s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

.p-adminLogin {
  scroll-behavior: smooth;
}

.p-adminLogin *:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
</xf:css>

Технические примечания

- Все манипуляции выполняются на свой риск
- Обязательно создание резервной копии перед внесением изменений
- Стиль реализован в темной цветовой схеме с современными UI-элементами
- Анимации и переходы оптимизированы для производительности

TwixCore · 15 Окт 2025

To view the content, you need to Sign In or Register.

Faklor · 15 Окт 2025

Ну по большей части, разработчики не видят смысла кастомизировать админку. Кстати, для этого плагин уже давно замутили [DCom] AdminCP Style

Zenettany · 15 Окт 2025

Faklor написал(а):
Ну по большей части, разработчики не видят смысла кастомизировать админку. Кстати, для этого плагин уже давно замутили [DCom] AdminCP Style

Как по мне плагин - не дает полностью кастомизировать админку. Ну или же например как я , не люблю плагинами закидывать форум , когда можно сделать руками самому.
А что касается смысла кастомки админки - многие крупные форумы , используют , чтоб было приятно глазам, та и выглядит уж намного лучше , нежели базовый стиль. Который кстати не меняется от слово совсем.

Custom admin login

Zenettany

𝒅𝒐𝒎𝒊𝒏𝒆 𝒔𝒂𝒍𝒗𝒂 𝒆𝒕 𝒄𝒐𝒏𝒔𝒆𝒓𝒗𝒂

Алгоритм реализации

Шаг 1: Активация режима разработчика

Шаг 2: Модификация шаблона авторизации

Технические примечания

TwixCore

«Last Christmas: my heart. This year: your turn.»

Faklor

Принципы важнее выгоды

Zenettany

𝒅𝒐𝒎𝒊𝒏𝒆 𝒔𝒂𝒍𝒗𝒂 𝒆𝒕 𝒄𝒐𝒏𝒔𝒆𝒓𝒗𝒂

Пользователи онлайн

Поделиться страницей

Полезная информация

Навигация

Популярный контент

Поделиться страницей

Custom admin login

ZenettanyВерифицированный профиль

𝒅𝒐𝒎𝒊𝒏𝒆 𝒔𝒂𝒍𝒗𝒂 𝒆𝒕 𝒄𝒐𝒏𝒔𝒆𝒓𝒗𝒂

Алгоритм реализации​

Шаг 1: Активация режима разработчика​

Шаг 2: Модификация шаблона авторизации​

Технические примечания​

TwixCoreВерифицированный профиль

«Last Christmas: my heart. This year: your turn.»

FaklorВерифицированный профиль

Принципы важнее выгоды

ZenettanyВерифицированный профиль

𝒅𝒐𝒎𝒊𝒏𝒆 𝒔𝒂𝒍𝒗𝒂 𝒆𝒕 𝒄𝒐𝒏𝒔𝒆𝒓𝒗𝒂

Вход

Пользователи онлайн

Поделиться страницей

Полезная информация

Навигация

Популярный контент

Поделиться страницей

Zenettany

Алгоритм реализации

Шаг 1: Активация режима разработчика

Шаг 2: Модификация шаблона авторизации

Технические примечания

TwixCore

Faklor

Zenettany